:root {
  color-scheme: light;
  --bg: #f3f0e8;
  --bg-deep: #ebe6db;
  --panel: rgba(255, 254, 250, .78);
  --panel-solid: #fffefa;
  --text: #132019;
  --text-soft: #34463c;
  --muted: #636e66;
  --line: rgba(19, 32, 25, .13);
  --line-strong: rgba(19, 32, 25, .22);
  --accent: #1e6043;
  --accent-soft: #dce9df;
  --button-text: #fffef9;
  --danger: #9a403d;
  --shadow: 0 28px 80px rgba(35, 47, 39, .11);
  --focus: rgba(30, 96, 67, .18);
  --sheen: rgba(255, 255, 255, .72);
  --ambient: rgba(30, 96, 67, .10);
  --serif: "Noto Serif KR", "AppleMyungjo", "Batang", serif;
  --share-bg: #fdfbf5;
  --share-bg-deep: #eee9dc;
  --share-text: #172019;
  --share-soft: #667068;
  --share-line: rgba(23, 32, 25, .13);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c121c;
  --bg-deep: #101824;
  --panel: rgba(20, 29, 43, .88);
  --panel-solid: #182334;
  --text: #f2eee8;
  --text-soft: #d5dbe5;
  --muted: #a8b1c0;
  --line: #303a4a;
  --line-strong: #3b4759;
  --accent: #dc936d;
  --accent-soft: #30211f;
  --button-text: #1b120e;
  --danger: #efa9a3;
  --shadow: 0 34px 90px rgba(0, 0, 0, .34);
  --focus: rgba(220, 147, 109, .2);
  --sheen: rgba(255, 255, 255, .055);
  --ambient: rgba(220, 147, 109, .09);
  --share-bg: #111a26;
  --share-bg-deep: #0d141e;
  --share-text: #f4efe8;
  --share-soft: #aeb7c5;
  --share-line: rgba(242, 238, 232, .13);
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
html { width: 100%; min-width: 320px; height: 100%; min-height: 100%; overflow: hidden; background: var(--bg); scroll-behavior: smooth; }
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 16%, var(--ambient) 0, transparent 28rem),
    radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--accent) 6%, transparent) 0, transparent 32rem),
    linear-gradient(155deg, var(--bg) 0%, var(--bg-deep) 58%, var(--bg) 100%);
  color: var(--text);
  transition: background-color .25s ease, color .25s ease;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
  opacity: .16;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
  pointer-events: none;
}
body::after {
  position: fixed;
  right: -18rem;
  bottom: -22rem;
  z-index: -1;
  width: 42rem;
  height: 42rem;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5rem color-mix(in srgb, var(--accent) 2%, transparent), 0 0 12rem color-mix(in srgb, var(--accent) 5%, transparent);
  content: "";
  pointer-events: none;
}
button, input, textarea { font: inherit; }
p, strong, span, blockquote, footer { overflow-wrap: anywhere; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.site-header {
  position: relative;
  display: flex;
  width: min(calc(100% - 3rem), 1180px);
  min-height: 72px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.site-header::after { position: absolute; right: 0; bottom: -1px; width: clamp(3rem, 12vw, 8rem); height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); content: ""; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); font-size: .98rem; font-weight: 800; letter-spacing: -.035em; text-decoration: none; }
.brand-mark { width: .7rem; height: .7rem; border: 2px solid var(--accent); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent); background: var(--accent); }
.header-actions { display: flex; align-items: center; gap: .25rem; }
.text-button, .theme-button { min-height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .84rem; font-weight: 700; }
.text-button { padding: .6rem .8rem; }
.theme-button { display: inline-grid; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-strong); align-items: center; justify-content: center; background: var(--panel); box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent); }
.theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.text-button:hover { background: var(--panel); color: var(--text); }
.theme-button:hover { border-color: var(--accent); background: var(--panel-solid); color: var(--accent); }
.theme-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: block; }
:root[data-theme="dark"] .theme-button { border-color: #303a4a; background: #151e2c; color: #f2eee8; }
:root[data-theme="dark"] .theme-button:hover { border-color: #dc936d; background: #182334; color: #dc936d; }

main { position: relative; z-index: 1; display: grid; width: min(calc(100% - 3rem), 980px); height: 100%; min-height: 0; margin: 0 auto; overflow: hidden; place-items: center; }
.screen { width: 100%; height: 100%; max-height: 100%; padding: clamp(1.5rem, 4.5vh, 3.75rem) 0; overflow: hidden; transform: scale(var(--screen-scale, 1)); transform-origin: center; animation: reveal .42s cubic-bezier(.2,.7,.2,1) both; }
.screen[hidden] { display: none; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px) scale(var(--screen-scale, 1)); } to { opacity: 1; transform: scale(var(--screen-scale, 1)); } }

