/* Hallmark · shape: app screen · genre: editorial · theme: Sport (deal 3/3, seed prompt-fd2e·2cab643c·2026-10-28·r0)
 * nav: ink top bar, the GOAL wordmark and three tabs, the current tab a volt block · signature: the reward band, the prize set big on ink with the next goal's form under it · states: empty, error, full, busy submit, undo
 * axes: light/display-condensed/chromatic-volt · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a goal list reads like any to-do list; the reward became a column on every row and the reward band the one loud moment, so the cycle is the screen */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --container: 1200px;
  --text-4xl: 2.488rem;
  --color-on-ink: oklch(98% 0.005 250);
  --color-on-ink-muted: oklch(80% 0.02 250);
  --color-ink-hover: oklch(26% 0.06 258);
  --color-accent-hover: oklch(83% 0.19 120);
  --color-error-wash: oklch(95% 0.03 27);
  --control-h: 40px;
  --bar-h: 60px;
}

/* 한국어는 어절 단위로 줄을 바꾼다('보상입니 / 다' 같은 끊김을 막는다). 긴 낱말은 넘치지 않게 끊는다. */
body { word-break: keep-all; overflow-wrap: break-word; }

/* ------------------------------------------------------------------ shell */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-on-ink); }
.skip:focus-visible { top: var(--space-md); }

.bar { background: var(--color-ink); color: var(--color-on-ink); }
.bar__in { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--bar-h); }
.mark { font: var(--display-weight) var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); text-transform: uppercase; color: inherit; text-decoration: none; white-space: nowrap; }
.bar .mark:focus-visible { outline-color: var(--color-accent); }
.tabs { display: flex; gap: var(--space-2xs); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-card); color: var(--color-on-ink-muted); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.tabs a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.tabs a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); }
.bar__out { margin: 0; }
.bar .link { color: var(--color-on-ink-muted); }
.bar .link:focus-visible { outline-color: var(--color-accent); }

.page { padding-block: var(--space-xl) var(--space-3xl); }

/* ------------------------------------------------------------------ type */
h1 { font-size: var(--text-3xl); line-height: 1.1; }
h2 { font-size: var(--text-xl); line-height: 1.15; }
h3 { font-size: var(--text-md); }
.muted { color: var(--color-muted); }
.time, .row__due { font-family: var(--font-outlier); font-weight: 500; font-variant-numeric: tabular-nums; }
.fig { margin: 0; font: var(--display-weight) var(--text-4xl)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.unit { margin-left: var(--space-3xs); font-size: var(--text-lg); }

/* ------------------------------------------------------------------ links, buttons */
a:hover { text-decoration-color: var(--color-accent-deep); text-decoration-thickness: 2px; }
.link { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; cursor: pointer; position: relative; }
.link::before { content: ""; position: absolute; inset: -12px -6px; }
.link:hover { text-decoration-color: var(--color-accent-deep); text-decoration-thickness: 2px; }
.link:active { transform: translateY(1px); }
.link:disabled { opacity: 0.55; cursor: not-allowed; }
.quiet-link { color: var(--color-muted); font-size: var(--text-sm); }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h); padding: 0 var(--space-lg); border: var(--rule-bar) solid transparent; border-radius: var(--radius-card); font: 800 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: -4px; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn--secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-paper-3); }
.btn--danger { color: var(--color-error); border-color: var(--color-error); }
.btn--danger:hover { background: var(--color-error-wash); }
.btn--on-ink { background: transparent; color: var(--color-on-ink); border-color: var(--color-on-ink); }
.btn--on-ink:hover { background: var(--color-ink-hover); }
.btn--on-ink:focus-visible, .reward .btn--primary:focus-visible { outline-color: var(--color-accent); }
.btn--block { width: 100%; }

/* ------------------------------------------------------------------ fields */
.field { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: var(--space-2xs); align-content: start; min-width: 0; }
.field > label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.input { width: 100%; min-height: var(--control-h); padding: 0 var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; transition: background-color var(--dur-short) var(--ease-out); }
.input:hover { background: var(--color-paper-2); }
.input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.input:disabled { opacity: 0.55; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--color-error); }
textarea.input { min-height: 6rem; padding-block: var(--space-xs); resize: vertical; line-height: 1.5; }
select.input { padding-right: var(--space-xl); }
.help { min-height: 1lh; margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.help--error { color: var(--color-error); }

.gform { display: grid; grid-template-columns: minmax(0, 2fr) 10.5rem minmax(0, 1.5fr) minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: var(--space-md); align-items: start; margin-top: var(--space-md); }
.gform:not(:has(.field--project)) { grid-template-columns: minmax(0, 2fr) 10.5rem minmax(0, 1.5fr) auto; }
.field--submit { grid-row: 2; grid-column: -2 / -1; align-self: start; }

/* ------------------------------------------------------------------ head */
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg) var(--space-xl); padding-bottom: var(--space-lg); }
.head__title { display: grid; gap: var(--space-2xs); min-width: 0; }
.head__date { color: var(--color-muted); }
.figs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(6.5rem, auto); margin: 0; }
.figs > div { display: grid; align-content: end; gap: var(--space-2xs); padding-inline: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.figs > div:first-child { border-left: 0; padding-left: 0; }
.figs > div:last-child { padding-right: 0; }
.figs dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.figs dd { margin: 0; }
.figs .is-live .fig { justify-self: start; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); }
.fig--text { font-size: var(--text-3xl); }
.figs__reward dd { max-width: 18rem; font-weight: 500; }
.head--project .figs { grid-auto-columns: auto; }
.meter { position: relative; display: block; height: 6px; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.meter > span { position: absolute; inset: 0; background: var(--color-ink); transform: scaleX(var(--p, 0)); transform-origin: left center; }
.meter--wide { flex-basis: 100%; }
.head--project .meter--wide { order: 3; }
.head__prize { flex: 1 1 20rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); margin: 0; }
.head__prize .volt { font-size: var(--text-sm); }
.head__prize-text { font: var(--display-weight) var(--text-3xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; min-width: 0; }
.head__prize > a { font-size: var(--text-lg); font-weight: 500; padding-block: var(--space-xs); }
.head__prize-why { font-size: var(--text-sm); color: var(--color-muted); }
.fig.due--over { color: var(--color-error); }

.crumb { margin-bottom: var(--space-xs); font-size: var(--text-sm); }
.crumb a { color: var(--color-muted); }

/* ------------------------------------------------------------------ blocks */
.well { padding: var(--space-lg) var(--space-lg) var(--space-xs); border-top: var(--rule-bar) solid var(--color-rule-2); background: var(--color-paper-2); }
.set { margin-top: var(--space-md); }
.block { margin-top: var(--space-2xl); }
.block--first { margin-top: var(--space-lg); }
.block > h2 { margin-bottom: var(--space-md); }
.block--end { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }

.status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-lg); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-3); }
.status form { margin: 0; }
.status--done { margin-top: var(--space-lg); margin-bottom: 0; }

.empty { display: grid; justify-items: start; gap: var(--space-xs); padding: var(--space-lg) 0; border-top: var(--rule-bar) solid var(--color-rule-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.empty p { color: var(--color-ink-2); }
.empty .empty__what { font-weight: 800; font-size: var(--text-lg); color: var(--color-ink); }
.empty .btn { margin-top: var(--space-xs); }

.finish { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); padding-bottom: var(--space-lg); }
.finish form { margin: 0; }

/* ------------------------------------------------------------------ the sheet */
.sheet { border-top: var(--rule-bar) solid var(--color-rule-2); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.rows { list-style: none; margin: 0; padding: 0; }
.sheet__head, .row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 15rem) 6.5rem; column-gap: var(--space-md); align-items: center; }
.sheet__head { padding-block: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.sheet__head > :last-child { text-align: right; }
.row { padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.row__main { display: grid; gap: var(--space-3xs); min-width: 0; }
.row__title { font-weight: 500; text-decoration: none; overflow-wrap: break-word; }
.row__title:hover { text-decoration: underline; }
.row__project { font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; }
a.row__project:hover { text-decoration: underline; }
.row__reward { margin: 0; color: var(--color-ink-2); overflow-wrap: break-word; min-width: 0; }
.row__due { margin: 0; text-align: right; white-space: nowrap; color: var(--color-ink-2); }
.due--today { color: var(--color-ink); }
.due--over { color: var(--color-error); }
.due--done { color: var(--color-muted); }
.stage .due--done { font-family: var(--font-body); font-weight: 400; }
.is-done .row__title { color: var(--color-ink-2); }

.check-form { margin: 0; }
.check { position: relative; display: grid; place-items: center; width: 28px; height: 28px; margin: var(--space-xs); padding: 0; border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: transparent; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.check::before { content: ""; position: absolute; inset: -10px; }
.check:hover { background: var(--color-paper-3); color: var(--color-muted); }
.check:active { transform: translateY(1px); }
.check:disabled { opacity: 0.55; cursor: not-allowed; }
.check[aria-busy="true"] { cursor: progress; background: var(--color-accent); color: var(--color-accent-ink); }
.check.is-on { background: var(--color-accent); color: var(--color-accent-ink); }
.check.is-on:hover { background: var(--color-accent-hover); }

/* ------------------------------------------------------------------ reward band */
/* 화면에서 가장 큰 순간. 보상 글자가 왼쪽에서 걷히며 드러나고 볼트 밑줄이 차오른다(한 번). */
.reward { margin-bottom: var(--space-xl); padding: var(--space-lg) var(--space-xl) var(--space-md); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-on-ink); }
.reward:focus { outline: none; }
.reward:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.volt { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 800; }
.volt-text { color: var(--color-accent); }
.reward__what { color: var(--color-on-ink-muted); overflow-wrap: break-word; min-width: 0; }
.reward__prize { max-width: 16ch; margin-top: var(--space-xs); padding-bottom: 0.1em; font-size: clamp(2.75rem, 2rem + 4vw, 4.75rem); line-height: 1.34; letter-spacing: -0.02em; color: var(--color-on-ink); animation: prize-reveal 760ms var(--ease-out) 80ms both; }
.reward__ink { padding-bottom: 0.04em; background: linear-gradient(var(--color-accent), var(--color-accent)) 0 100% / 0% 0.1em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: prize-line 560ms var(--ease-out) 640ms forwards; }
@keyframes prize-reveal { from { clip-path: inset(-0.3em 100% -0.4em 0); filter: blur(6px); } to { clip-path: inset(-0.3em -0.3em -0.4em 0); filter: blur(0); } }
@keyframes prize-line { to { background-size: 100% 0.1em; } }
.reward__line { margin-top: var(--space-md); color: var(--color-on-ink-muted); }
.reward__line .reward__what { color: var(--color-on-ink); font-weight: 500; }
.reward__next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-lg); color: var(--color-on-ink); }
.reward__next form { margin: 0; }
.reward a { color: var(--color-on-ink); }
.reward a:focus-visible, .reward .link:focus-visible, .reward .input:focus-visible, .reward summary:focus-visible { outline-color: var(--color-accent); }
.link--on-ink { color: var(--color-on-ink-muted); }
.reward__again { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.reward__h { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 800; color: var(--color-on-ink); }
.reward__hint { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-on-ink-muted); }
.gform--dark .field > label { color: var(--color-on-ink); }
.gform--dark .help { color: var(--color-on-ink-muted); }
.gform--dark .help--error { color: var(--color-accent); }
.gform--dark .input:hover { background: var(--color-paper-2); }
.reward__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-on-ink-muted); }
.reward__foot form { margin: 0 0 0 auto; }
.reward__go { margin-top: var(--space-md); }
.btn.reward__go { display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent-ink); text-decoration: none; }
.reward__more { display: block; margin-top: var(--space-md); }
.reward .more > summary { color: var(--color-on-ink); }
.reward__more .more__body { display: block; margin-top: var(--space-sm); }
.reward--project .reward__prize { font-size: clamp(3.25rem, 2.25rem + 6vw, 6rem); }
.reward--kept .reward__prize { animation: none; }
.reward--kept .reward__ink { animation: none; background-size: 100% 0.1em; }
.reward--kept { margin-top: var(--space-lg); margin-bottom: 0; }