.hero { display: grid; height: 100%; min-height: 0; text-align: center; place-items: center; }
.hero-inner { position: relative; width: min(100%, 900px); min-width: 0; max-width: 100%; padding: clamp(1rem, 3vw, 2rem); }
.hero-inner::before, .hero-inner::after { position: absolute; top: 50%; width: clamp(2rem, 8vw, 7rem); height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 38%, transparent)); content: ""; }
.hero-inner::before { left: 0; }
.hero-inner::after { right: 0; transform: scaleX(-1); }
.eyebrow, .step { margin: 0 0 clamp(1rem, 2.2vh, 1.4rem); color: var(--accent); font-size: .66rem; font-weight: 850; letter-spacing: .2em; text-transform: uppercase; }
.step { display: flex; align-items: center; gap: .65rem; }
.step::after { width: clamp(2rem, 7vw, 4.5rem); height: 1px; background: linear-gradient(90deg, var(--accent), transparent); content: ""; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: .65rem; }
.eyebrow span { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
h1, h2 { margin: 0; font-weight: 760; letter-spacing: -.052em; line-height: 1.08; word-break: keep-all; text-wrap: balance; }
h1 { font-size: clamp(28px, 3vw, 42px); }
h1 em { color: var(--accent); font-style: normal; text-shadow: 0 14px 42px color-mix(in srgb, var(--accent) 22%, transparent); }
h2 { font-size: clamp(20px, 2.25vw, 28px); }
#startScreen h1 { line-height: 1.34; }
#nameScreen h2 { line-height: 1.42; }
#startScreen .hero-copy { line-height: 1.95; }
.hero-copy, .privacy-copy { margin: clamp(1.2rem, 2.8vh, 1.8rem) auto clamp(1.4rem, 3.2vh, 2.1rem); color: var(--muted); font-size: clamp(.9rem, 1.35vw, 1.02rem); line-height: 1.8; }

.primary-button, .secondary-button, .danger-button {
  min-height: 52px;
  padding: .86rem 1.35rem;
  border-radius: 999px;
  font-weight: 780;
  letter-spacing: -.015em;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.primary-button { border: 1px solid color-mix(in srgb, var(--accent) 82%, white); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent)); box-shadow: inset 0 1px 0 color-mix(in srgb, white 30%, transparent), 0 10px 30px color-mix(in srgb, var(--accent) 20%, transparent); color: var(--button-text); }
.primary-button span { display: inline-block; margin-left: .35rem; transition: transform .2s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 color-mix(in srgb, white 36%, transparent), 0 16px 38px color-mix(in srgb, var(--accent) 27%, transparent); }
.primary-button:active, .secondary-button:active, .danger-button:active { transform: translateY(0) scale(.985); }
.primary-button:hover span { transform: translateX(3px); }
.secondary-button { border: 1px solid var(--line-strong); background: linear-gradient(145deg, var(--sheen), var(--panel)); box-shadow: inset 0 1px 0 var(--sheen); color: var(--text); }
.danger-button { border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); background: transparent; color: var(--danger); }
.secondary-button:hover, .danger-button:hover { transform: translateY(-2px); border-color: var(--accent); }
.primary-button:disabled { cursor: wait; opacity: .55; transform: none; }
.hero-button { min-width: min(100%, 225px); }

.trust-row { display: inline-flex; margin-top: clamp(1.2rem, 3vh, 1.8rem); padding: .2rem .45rem; border: 1px solid var(--line); border-radius: 999px; gap: .15rem; justify-content: center; flex-wrap: wrap; background: color-mix(in srgb, var(--panel) 72%, transparent); box-shadow: inset 0 1px 0 var(--sheen); }
.trust-row span { position: relative; padding: .4rem .65rem .4rem 1.25rem; color: var(--muted); font-size: .73rem; font-weight: 650; }
.trust-row span::before { position: absolute; left: .55rem; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); content: ""; transform: translateY(-50%); }