/* ------------------------------------------------------------------ projects */
.sheet--projects .sheet__head, .prow { display: grid; grid-template-columns: minmax(0, 1.3fr) 9rem minmax(0, 1fr) 6.5rem; column-gap: var(--space-lg); align-items: center; }
.prow { padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.prow__title { font-weight: 800; text-decoration: none; overflow-wrap: break-word; min-width: 0; }
.prow__title:hover { text-decoration: underline; }
.prow__progress { display: grid; gap: var(--space-2xs); }
.prow__next { margin: 0; color: var(--color-ink-2); overflow-wrap: break-word; min-width: 0; }
.plain .prow { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 9rem; }
.fold > summary { display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-sm); border-top: var(--rule-bar) solid var(--color-rule-2); cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "펼치기"; margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); }
.fold[open] > summary::after { content: "접기"; }
.fold > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fold > summary:hover::after { color: var(--color-ink); }

.stages { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.stage { display: grid; grid-template-columns: 3rem 44px minmax(0, 1fr) minmax(0, 14rem) 6.5rem 44px; column-gap: var(--space-md); align-items: center; padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.stage:first-child { border-top: 0; }
.stage:target { animation: just-set 1.8s var(--ease-out); }
.fold--step { margin-top: var(--space-md); }
.fold--step > summary { border-top: 0; min-height: 44px; }
.fold--step > summary h2 { font-size: var(--text-md); }
.ptitle { display: grid; gap: var(--space-2xs); }
.pnotify { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-sm); margin-left: -12px; }
.pnotify .quiet-link { padding-block: var(--space-sm); }
.bell-form { margin: 0; scroll-margin-top: 30vh; }
.bell { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.bell .bell__body { fill: none; }
.bell.is-on { color: var(--color-ink); }
.bell.is-on .bell__body { fill: currentColor; }
.bell:hover:not(:disabled) { color: var(--color-ink); }
.bell:disabled { opacity: 0.55; cursor: not-allowed; }
.bell:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.bell--label { padding-inline: var(--space-sm); font-weight: 500; }
.facts__notify { display: flex; align-items: center; gap: var(--space-2xs); margin-left: -12px !important; }
.nset__more { display: grid; gap: var(--space-xs); margin-top: var(--space-xs); }
.nset:has(#notify-on:not(:checked)) .nset__more { display: none; }
.nset__time { max-width: 11rem; }
.seg.seg--tight label { min-width: 44px; justify-content: center; padding-inline: var(--space-sm); }
.seg.seg--week { display: grid; grid-template-columns: repeat(7, minmax(0, 3.25rem)); }
.seg.seg--week label { justify-content: center; padding-inline: 0; }
.ptabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-md); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.ptabs a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; align-content: center; gap: 0 var(--space-2xs); min-height: 48px; padding: var(--space-2xs); margin-bottom: calc(-1 * var(--rule-bar)); border-bottom: 4px solid transparent; font-weight: 500; color: var(--color-muted); text-decoration: none; }
.ptabs a:hover { color: var(--color-ink); border-bottom-color: var(--color-rule); }
.ptabs a[aria-current="page"] { border-bottom-color: var(--color-ink); font-weight: 800; color: var(--color-ink); }
.ptabs__n { font: 500 var(--text-xs)/1.3 var(--font-outlier); font-variant-numeric: tabular-nums; }
.ptabs + .block, .ptabs + .head { margin-top: var(--space-lg); }
.stage__n { display: grid; place-items: center; min-height: 44px; border-radius: var(--radius-card); font: var(--display-weight) var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.stage.is-live .stage__n { background: var(--color-accent); color: var(--color-accent-ink); }
.stage.is-done .stage__n { color: var(--color-muted); }
.stage__now { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.stage .row__due { font-size: var(--text-sm); }

/* ------------------------------------------------------------------ log */
.figs--4 { grid-auto-columns: minmax(5.5rem, auto); }
.day { margin-top: var(--space-lg); }
.day:first-child { margin-top: 0; }
.day__label { max-width: none; padding-block: var(--space-xs); border-top: var(--rule-bar) solid var(--color-rule-2); font-family: var(--font-body); }
.lrow { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 18rem); column-gap: var(--space-md); align-items: baseline; padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.lrow .time { color: var(--color-muted); font-size: var(--text-sm); }

/* ------------------------------------------------------------------ edit, login */
.eform { display: grid; gap: var(--space-xs); max-width: 44rem; }
.eform .field, .lform .field { grid-template-rows: auto auto auto; grid-row: auto; }
.eform__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.eform__actions { display: flex; align-items: center; gap: var(--space-lg); margin-top: var(--space-xs); }
.eform__side { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.eform__side form { margin: 0; }

.login { display: grid; justify-items: start; gap: var(--space-md); max-width: 22rem; margin: var(--space-3xl) auto 0; }
.mark--big { font-size: var(--text-4xl); color: var(--color-ink); }
.lform { display: grid; gap: var(--space-xs); width: 100%; }
.lead-line { color: var(--color-ink-2); }

/* ------------------------------------------------------------------ narrow */
@media (max-width: 60rem) {
  .gform, .gform:not(:has(.field--project)) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: var(--space-2xs); }
  .gform .field { grid-template-rows: auto auto auto; grid-row: auto; }
  .field--title, .field--reward { grid-column: 1 / -1; }
  .field--submit { grid-row: auto; grid-column: 1 / -1; }
  .field--submit .btn { width: 100%; }
  .sheet--projects .sheet__head, .prow { grid-template-columns: minmax(0, 1fr) 7rem 5.5rem; }
  .sheet--projects .sheet__head > :nth-child(3) { display: none; }
  .prow__next { grid-column: 1 / -1; grid-row: 2; font-size: var(--text-sm); }
}
@media (max-width: 40rem) {
  .bar__in { gap: var(--space-sm); }
  .tabs a { padding: 0 var(--space-xs); }
  .head { flex-direction: column; align-items: stretch; }
  .figs { grid-auto-columns: minmax(0, 1fr); }
  .figs > div { padding-inline: var(--space-sm); }
  .fig { font-size: var(--text-3xl); }
  .head--project .head__prize { flex: none; }
  .head--project .meter--wide { flex: 0 0 6px; }
  .sheet__head { display: none; }
  .row { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: var(--space-3xs); }
  .row .check-form { grid-row: 1 / span 2; align-self: start; }
  .row__reward { grid-column: 2 / -1; grid-row: 2; font-size: var(--text-sm); }
  .row__reward:empty { display: none; }
  .row__due { grid-column: 3; grid-row: 1; align-self: start; padding-top: var(--space-xs); font-size: var(--text-sm); }
  .stage { grid-template-columns: 2.25rem 44px minmax(0, 1fr) auto; row-gap: var(--space-3xs); }
  .stage .row__reward { grid-column: 3; grid-row: 2; }
  .stage .bell-form { grid-column: 4; grid-row: 2; justify-self: end; }
  .stage .row__due { grid-column: 4; grid-row: 1; }
  .stage__n { font-size: var(--text-xl); }
  .gform, .gform:not(:has(.field--project)) { grid-template-columns: minmax(0, 1fr); }
  .gform .field { grid-column: 1 / -1; }
  .lrow { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .lrow .row__reward { grid-column: 2; font-size: var(--text-sm); }
  .eform__pair { grid-template-columns: minmax(0, 1fr); }
  .reward { padding-inline: var(--space-md); }
  .well { padding-inline: var(--space-md); }
  .input { font-size: var(--text-md); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .check, .tabs a, .input { transition: none; }
  .btn:active, .check:active, .link:active { transform: none; }
}

/* ------------------------------------------------------------------ goal design screen */
.block__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-md); margin-bottom: var(--space-md); }
.block__head > h2 { margin: 0; }
.block__head > .link { margin-left: auto; }
.block__meta { color: var(--color-muted); font-size: var(--text-sm); }
.pre { white-space: pre-line; }

.ghead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg) var(--space-xl); align-items: start; padding-bottom: var(--space-lg); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.ghead__main { display: grid; gap: var(--space-md); min-width: 0; }
.ghead h1 { max-width: 28ch; }
.ghead__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); justify-content: flex-end; }
.ghead__act form { margin: 0; }
.ghead__done { display: flex; align-items: center; gap: var(--space-xs); margin: 0; color: var(--color-ink-2); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: 0; }
.facts > div { display: grid; gap: var(--space-3xs); }
.facts dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.facts dd { margin: 0; }
.gmetric { grid-column: 1 / -1; display: grid; gap: var(--space-sm); }
.tag { display: inline-flex; align-items: center; padding: 0 var(--space-xs); border: 1px solid var(--color-ink); border-radius: var(--radius-card); font-size: var(--text-sm); font-weight: 500; line-height: 1.6; }
.tag--d1 { border-color: var(--color-rule); background: var(--color-paper-2); }
.tag--d3 { background: var(--color-ink); color: var(--color-on-ink); }

.dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: var(--rule-bar) solid var(--color-rule-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.dcell { display: grid; align-content: start; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg) var(--space-lg) 0; }
.dcell:nth-child(even) { padding-left: var(--space-lg); padding-right: 0; border-left: var(--rule-hair) solid var(--color-rule); }
.dcell:nth-child(n + 3) { border-top: var(--rule-hair) solid var(--color-rule); }
.dcell dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.dcell dd { margin: 0; font-size: var(--text-lg); font-weight: 500; line-height: 1.45; }
.dcell dd .quiet-link { font-weight: 400; }
.dcell__num { margin-top: var(--space-2xs); font-size: var(--text-md); color: var(--color-ink-2); }

.ifthen { list-style: none; margin: 0 0 var(--space-md); padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.ifthen__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-md) var(--space-lg); align-items: baseline; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ifthen__row form { margin: 0; }
.ifthen__if, .ifthen__then { display: flex; gap: var(--space-sm); align-items: baseline; margin: 0; min-width: 0; overflow-wrap: break-word; }
.ifthen__k { flex-shrink: 0; padding: 0 var(--space-xs); border-radius: var(--radius-card); background: var(--color-paper-3); font-size: var(--text-sm); font-weight: 800; line-height: 1.6; }
.ifthen__then .ifthen__k { background: var(--color-accent); color: var(--color-accent-ink); }
.ifthen__then { font-weight: 500; }