.form-screen, .result-screen, .auth-screen, .history-screen { max-width: 820px; align-content: center; }
.form-screen, .result-screen, .share-screen, .auth-screen, .history-screen { display: flex; min-height: 0; flex-direction: column; justify-content: center; }
.form-screen form { display: grid; margin-top: 2.2rem; gap: 1.15rem; }
#nameForm, #situationForm { padding: clamp(.8rem, 2vw, 1.15rem); border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--panel-solid) 72%, transparent); box-shadow: inset 0 1px 0 var(--sheen), 0 22px 65px color-mix(in srgb, black 7%, transparent); }
.form-actions { display: grid; grid-template-columns: minmax(88px, .35fr) minmax(0, 1fr); gap: .65rem; }
.field { display: grid; gap: .65rem; }
.field > span { color: var(--text); font-size: .9rem; font-weight: 730; }
.field em { color: var(--muted); font-size: .76rem; font-style: normal; font-weight: 550; }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 16px; outline: none;
  background: linear-gradient(145deg, var(--sheen), var(--panel)); color: var(--text); padding: 1rem 1.05rem; box-shadow: inset 0 1px 0 var(--sheen), 0 10px 28px color-mix(in srgb, var(--text) 3%, transparent);
}
.field input, .field textarea, .share-editor input, .share-editor textarea { caret-color: var(--accent); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.field textarea { min-height: 118px; max-height: 40vh; resize: vertical; line-height: 1.7; }
#situationScreen { max-width: 900px; }
#situationScreen form { margin-top: 1.15rem; gap: .72rem; }
#situationScreen h2 { line-height: 1.42; }
#situationScreen #situationInput { width: 100%; height: clamp(158px, 24vh, 230px); min-height: 158px; padding: .85rem .95rem; border: 1px solid var(--line-strong); border-radius: 16px; outline: none; resize: none; background: linear-gradient(145deg, var(--sheen), var(--panel)); box-shadow: inset 0 1px 0 var(--sheen), 0 10px 28px color-mix(in srgb, var(--text) 3%, transparent); color: var(--text); caret-color: var(--accent); font-size: .88rem; line-height: 1.72; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
#situationScreen #situationInput::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }
#situationScreen #situationInput:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
#situationScreen .consent-row { line-height: 1.4; }
.dialogue-panel { position: relative; display: grid; min-height: 0; padding: .78rem; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-radius: 18px; gap: .55rem; overflow: hidden; background: color-mix(in srgb, var(--panel-solid) 66%, transparent); }
.dialogue-panel::after { position: absolute; right: -3rem; top: -4rem; width: 10rem; height: 10rem; border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%); content: ""; pointer-events: none; }
.dialogue-head { position: relative; z-index: 1; display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; }
.dialogue-head > div:first-child { display: flex; min-width: 0; align-items: baseline; gap: .55rem; }
.dialogue-head strong { color: var(--text); font-size: .78rem; letter-spacing: -.02em; }
.dialogue-head span { color: var(--muted); font-size: .64rem; font-weight: 700; }
.dialogue-progress { display: flex; flex: 0 0 auto; gap: .25rem; }
.dialogue-progress span { width: clamp(16px, 2.2vw, 24px); height: 3px; border-radius: 999px; background: var(--line-strong); transition: background .2s ease, transform .2s ease; }
.dialogue-progress span.is-current { background: var(--accent); transform: scaleY(1.6); }
.dialogue-progress span.is-done { background: color-mix(in srgb, var(--accent) 58%, var(--line)); }
.dialogue-guide { position: relative; z-index: 1; display: flex; min-width: 0; padding: .7rem .78rem; border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line)); border-radius: 15px 15px 15px 5px; align-items: flex-start; gap: .65rem; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.dialogue-guide > div { min-width: 0; }
.dialogue-mark { flex: 0 0 auto; width: 9px; height: 9px; margin-top: .28rem; border: 2px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent); }
.dialogue-guide small { color: var(--accent); font-size: .62rem; font-weight: 850; letter-spacing: .06em; }
.dialogue-guide p { margin: .2rem 0 0; color: var(--text-soft); font-size: .84rem; font-weight: 650; line-height: 1.62; text-wrap: pretty; word-break: keep-all; }
.dialogue-answer { display: grid; min-height: 0; gap: .25rem; }
.dialogue-answer > small { color: var(--muted); font-size: .64rem; text-align: right; }
.dialogue-answer b { color: var(--accent); font-weight: 800; }
.dialogue-status { min-height: 1rem; margin: 0; color: var(--muted); font-size: .69rem; line-height: 1.45; }
.dialogue-controls { display: flex; justify-content: flex-end; gap: .4rem; }
.dialogue-prev, .dialogue-next { min-height: 34px; padding: .42rem .72rem; border-radius: 999px; font-size: .72rem; font-weight: 780; }
.dialogue-prev { border: 1px solid var(--line); background: transparent; color: var(--muted); }
.dialogue-next { border: 1px solid color-mix(in srgb, var(--accent) 56%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); color: var(--accent); }
.dialogue-prev:hover:not(:disabled), .dialogue-next:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.dialogue-prev:disabled { cursor: default; opacity: .35; }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
.field small { color: var(--muted); text-align: right; }
.consent-row { display: flex; padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--line)); border-radius: 13px; gap: .7rem; align-items: flex-start; background: color-mix(in srgb, var(--accent) 3%, transparent); color: var(--muted); font-size: .8rem; line-height: 1.5; }
.consent-row input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: .15rem; accent-color: var(--accent); }