.empty--slim { padding: var(--space-md) 0; border-top: 0; margin-bottom: var(--space-md); }
.empty--slim .empty__what { font-size: var(--text-md); }

.pform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: var(--space-md); align-items: start; }
.pform--progress { grid-template-columns: 9rem minmax(0, 1fr) auto; }

.timeline { list-style: none; margin: var(--space-md) 0 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.timeline__row { display: grid; grid-template-columns: 11rem 6rem minmax(0, 1fr) auto; gap: var(--space-md); align-items: baseline; padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.timeline__row form { margin: 0; }
.timeline__row > .time { font-family: var(--font-body); font-weight: 400; color: var(--color-muted); font-size: var(--text-sm); }
.timeline__v { margin: 0; font-weight: 500; }
.timeline__note { margin: 0; overflow-wrap: break-word; min-width: 0; }

.rform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.rform .field { grid-template-rows: auto auto auto; grid-row: auto; }
.rform > div:last-child { grid-column: 1 / -1; }

.mblock, .rlist { display: grid; gap: var(--space-sm); min-width: 0; }
.rlist { margin-top: var(--space-xl); }
.rlist__head { display: flex; align-items: baseline; gap: var(--space-sm); }
.mlist { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); counter-reset: m; }
.mitem { counter-increment: m; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--space-sm); align-items: baseline; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.mitem::before { content: counter(m); font: var(--display-weight) var(--text-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.mitem form { margin: 0; }
.mitem__body { display: grid; gap: var(--space-3xs); min-width: 0; }
.mitem__t { margin: 0; font-weight: 800; overflow-wrap: break-word; }
.mitem__how { margin: 0; max-width: 65ch; white-space: pre-line; overflow-wrap: break-word; color: var(--color-ink-2); }
.mform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: var(--space-md); align-items: start; }
.mform .field { grid-template-rows: auto auto auto; grid-row: auto; }
.mform__how { grid-column: 1 / 3; }
.mform .field--submit { grid-column: 3; grid-row: 1; }
.rcards { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--rule-bar) solid var(--color-rule-2); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.rcards > li + li { border-top: var(--rule-hair) solid var(--color-rule); }
.rcard > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); row-gap: var(--space-3xs); min-height: 48px; align-content: center; padding-block: var(--space-sm); cursor: pointer; list-style: none; }
.rcard > summary > * { grid-column: 1; }
.rcard > summary::after { content: "펼치기"; grid-column: 2; grid-row: 1; font-size: var(--text-sm); color: var(--color-muted); }
.rcard[open] > summary::after { content: "접기"; }
.rcard > summary:hover::after { color: var(--color-ink); }
.rcard__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); }
.rcard > summary::-webkit-details-marker { display: none; }
.rcard > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rcard__day { font-weight: 800; }
.tag--error { border-color: var(--color-error); color: var(--color-error); }
.rcard__q { font-size: var(--text-sm); color: var(--color-ink-2); }
.rcard__sum { max-width: 65ch; color: var(--color-ink-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rcard[open] .rcard__sum { display: none; }
.rcard__body { display: grid; gap: var(--space-md); padding-bottom: var(--space-md); }
.qform { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: var(--space-md); align-items: start; }
.rstate { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper); }
.rstate__body { display: grid; gap: var(--space-2xs); justify-items: start; }
.rstate__what { font-weight: 800; }
.rstate--error { background: var(--color-error-wash); }
.rstate--error .rstate__what { color: var(--color-error); }
.spinner { flex-shrink: 0; width: 20px; height: 20px; margin-top: var(--space-3xs); border: var(--rule-bar) solid var(--color-rule); border-top-color: var(--color-ink); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

.rresult { display: grid; gap: var(--space-md); }
.rresult__summary { font-size: var(--text-lg); font-weight: 500; line-height: 1.5; max-width: 60ch; }
.rresult__h { margin-top: var(--space-xs); font-family: var(--font-body); font-size: var(--text-md); }
.approaches { list-style: none; margin: 0; padding: 0; counter-reset: ap; display: grid; gap: var(--space-sm); }
.approaches > li { counter-increment: ap; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--space-sm); }
.approaches > li::before { content: counter(ap); grid-row: span 2; font: var(--display-weight) var(--text-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.approaches__t { font-weight: 800; }
.approaches p { margin: 0; max-width: 65ch; }
.rpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-md) var(--space-lg); }
.picks { margin: 0; padding: var(--space-sm) 0 0; border: 0; border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-2xs); align-content: start; min-width: 0; }
.picks legend { padding: 0; font-size: var(--text-sm); font-weight: 800; }
.pick { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-xs); align-items: start; padding-block: var(--space-2xs); cursor: pointer; }
.pick input { width: 18px; height: 18px; margin: var(--space-3xs) 0 0; accent-color: var(--color-ink); cursor: pointer; }
.pick input:disabled { opacity: 0.55; cursor: not-allowed; }
.pick input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pick__t { overflow-wrap: break-word; min-width: 0; }
.pick__meta { grid-column: 2; font-size: var(--text-sm); color: var(--color-muted); }
.rresult__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.rresult__meta { font-size: var(--text-sm); color: var(--color-muted); }

.vblock { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); }
.vlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--space-md) var(--space-lg); }
.vitem { display: grid; gap: var(--space-2xs); align-content: start; min-width: 0; }
.vitem__meta { display: flex; gap: var(--space-sm); align-items: baseline; justify-content: space-between; min-width: 0; }
.vitem__meta a { overflow-wrap: anywhere; min-width: 0; }
.vitem__meta form { margin: 0; flex-shrink: 0; }
.vitem__meta { flex-wrap: wrap; }
.vitem__ts { font-size: var(--text-sm); color: var(--color-muted); margin-right: auto; }
.vplayer { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: var(--color-ink); }
.vplayer iframe, .vplayer video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vform { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: var(--space-md); align-items: start; }
.picks--videos .vlist { margin-top: var(--space-2xs); }

.row__first { font-size: var(--text-sm); color: var(--color-ink-2); }

.eform { gap: var(--space-xl); }
.eset { display: grid; gap: var(--space-xs); margin: 0; padding: var(--space-md) 0 0; border: 0; border-top: var(--rule-bar) solid var(--color-rule-2); min-width: 0; }
.eset > legend { float: left; width: 100%; padding: 0 0 var(--space-xs); font-weight: 800; font-size: var(--text-lg); }
.eset > legend + * { clear: both; }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: 0; border: 0; }
.seg legend { width: 100%; margin-bottom: var(--space-2xs); padding: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.seg label:hover { background: var(--color-paper-2); }
.seg input:checked + label { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-ink); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg input:disabled + label { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 60rem) {
  .ghead { grid-template-columns: minmax(0, 1fr); }
  .ghead__act { justify-content: flex-start; }
  .timeline__row { grid-template-columns: 8.5rem 4.5rem minmax(0, 1fr) auto; }
}
@media (max-width: 40rem) {
  .dgrid { grid-template-columns: minmax(0, 1fr); }
  .dcell, .dcell:nth-child(even) { padding: var(--space-md) 0; border-left: 0; }
  .dcell:nth-child(n + 2) { border-top: var(--rule-hair) solid var(--color-rule); }
  .ifthen__row { grid-template-columns: minmax(0, 1fr) auto; }
  .ifthen__then { grid-column: 1; }
  .ifthen__row form { grid-column: 2; grid-row: 1; }
  .pform, .pform--progress, .qform, .rform, .vform, .mform { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .mform__how, .mform .field--submit { grid-column: 1; grid-row: auto; }
  .pform .field, .qform .field, .vform .field { grid-template-rows: auto auto auto; grid-row: auto; }
  .pform .field--submit, .qform .field--submit, .vform .field--submit { grid-column: 1; grid-row: auto; }
  .timeline__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-3xs); }
  .timeline__row > .time { grid-column: 1; }
  .timeline__v { grid-column: 1; grid-row: 2; }
  .timeline__note { grid-column: 1 / -1; }
  .timeline__row form { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--color-rule); }
  .seg label { transition: none; }
}