.notice { width: fit-content; min-height: 1.35rem; margin: 1rem 0; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 74%, transparent); color: var(--muted); font-size: .72rem; }
.reflection-card, .share-card { border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-solid) 96%, white), var(--panel)); box-shadow: inset 0 1px 0 var(--sheen), var(--shadow); }
.reflection-card { position: relative; isolation: isolate; padding: clamp(.95rem, 2.2vh, 1.45rem); overflow: hidden; }
.reflection-card::after { position: absolute; right: -5rem; top: -6rem; z-index: -1; width: 15rem; height: 15rem; border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%); content: ""; }
.reflection-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--accent), transparent 88%); content: ""; }
.reflection-card-head { display: flex; margin-bottom: .75rem; align-items: center; justify-content: space-between; gap: 1rem; }
.reflection-card-head > span { color: var(--muted); font-size: .68rem; font-weight: 650; }
.card-label { margin: 0; color: var(--accent); font-size: .65rem; font-weight: 850; letter-spacing: .16em; }
.reflection-body { color: var(--text-soft); font-size: .92rem; line-height: 1.75; white-space: pre-wrap; }
#reflectionText.is-long { font-size: .9rem; line-height: 1.65; }
#reflectionText.is-very-long { font-size: .78rem; line-height: 1.5; }
.reflection-highlights { display: grid; margin-top: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.insight-line, .dignity-line { display: grid; min-width: 0; padding: .7rem .75rem; border-left: 2px solid var(--accent); gap: .22rem; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.dignity-line { border: 1px solid color-mix(in srgb, var(--accent) 17%, var(--line)); border-left: 2px solid var(--accent); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.insight-line span, .dignity-line span { color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .07em; }
.insight-line strong, .dignity-line strong { color: var(--text); font-family: var(--serif); font-size: .92rem; font-weight: 700; line-height: 1.5; letter-spacing: -.025em; }
.return-question { display: grid; margin-top: .75rem; padding: .7rem .8rem; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 13px; gap: .22rem; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.return-question span { color: var(--accent); font-size: .66rem; font-weight: 800; letter-spacing: .08em; }
.return-question strong { color: var(--text); font-size: .82rem; line-height: 1.45; }
.understanding-field { min-height: 0; margin-top: 1.1rem; }
.understanding-field textarea { height: clamp(72px, 12vh, 110px); min-height: 64px; }
#resultScreen { max-width: 860px; }
#resultScreen h2 { line-height: 1.32; }
#resultScreen .notice { margin-block: .75rem; line-height: 1.45; }
#resultScreen .reflection-card-head { margin-bottom: .6rem; line-height: 1.25; }
#resultScreen .reflection-body { line-height: 1.66; text-wrap: pretty; }
#resultScreen #reflectionText.is-long { line-height: 1.58; }
#resultScreen #reflectionText.is-very-long { line-height: 1.46; }
#resultScreen .insight-line strong, #resultScreen .dignity-line strong { line-height: 1.54; text-wrap: pretty; }
#resultScreen .return-question { margin-top: .6rem; }
#resultScreen .return-question strong { line-height: 1.52; text-wrap: pretty; }
#resultScreen .understanding-field { margin-top: .8rem; }
#resultScreen .understanding-field { padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel) 68%, transparent); }
#resultScreen .understanding-field textarea { line-height: 1.56; }
#resultScreen .understanding-field small { line-height: 1.4; }
#resultScreen .button-row { margin-top: .9rem; }
.button-row { display: flex; margin-top: 1.4rem; gap: .65rem; flex-wrap: wrap; }

.share-screen { text-align: center; }
.share-workspace { display: grid; width: 100%; margin-top: .7rem; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: center; gap: 1rem; }
.share-workspace .share-card { margin: 0; }
.share-editor { display: grid; width: 100%; margin: 0; padding: .85rem; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--panel-solid) 82%, transparent); box-shadow: inset 0 1px 0 var(--sheen), 0 18px 50px color-mix(in srgb, black 7%, transparent); gap: .55rem; text-align: left; }
.share-editor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.share-editor-head strong { color: var(--text); font-size: .78rem; }
.share-editor-head > span { color: var(--muted); font-size: .62rem; }
.share-editor label { display: grid; grid-template-columns: 105px minmax(0, 1fr); align-items: center; gap: .65rem; }
.share-editor label > span { color: var(--muted); font-size: .68rem; font-weight: 700; }
.share-editor label > span em { color: var(--accent); font-size: .58rem; font-style: normal; }
.share-editor input, .share-editor textarea { width: 100%; min-height: 36px; padding: .48rem .65rem; border: 1px solid var(--line-strong); border-radius: 10px; outline: none; background: var(--panel); color: var(--text); font-size: .74rem; line-height: 1.45; resize: none; }
.share-editor input:focus, .share-editor textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.share-edit-help { margin: -.1rem 0 0 105px; color: var(--muted); font-size: .61rem; line-height: 1.4; }
.proofread-row { display: flex; margin-left: 105px; align-items: center; gap: .6rem; }
.proofread-button { min-height: 30px; padding: .35rem .65rem; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); color: var(--accent); font-size: .64rem; font-weight: 800; }
.proofread-button:hover { border-color: var(--accent); }
.proofread-button:disabled { cursor: wait; opacity: .55; }
.proofread-row span { color: var(--muted); font-size: .59rem; }
.proofread-review { display: grid; margin-left: 105px; padding: .65rem; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); gap: .45rem; }
.proofread-review[hidden] { display: none; }
.proofread-review header, .proofread-review footer { display: flex; align-items: center; gap: .5rem; }
.proofread-review header { justify-content: space-between; }
.proofread-review header strong { color: var(--accent); font-size: .68rem; }
.proofread-review header span { color: var(--muted); font-size: .58rem; }
.proofread-review > div { display: grid; grid-template-columns: 72px 1fr; gap: .45rem; }
.proofread-review > div > span { color: var(--muted); font-size: .59rem; font-weight: 700; }
.proofread-review p { margin: 0; color: var(--text); font-size: .68rem; line-height: 1.5; }
.proofread-review footer { justify-content: flex-end; }
.proofread-apply, .proofread-dismiss { min-height: 28px; padding: .3rem .6rem; border-radius: 999px; font-size: .61rem; font-weight: 800; }
.proofread-apply { border: 1px solid var(--accent); background: var(--accent); color: var(--button-text); }
.proofread-dismiss { border: 1px solid var(--line-strong); background: transparent; color: var(--text); }
.share-card { position: relative; isolation: isolate; width: 100%; margin: 0; padding: clamp(1.1rem, 2.8vh, 2.1rem); overflow: hidden; border-color: var(--share-line); background: linear-gradient(145deg, var(--share-bg), var(--share-bg-deep)); color: var(--share-text); box-shadow: inset 0 1px 0 color-mix(in srgb, white 16%, transparent), 0 28px 78px color-mix(in srgb, black 18%, transparent); text-align: left; }
.share-card::before { position: absolute; right: -7rem; top: -8rem; z-index: -1; width: 18rem; height: 18rem; border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent 66%); content: ""; }
.share-card::after { position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 25%, transparent), transparent 92%); content: ""; }
.share-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.share-meta time { color: var(--share-soft); font-size: .62rem; font-weight: 650; letter-spacing: .03em; }
.share-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--accent); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-decoration: none; }
.share-brand > span { width: .45rem; height: .45rem; border: 1px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--share-bg), 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); background: currentColor; }
.share-brand:hover { text-decoration: underline; text-underline-offset: 3px; }
.share-card > .share-intro { margin: 1.25rem 0 .8rem; color: var(--share-soft); font-size: .8rem; line-height: 1.62; }
.share-title { display: block; color: var(--share-soft); font-size: .72rem; font-weight: 750; letter-spacing: .02em; }
.share-card blockquote { position: relative; margin: .8rem 0 1.2rem; padding-left: 1rem; border-left: 2px solid color-mix(in srgb, var(--accent) 68%, transparent); color: var(--share-text); font-family: var(--serif); font-size: clamp(1.15rem, 3.3vw, 1.75rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.52; text-wrap: pretty; }
.share-card blockquote.is-long { font-size: clamp(1rem, 2.6vw, 1.35rem); line-height: 1.42; }
.share-card blockquote.is-very-long { font-size: clamp(.78rem, 2vw, 1rem); line-height: 1.35; }
.share-card blockquote.is-ultra-long { font-size: clamp(.68rem, 1.7vw, .82rem); line-height: 1.3; }
.share-question { margin-bottom: 1rem; padding: .75rem .85rem; border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.share-question span { color: var(--accent); font-size: .62rem; font-weight: 850; letter-spacing: .1em; }
.share-question p { margin: .25rem 0 0; color: var(--share-text); font-size: .78rem; font-weight: 680; line-height: 1.48; }
.share-card footer { padding-top: 1rem; border-top: 1px solid var(--share-line); color: var(--share-soft); font-size: .72rem; line-height: 1.62; }
.share-screen .button-row { justify-content: center; }
.official-link { display: inline-flex; margin: .65rem auto 0; align-items: center; gap: .35rem; color: var(--muted); font-size: .68rem; font-weight: 700; text-decoration: none; }
.official-link:hover { color: var(--accent); }

.history-list { display: grid; min-height: 70px; margin: .75rem 0; gap: .55rem; overflow: hidden; flex: 1 1 auto; align-content: center; }
.history-item { padding: 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, var(--panel-solid), var(--panel)); box-shadow: inset 0 1px 0 var(--sheen), 0 10px 30px color-mix(in srgb, black 5%, transparent); }
.history-item time { color: var(--muted); font-size: .72rem; }
.history-item p { margin: .45rem 0 0; line-height: 1.65; }
.history-item p.is-long { font-size: .84rem; line-height: 1.5; }
.history-item p.is-very-long { font-size: .75rem; line-height: 1.4; }
.history-question { display: block; margin-top: .35rem; color: var(--accent); font-size: .7rem; line-height: 1.4; }
.empty { padding: 1.8rem; border: 1px dashed var(--line-strong); border-radius: 16px; color: var(--muted); text-align: center; }
.history-pager { display: flex; min-height: 32px; align-items: center; justify-content: center; gap: .8rem; color: var(--muted); font-size: .72rem; }
.history-pager[hidden] { display: none; }
.pager-button { min-width: 48px; min-height: 30px; padding: .25rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font-size: .7rem; font-weight: 750; }
.pager-button:disabled { cursor: default; opacity: .35; }

.auth-copy { max-width: 700px; margin: 1rem 0; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.auth-form { display: grid; gap: .75rem; }
.auth-screen { padding-inline: clamp(.75rem, 2vw, 1.2rem); }
.auth-divider { display: flex; margin: .8rem 0; align-items: center; gap: .75rem; color: var(--muted); font-size: .72rem; }
.auth-divider::before, .auth-divider::after { height: 1px; background: var(--line); content: ""; flex: 1; }
.auth-notice { min-height: 1.2rem; margin: .65rem 0 0; color: var(--accent); font-size: .82rem; }
.auth-privacy { margin: .45rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.auth-back { width: fit-content; min-height: 32px; margin-top: .35rem; padding: .25rem .5rem; }

.screen.fit-tight { padding-block: .65rem; }
.screen.fit-tight .step { margin-bottom: .45rem; }
.screen.fit-tight h2 { font-size: clamp(18px, 2vh, 24px); }
.screen.fit-tight .form-screen form, .screen.fit-tight form { margin-top: .7rem; gap: .5rem; }
.screen.fit-tight .notice, .screen.fit-tight .button-row { margin-block: .45rem 0; }
.screen.fit-compact .reflection-card, .screen.fit-compact .share-card { padding: .65rem; }
.screen.fit-compact .reflection-body { font-size: .75rem; line-height: 1.45; }
.screen.fit-compact .reflection-highlights { margin-top: .35rem; gap: .35rem; }
.screen.fit-compact .insight-line, .screen.fit-compact .dignity-line, .screen.fit-compact .return-question { padding: .4rem .5rem; }
.screen.fit-compact .understanding-field { margin-top: .35rem; }
.screen.fit-compact .understanding-field textarea { height: 52px; min-height: 52px; }
.screen.fit-compact .share-editor { margin-top: .3rem; padding: .45rem; gap: .3rem; }
.screen.fit-compact .share-card { margin-top: .35rem; }
.screen.fit-compact .share-workspace .share-editor, .screen.fit-compact .share-workspace .share-card { margin-top: 0; }
.screen.fit-minimum .site-footer p:last-child { display: none; }

.site-footer { width: min(calc(100% - 3rem), 1180px); margin: 0 auto; padding: 1rem 0 max(1.1rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; line-height: 1.5; }
.site-footer p { margin: .16rem 0; }

@media (max-width: 700px) {
  .site-header, main, .site-footer { width: min(calc(100% - 2rem), 100%); }
  .site-header { min-height: 60px; }
  .theme-button { width: 40px; height: 40px; justify-content: center; }
  .screen { padding: clamp(1rem, 3vh, 2rem) 0; }
  h1 { font-size: clamp(26px, 8vw, 34px); }
  h2 { font-size: clamp(19px, 6vw, 26px); }
  .eyebrow { max-width: 100%; font-size: .56rem; letter-spacing: .13em; }
  .hero-copy { font-size: .82rem; line-height: 1.65; }
  .hero-copy br, h2 br { display: none; }
  .hero-copy { max-width: 33rem; }
  .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .button-row > button { width: auto; min-height: 46px; padding: .7rem .75rem; font-size: .82rem; }
  .share-screen .button-row .primary-button { grid-column: 1 / -1; }
  .share-workspace { grid-template-columns: 1fr; gap: .55rem; }
  .share-editor label { grid-template-columns: 1fr; gap: .25rem; }
  .share-editor-head > span { display: none; }
  .share-edit-help { margin-left: 0; }
  .proofread-row { margin-left: 0; }
  .proofread-review { margin-left: 0; }
  .reflection-card, .share-card { border-radius: 22px; }
  .hero-inner::before, .hero-inner::after { display: none; }
  .reflection-highlights { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .brand { font-size: .9rem; }
  .text-button { padding-inline: .55rem; font-size: .78rem; }
  .eyebrow { font-size: .5rem; letter-spacing: .1em; }
  h1 { font-size: clamp(26px, 8vw, 32px); }
  .trust-row { gap: .05rem; }
  .trust-row span { padding-inline: 1rem .4rem; font-size: .68rem; }
  .trust-row span::before { left: .4rem; }
}

@media (max-height: 720px) and (max-width: 700px) {
  .screen.hero { padding-block: 1.4rem; }
  .eyebrow { margin-bottom: .7rem; }
  .hero-copy { margin-block: .8rem 1rem; line-height: 1.6; }
  .trust-row { margin-top: .75rem; }
  .site-footer { padding-block: .65rem max(.7rem, env(safe-area-inset-bottom)); }
  .site-footer p:last-child { display: none; }
}

@media (max-height: 820px) {
  .site-header { min-height: 58px; }
  .screen { padding-block: clamp(.75rem, 2.5vh, 1.4rem); }
  .step { margin-bottom: .55rem; }
  h2 { font-size: clamp(18px, 2.5vh, 24px); }
  .form-screen form { margin-top: 1rem; gap: .7rem; }
  .field { gap: .4rem; }
  .field input, .field textarea { padding: .72rem .85rem; border-radius: 13px; }
  .field textarea { min-height: 78px; }
  #situationInput, #situationScreen #situationInput { height: clamp(118px, 20vh, 158px); min-height: 118px; }
  .dialogue-panel { padding: .6rem; gap: .4rem; }
  .dialogue-guide { padding: .52rem .65rem; }
  .dialogue-guide p { font-size: .78rem; line-height: 1.48; }
  .dialogue-status { font-size: .64rem; }
  .dialogue-prev, .dialogue-next { min-height: 30px; padding-block: .32rem; }
  .consent-row { font-size: .76rem; line-height: 1.4; }
  .primary-button, .secondary-button, .danger-button { min-height: 46px; padding-block: .68rem; }
  .notice { margin: .6rem 0; font-size: .8rem; }
  .reflection-card { padding: .9rem; }
  .understanding-field { margin-top: .65rem; }
  .understanding-field textarea { height: clamp(64px, 10vh, 82px); }
  .button-row { margin-top: .7rem; }
  .share-card { margin-top: .65rem; padding: 1.1rem; }
  .share-card > p:not(.share-brand) { margin: 1rem 0 .7rem; }
  .share-card blockquote { margin: .8rem 0 1.1rem; }
  .privacy-copy { margin-block: .65rem; font-size: .85rem; line-height: 1.5; }
  .history-list { margin-block: .65rem; }
  .auth-copy { margin-block: .65rem; font-size: .8rem; }
  .auth-divider { margin-block: .55rem; }
  .auth-notice { margin-top: .4rem; }
  .site-footer { padding-block: .55rem max(.65rem, env(safe-area-inset-bottom)); }
}

@media (max-height: 650px) and (max-width: 700px) {
  .site-header { min-height: 52px; }
  .screen { padding-block: .55rem; }
  .step { margin-bottom: .35rem; font-size: .58rem; }
  h2 { font-size: clamp(16px, 3.75vw, 20px); }
  .form-screen form { margin-top: .65rem; gap: .45rem; }
  .field > span { font-size: .78rem; }
  .field small { font-size: .68rem; }
  #situationInput, #situationScreen #situationInput { height: 92px; min-height: 92px; padding: .58rem .68rem; font-size: .74rem; line-height: 1.48; }
  .dialogue-panel { padding: .45rem; gap: .28rem; }
  .dialogue-head strong { font-size: .68rem; }
  .dialogue-head span { font-size: .56rem; }
  .dialogue-guide { padding: .4rem .5rem; }
  .dialogue-guide p { font-size: .68rem; line-height: 1.38; }
  .dialogue-status { font-size: .58rem; }
  .dialogue-prev, .dialogue-next { min-height: 27px; padding: .25rem .55rem; font-size: .62rem; }
  .consent-row { font-size: .68rem; }
  .notice { min-height: 1rem; margin-block: .35rem; font-size: .7rem; }
  .reflection-card { padding: .65rem; }
  .card-label { margin-bottom: .4rem; }
  #reflectionText { font-size: .78rem; line-height: 1.55; }
  #resultScreen #reflectionText { line-height: 1.48; }
  .reflection-highlights { margin-top: .4rem; gap: .3rem; }
  .insight-line, .dignity-line { padding: .42rem .52rem; }
  .insight-line strong, .dignity-line strong { font-size: .7rem; line-height: 1.4; }
  #resultScreen .insight-line strong, #resultScreen .dignity-line strong { line-height: 1.42; }
  .return-question { margin-top: .45rem; padding-top: .4rem; }
  .return-question strong { font-size: .72rem; }
  #resultScreen .return-question strong { line-height: 1.44; }
  .understanding-field textarea { height: 58px; min-height: 58px; }
  .understanding-field small { display: none; }
  .share-card { padding: .75rem; }
  .share-editor { margin-top: .4rem; padding: .55rem; gap: .35rem; }
  .share-editor input, .share-editor textarea { min-height: 30px; padding: .35rem .5rem; font-size: .68rem; }
  .share-card > p { margin: .65rem 0 .45rem; font-size: .76rem; }
  .share-card strong { font-size: .9rem; }
  .share-card blockquote { margin: .55rem 0 .7rem; font-size: 1rem; }
  .share-question { margin-bottom: .6rem; padding: .5rem .6rem; }
  .share-question p { font-size: .68rem; }
  .share-card footer { padding-top: .65rem; font-size: .7rem; }
  .privacy-copy { margin-block: .4rem; font-size: .72rem; }
  .history-list { margin-block: .4rem; }
  .auth-copy { margin-block: .35rem; font-size: .7rem; line-height: 1.4; }
  .auth-form { gap: .4rem; }
  .auth-divider { margin-block: .35rem; }
  .auth-privacy { font-size: .62rem; }
  .site-footer { font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}