/* ------------------------------------------------------------------ today: 지금 하나 */
.thead { display: flex; flex-wrap: nowrap; align-items: end; justify-content: space-between; gap: var(--space-sm) var(--space-lg); padding-bottom: var(--space-lg); }
.thead__title { display: grid; gap: var(--space-2xs); min-width: 0; }
.thead__meta { color: var(--color-muted); }
.thead__meta > span { white-space: nowrap; }
.streak { display: flex; flex-shrink: 0; align-items: baseline; gap: var(--space-2xs); margin: 0; font-weight: 500; }
.streak__n { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font: var(--display-weight) var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.streak--zero { font-size: var(--text-sm); color: var(--color-muted); }

.today { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.today__main, .today__side { display: grid; gap: var(--space-xl); min-width: 0; }
.today .block { margin-top: 0; }
.today .set { margin-top: 0; }
.count { margin-left: var(--space-2xs); font: 500 var(--text-sm)/1 var(--font-outlier); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--color-muted); }

.nowcard { display: grid; gap: var(--space-md); padding: var(--space-lg) var(--space-lg) var(--space-md); border-top: 4px solid var(--color-ink); border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--color-paper-2); }
.nowcard__head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-md); }
.nowcard__title { max-width: 22ch; font-size: clamp(1.728rem, 1.2rem + 2.4vw, 2.488rem); line-height: 1.12; }
.nowcard__title a { text-decoration: none; }
.nowcard__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.nowcard__due { flex-shrink: 0; margin: var(--space-2xs) 0 0; padding: var(--space-3xs) var(--space-xs); border: 1px solid currentColor; border-radius: var(--radius-card); font: 500 var(--text-sm)/1.3 var(--font-outlier); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-ink-2); }
.nowcard__due.due--over { color: var(--color-error); }
.nowcard__due.due--today { color: var(--color-ink); }
.nowcard__reward { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); margin: 0; font-size: var(--text-lg); font-weight: 500; overflow-wrap: break-word; }
.nowcard__reward .volt { font-size: var(--text-sm); }
.nowcard__reward--none { font-size: var(--text-md); }
.nowcard__reward--none span { font-size: var(--text-sm); color: var(--color-muted); }
.nowcard__first { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; color: var(--color-ink-2); }
.nowcard__k { font-size: var(--text-sm); font-weight: 800; color: var(--color-ink); }
.nowcard__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); padding-top: var(--space-xs); }
.nowcard__act form { margin: 0; }
.btn--big { min-height: 56px; min-width: 12rem; padding-inline: var(--space-xl); font-size: var(--text-lg); }
.btn--big .ico { width: 20px; height: 20px; }

.gauge { display: grid; gap: var(--space-xs); padding-block: var(--space-xs); }
.gauge__n { display: flex; align-items: baseline; gap: var(--space-xs); margin: 0; }
.gauge__cur { font: var(--display-weight) var(--text-4xl)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.gauge__of { font: var(--display-weight) var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.gauge__unit { margin-left: calc(-1 * var(--space-2xs)); font-weight: 500; color: var(--color-ink-2); }
.meter--gauge { height: 12px; background: var(--color-paper-3); }
.meter > span { transition: transform var(--dur-long) var(--ease-out); }
.gauge.is-reached .meter > span, .row__metric.is-reached .meter > span { background: var(--color-accent-deep); }
.gauge__steps { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-2xs); }
.gauge__hint { font-weight: 500; color: var(--color-ink); }
.step-form { margin: 0; }
.btn--step { min-height: 44px; min-width: 4.5rem; padding-inline: var(--space-md); border-color: var(--color-ink); background: var(--color-paper); color: var(--color-ink); font: var(--display-weight) var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.btn--step:hover { background: var(--color-accent); border-color: var(--color-accent); }
.btn--step-s { min-height: 28px; min-width: 0; padding-inline: var(--space-xs); border-width: 1px; font-size: var(--text-md); }
.btn--step-s::before { inset: -8px -4px; }
.row__metric { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); margin-top: var(--space-2xs); font-size: var(--text-sm); }
.meter--row { width: 6rem; }
.row__unit { margin-left: calc(-1 * var(--space-2xs)); color: var(--color-muted); }
.rtag { display: none; }

.fold--list > summary h2 { font-size: var(--text-lg); }
.fold--list > summary .count { margin-left: 0; }
.fold--list .rows { border-bottom: var(--rule-hair) solid var(--color-rule); }
.folds { display: grid; }
.block--rest:has(+ .folds) .sheet { border-bottom: 0; }
.block--rest:has(+ .folds) { margin-bottom: calc(-1 * var(--space-xl)); }
.folds > .fold:last-child:not([open]) > summary { border-bottom: var(--rule-hair) solid var(--color-rule); }

.earned > h2 { margin-bottom: var(--space-sm); }
.earned__list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.earned__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-sm); align-items: start; padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.earned__body { display: grid; gap: var(--space-3xs); padding-top: var(--space-xs); min-width: 0; }
.earned__prize { font-size: var(--text-lg); font-weight: 800; line-height: 1.3; overflow-wrap: break-word; }
.earned__prize--none { font-size: var(--text-md); font-weight: 500; color: var(--color-ink-2); }
.earned__for { font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: break-word; }
.earned__for a { color: inherit; }
.earned__empty { padding-block: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); color: var(--color-muted); }

/* 접는 폼: 목표와 보상만 보이고 날짜·프로젝트(·목표치)는 '더 정하기' 안에 */
.gform.gform--fold, .gform.gform--fold:not(:has(.field--project)) { grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) auto; }
.more { grid-column: 1 / -1; grid-row: 4; margin-bottom: var(--space-sm); }
.more > summary { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); cursor: pointer; list-style: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.more > summary::-webkit-details-marker { display: none; }
.more__ico { width: 14px; height: 14px; flex-shrink: 0; }
.more[open] .more__v { display: none; }
.more > summary:hover { color: var(--color-ink); text-decoration-thickness: 2px; text-decoration-color: var(--color-accent-deep); }
.more__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: 0 var(--space-md); margin-top: var(--space-xs); }
.more .field { grid-template-rows: auto auto auto; grid-row: auto; }
.gform--dark .more > summary { color: var(--color-on-ink-muted); }
.gform--dark .more > summary:hover { color: var(--color-on-ink); }
.gform.gform--stack, .gform.gform--stack:not(:has(.field--project)) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-2xs); }
.gform--stack .field { grid-template-rows: auto auto auto; grid-row: auto; grid-column: 1 / -1; }
.gform--stack .more { grid-row: auto; }
.gform--stack .field--submit { grid-row: auto; grid-column: 1 / -1; }
.gform--stack .field--submit .btn { width: 100%; }

/* 방금 세우거나 진행을 더한 목표를 잠깐 밝힌다 */
.row:target, .nowcard:target, .earned__item:target { animation: just-set 1.8s var(--ease-out); }
@keyframes just-set { from { background-color: color-mix(in oklab, var(--color-accent) 70%, transparent); } }

@media (min-width: 60rem) {
  .today { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: var(--space-xl) var(--space-2xl); }
}
@media (max-width: 60rem) {
  .gform.gform--fold, .gform.gform--fold:not(:has(.field--project)) { grid-template-columns: minmax(0, 1fr); }
  .gform--fold .more { grid-row: auto; }
}
@media (max-width: 40rem) {
  .nowcard { padding-inline: var(--space-md); }
  .nowcard__act form, .nowcard__act .btn--big { width: 100%; }
  .nowcard__act { justify-content: center; }
  .rtag { display: inline-block; margin-right: var(--space-2xs); padding: 0 var(--space-2xs); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 800; line-height: 1.5; vertical-align: 1px; }
  .row__reward { color: var(--color-ink); }
  .reward { padding: var(--space-md) var(--space-md) var(--space-sm); }
  .reward__foot form { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reward__prize { animation: none; }
  .reward__ink { animation: none; background-size: 100% 0.1em; }
  .row:target, .nowcard:target, .earned__item:target, .stage:target { animation: none; }
  .meter > span { transition: none; }
}
.earned__prize--none a { color: inherit; text-decoration: none; }
.earned__prize--none a:hover { text-decoration: underline; }