/* 더뉴잉 — 미래지향 미니멀리즘 (2026-10-26 사용자 '레트로 감성은 버리자 — 미래지향적으로, 미니멀리즘으로')
   흑백 + 강조색 하나 · 얇은 선 · 넓은 여백 · 그림자·광택 없음. 첫 화면 가운데 = 정사각형 우주 화면(별 + 떠 있는 글씨) */
:root {
  --bg: #f7f7f9;
  --card: #ffffff;
  --soft: #f0f1f4;
  --ink: #0d0e12;
  --muted: #6b6f7b;
  --line: #e6e7ec;
  --accent: #ea5a0c;      /* 포인트 색 = 주황 (CI 의 i, 사용자 2026-10-26) */
  --accent-2: #ff8a00;
  --mint: #0fa67a;
  --red: #e5484d;
  --space: #05060b;
  --font-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-num: "Sora", "IBM Plex Sans KR", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Nanum Gothic Coding", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #08090c; --card: #111217; --soft: #17181e; --ink: #f2f3f5; --muted: #8b8f9a; --line: #23252c; --accent: #ff8a3d; --mint: #3ddc97; --red: #ff6b6b; color-scheme: dark }
}
:root[data-theme="dark"] { --bg: #08090c; --card: #111217; --soft: #17181e; --ink: #f2f3f5; --muted: #8b8f9a; --line: #23252c; --accent: #ff8a3d; --mint: #3ddc97; --red: #ff6b6b; color-scheme: dark }

* { box-sizing: border-box }
html, body { height: 100%; margin: 0 }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word }
button, select, input, textarea { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
[hidden] { display: none !important }
a { color: inherit }

.app { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding-inline: 16px; padding-block: 0 40px }

.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; margin-inline: -16px; border-bottom: 1px solid var(--line) }
.brand { font-family: var(--font-num); font-weight: 500; font-size: 17px; letter-spacing: .02em; display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 0; color: var(--ink); text-decoration: none }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) }
.counter { font-size: 10.5px; color: var(--muted); text-align: right; line-height: 1.3; letter-spacing: .04em }
.counter b { color: var(--ink); font-family: var(--font-num); font-weight: 500; font-size: 13px; display: block; letter-spacing: .06em }

main { display: flex; flex-direction: column; gap: 20px; padding-top: 18px }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 13px 16px; font-weight: 600; transition: opacity .15s, transform .1s; text-decoration: none; color: var(--ink) }
.btn:active { transform: scale(.985) }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg) }
.btn.blue { background: var(--accent); border-color: var(--accent); color: #fff }
.btn.block { width: 100% }
.btn.grow { flex: 1 }
.btn[disabled] { opacity: .35; pointer-events: none }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; background: var(--card); font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--muted) }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg) }
.label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--muted) }
.pixel { font-family: var(--font-num); font-weight: 500; font-variant-numeric: tabular-nums }
.muted { color: var(--muted) }
.small { font-size: 13px }
.row { display: flex; gap: 10px; align-items: center }
.row.wrap { flex-wrap: wrap }
.col { display: flex; flex-direction: column; gap: 12px }
.m0 { margin: 0 }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; letter-spacing: -.01em }

/* ── 첫 화면: 정사각형 우주 화면 ── */
.space { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; border: 1px solid #161a35; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, #0d1124 0%, var(--space) 60%); display: grid; place-items: center; isolation: isolate }
.space canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0 }
.space::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 45% at 50% 50%, rgba(124,134,255,.16), transparent 70%); animation: nebula 14s ease-in-out infinite alternate }
.space { perspective: 600px }
.space-name { position: relative; z-index: 2; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #f4f5ff; text-align: center; transform-style: preserve-3d; animation: float 11s ease-in-out infinite }
.space-name .ko { display: block; font-family: var(--font-body); font-weight: 300; font-size: clamp(30px, 9vw, 42px); letter-spacing: .34em; margin-right: -.34em; text-shadow: 0 0 24px rgba(160,170,255,.45); animation: bob-ko 7s ease-in-out infinite }
.space-name .en { display: block; font-family: var(--font-num); font-weight: 300; font-size: clamp(13px, 3.6vw, 16px); letter-spacing: .62em; margin-right: -.62em; text-transform: uppercase; color: rgba(220,224,255,.8); animation: bob-en 8.5s ease-in-out infinite, glow 4.5s ease-in-out infinite }
/* 무중력: 묶음 전체가 천천히 떠돌고(위아래·좌우·살짝 기울기), 두 줄이 서로 다른 박자로 따로 흔들린다 */
@keyframes float {
  0%   { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(0deg) rotateY(0deg) }
  20%  { transform: translate3d(9px, -14px, 20px) rotateZ(1.4deg) rotateX(6deg) rotateY(-8deg) }
  45%  { transform: translate3d(-4px, -22px, 0) rotateZ(-.8deg) rotateX(-4deg) rotateY(6deg) }
  70%  { transform: translate3d(-11px, -8px, -16px) rotateZ(-1.6deg) rotateX(5deg) rotateY(9deg) }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(0deg) rotateY(0deg) }
}
@keyframes bob-ko { 0%, 100% { transform: translate3d(0, 0, 0) } 50% { transform: translate3d(-4px, -5px, 10px) } }
@keyframes bob-en { 0%, 100% { transform: translate3d(0, 0, 0) } 50% { transform: translate3d(6px, 4px, -8px) } }
@keyframes glow { 0%, 100% { opacity: .62 } 50% { opacity: 1 } }
@keyframes nebula { from { transform: scale(1) translateY(0); opacity: .7 } to { transform: scale(1.15) translateY(-4%); opacity: 1 } }

.intro { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 4px 4px 0 }
.intro .tag { margin: 0; font-size: 12px; letter-spacing: .28em; margin-right: -.28em; color: var(--muted); font-weight: 500 }
.intro .headline { margin: 4px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3 }
.intro .money { margin: 0; font-size: 17px; color: var(--muted); line-height: 1.35; font-weight: 300; letter-spacing: -.01em }
.intro .money b { font-weight: 700; color: var(--ink) }
.calc { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--muted) }
.calc span { white-space: nowrap }
.calc .arr { opacity: .5 }
.calc .got { color: var(--ink); font-weight: 600 }
.calc .got b { font-family: var(--font-num); font-weight: 600; color: var(--accent) }
.intro .btn { margin-top: 6px }
.intro .note { margin: 0; font-size: 12px; color: var(--muted) }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.step { padding: 14px 8px; font-size: 12.5px; line-height: 1.5; min-width: 0; text-align: center; color: var(--muted) }
.step + .step { border-left: 1px solid var(--line) }
.step b { color: var(--ink); font-weight: 600 }
.step .n { display: block; font-family: var(--font-num); font-size: 11px; color: var(--accent); letter-spacing: .1em; margin-bottom: 4px }

.section-head { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.section-head h2 { font-size: 17px }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none }
.chips.wrap { flex-wrap: wrap }
.chips::-webkit-scrollbar { display: none }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--card) }
.seg button { border: 0; background: none; padding: 3px 12px; font-size: 12.5px; font-weight: 500; border-radius: 999px; color: var(--muted) }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg) }

.feed { display: flex; flex-direction: column; gap: 10px }
.idea { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 14px; text-align: left; width: 100%; color: inherit; transition: border-color .15s }
.idea:hover { border-color: color-mix(in srgb, var(--ink) 25%, var(--line)) }
.seal { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; position: relative; overflow: hidden; flex: none; color: #e9ebff;
  background: radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 20%, #cfd3ff 50%, transparent 51%), radial-gradient(1px 1px at 80% 75%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 35% 80%, #aab1ff 50%, transparent 51%), radial-gradient(120% 100% at 50% 40%, #11163a, var(--space)) }
.seal span { display: grid; place-items: center }
.idea .meta { display: flex; flex-direction: column; gap: 5px; min-width: 0 }
.idea .field { font-weight: 600; font-size: 15.5px }
.idea .sub { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted) }
.badge-new { font-family: var(--font-num); font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; padding: 0 8px; align-self: flex-start }
.idea .bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px }
.price { font-family: var(--font-num); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums }
.open-pill { border: 1px solid var(--ink); border-radius: 999px; padding: 3px 12px; font-weight: 600; font-size: 12.5px; white-space: nowrap }
.open-pill.done { border-color: var(--line); color: var(--muted) }
.blurline { height: 6px; border-radius: 3px; background: var(--ink); opacity: .08; width: 92% }
.blurline.short { width: 60% }
.mine-tag { font-size: 11px; font-weight: 600; color: var(--accent) }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px) }
.tabbar .inner { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; padding-inline: 16px }
.tab { background: none; border: 0; padding: 10px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 500; color: var(--muted) }
.tab[aria-current="true"] { color: var(--ink); font-weight: 600 }
.tab.plus { position: relative; top: -14px; color: var(--ink) }

.scrim { position: fixed; inset: 0; background: rgba(5, 6, 11, .5); backdrop-filter: blur(2px); z-index: 20; display: flex; align-items: flex-end; justify-content: center }
.sheet { width: 100%; max-width: 480px; background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; max-height: 90%; overflow-y: auto; animation: up .25s cubic-bezier(.2, .8, .2, 1) }
.sheet h2 { font-size: 19px }
.grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto; flex: none }
@keyframes up { from { transform: translateY(32px); opacity: 0 } }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; margin: 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.kv dt { color: var(--muted) } .kv dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums }
.ok { color: var(--mint) }
.warn { border-left: 2px solid var(--red); padding: 4px 0 4px 12px; font-size: 13.5px; color: var(--ink) }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px }
.check input { width: 18px; height: 18px; accent-color: var(--ink); margin-top: 3px; flex: none }
.input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card) }
.input:focus, textarea:focus { outline: none; border-color: var(--ink) }
.err { color: var(--red); font-size: 13.5px; font-weight: 500; margin: 0 }

.progress { display: flex; gap: 4px }
.progress i { flex: 1; height: 2px; border-radius: 1px; background: var(--line) }
.progress i.on { background: var(--ink) }
.wiz { padding: 20px 18px; display: flex; flex-direction: column; gap: 14px }
.wiz h2 { font-size: 20px }
.wiz.start { align-items: flex-start; margin-top: 16px }
textarea { width: 100%; min-height: 180px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--card); resize: vertical; line-height: 1.7 }
.grid-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.pick { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 14px 6px; font-weight: 500; font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--ink) }
.pick[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg) }
.pick small { font-weight: 400; font-size: 11.5px; opacity: .75; text-align: center }
.confirm-box { padding: 12px 14px; font-size: 13.5px; background: var(--soft); border-color: transparent }

/* 봉인 화면 — 어두운 패널에 진행 기록이 한 줄씩 */
.term { position: relative; background: var(--space); color: #dfe2ff; border: 1px solid #1c2040; border-radius: 18px; padding: 42px 18px 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 230px }
.term::before { content: 'SEALING'; position: absolute; left: 18px; top: 16px; font-family: var(--font-num); font-size: 10px; letter-spacing: .4em; color: #6f76b8 }
.term::after { content: ''; position: absolute; right: 18px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: #ff8a3d; box-shadow: 0 0 10px #ff8a3d; animation: glow 1.6s ease-in-out infinite }
.term .y { color: #fff } .term .g { color: #6ff0b4 } .term .r { color: #ff9a9a } .term .d { color: #7b82bd }
.cursor { display: inline-block; width: 1px; height: 14px; background: #dfe2ff; vertical-align: -2px; animation: blink 1s steps(1) infinite }
@keyframes blink { 50% { opacity: 0 } }

.stamp { font-family: var(--font-num); font-weight: 600; font-size: 12px; letter-spacing: .14em; border: 1px solid var(--mint); color: var(--mint); padding: 4px 12px; border-radius: 999px; display: inline-block }
.stamp.no { border-color: var(--red); color: var(--red) }

.reader { position: relative; overflow: hidden; padding: 22px; min-height: 200px }
.reader .content { position: relative; z-index: 1; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16.5px; line-height: 1.8 }
.wm { position: absolute; inset: -60px; z-index: 0; display: flex; flex-wrap: wrap; gap: 26px 40px; transform: rotate(-22deg); color: var(--ink); opacity: .06; font-size: 12px; pointer-events: none; user-select: none; font-family: var(--font-mono) }
.reason { padding: 16px; font-size: 14px }

.cert { background: #fdfdfb; color: #16171c; border: 1px solid #dcdcd6; outline: 1px solid #dcdcd6; outline-offset: -7px; border-radius: 10px; padding: 24px 20px 20px; font-size: 13px; overflow-wrap: anywhere; position: relative }
.cert h3 { text-align: center; font-size: 18px; font-weight: 600; letter-spacing: .5em; margin: 0 -.5em 4px 0 }
.cert .no { text-align: center; font-family: var(--font-num); font-size: 12px; letter-spacing: .2em; margin-bottom: 14px; color: #555 }
.cert p { margin: 0 0 8px }
.cert code { font-family: var(--font-mono); font-size: 11px }
.cert .note { margin: 0; font-size: 11.5px; padding-right: 84px; color: #555 }
.cert .red-seal { position: absolute; right: 16px; bottom: 16px; width: 72px; height: 72px; border: 2px solid #c0392b; color: #c0392b; border-radius: 50%; display: grid; place-items: center; text-align: center; font-weight: 700; font-size: 10.5px; line-height: 1.25; transform: rotate(-12deg); opacity: .85 }
.dl { display: flex; gap: 8px; flex-wrap: wrap }
.dl a { flex: 1; font-size: 13px; padding: 11px }

.money { padding: 20px; display: flex; flex-direction: column; gap: 4px }
.money .big { font-family: var(--font-num); font-weight: 300; font-size: 40px; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.stat { padding: 14px 10px; text-align: center } .stat b { font-family: var(--font-num); font-weight: 400; font-size: 24px; display: block }
.row-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 14px; text-align: left; width: 100%; color: inherit }
.status-chip { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 9px; justify-self: start; border: 1px solid var(--line); color: var(--muted) }
.status-chip.on { border-color: color-mix(in srgb, var(--mint) 50%, transparent); color: var(--mint) }
.status-chip.wait { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent) }
.empty { padding: 28px 20px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center }
.big-emoji { font-size: 34px; line-height: 1; color: var(--muted) }
.ob-emoji { text-align: center; font-size: 44px; line-height: 1; color: var(--accent) }
.center { text-align: center }
.dots { display: flex; justify-content: center; gap: 6px }
.dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .25s }
.dots span.on { width: 18px; background: var(--ink) }

.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 10px 18px; font-weight: 500; font-size: 13.5px; max-width: calc(100% - 32px) }
.foot { font-size: 12px; color: var(--muted); text-align: center }
.link { background: none; border: 0; color: var(--ink); font-weight: 600; padding: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; align-self: flex-start }
.foot .link, .foot a { color: var(--muted); font-weight: 500 }
.link.center-self { align-self: center }
.title-lg { font-size: 22px }
.loading { padding: 40px 0; text-align: center; color: var(--muted) }

@media (prefers-reduced-motion: reduce) { .sheet, .cursor, .term::after { animation: none } .btn, .idea { transition: none } }
/* 움직임 줄이기 설정이어도 정사각형 우주는 작고 느리게 계속 떠 있다 — 브랜드의 핵심 화면 (사용자 2026-10-26 '애니메이션 효과가 안 들어가 있어') */
@media (prefers-reduced-motion: reduce) {
  .space-name { animation: float-soft 16s ease-in-out infinite }
  .space-name .ko, .space-name .en { animation: none }
}
@keyframes float-soft { 0%, 100% { transform: translate3d(0, 0, 0) } 50% { transform: translate3d(0, -6px, 0) } }

/* 단색 아이콘 (Lucide) — 글자색을 따른다 */
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.17em; flex: none; stroke-width: 1.6 }
.seal span .ico { width: 22px; height: 22px; stroke-width: 1.4 }
.tab .ico-wrap { height: 22px; display: grid; place-items: center } .tab .ico-wrap .ico { width: 21px; height: 21px }
.tab.plus .ico-wrap { width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: var(--bg); border: 4px solid var(--bg) }
.tab.plus .ico-wrap .ico { width: 24px; height: 24px; stroke-width: 2 }
.pick .ico { width: 22px; height: 22px }
.big-emoji .ico, .ob-emoji .ico { width: 1em; height: 1em; stroke-width: 1.2 }
.wiz.start > .row { width: 100% }

/* 약관·처리방침 */
.doc { padding: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px }
.doc h1 { font-size: 21px } .doc h2 { font-size: 15.5px; margin-top: 10px } .doc p, .doc ul, .doc ol { margin: 0 } .doc li { margin: 2px 0 }
.draft-note { border-left: 2px solid var(--red); padding: 4px 0 4px 12px; font-size: 13px }
.biz-fold { margin: 0 } .biz-fold summary { cursor: pointer; list-style: none } .biz-fold summary::-webkit-details-marker { display: none }
.biz-fold summary::after { content: ' ▾' } .biz-fold[open] summary::after { content: ' ▴' }
.biz-fold p { margin: 8px 0 0; line-height: 1.6 } .doc .small { font-size: 13px }

/* ── 시작 화면 (로그인 전) — 스크롤 없는 한 화면, 아래 탭 숨김 (사용자 2026-10-26) ── */
body.start-mode .tabbar { display: none }
body.start-mode .app { padding-bottom: 0; height: 100dvh; min-height: 0; overflow: hidden }
body.start-mode main { padding-top: 12px; flex: 1; min-height: 0 }
.start { height: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) }
/* 정사각형은 남는 높이에 맞춰 줄어든다 (작은 휴대폰에서도 스크롤 없음) */
.start .space { width: min(100%, calc(100dvh - 330px)); align-self: center; flex: none }
.start .headline { margin: 4px 0 2px; text-align: center; font-size: clamp(19px, 5.6vw, 24px); font-weight: 600; letter-spacing: -.02em }
.login { display: flex; flex-direction: column; gap: 8px }
.login .input { padding: 11px 14px }
.login .err { text-align: center }
.start-foot { margin: auto 0 0; text-align: center; font-size: 11px; color: var(--muted) }
.start-foot a, .start-foot .link { color: var(--muted); font-weight: 400; font-size: 11px; text-decoration: none }
.start .link.center-self { font-size: 13.5px }
.biz-sheet p { margin: 0 0 8px }

/* ── 정사각형 안: 글씨 아래 봉인된 생각 줄 (내용 없이 번호·분야·지문 조각), 아래로 갈수록 투명 ── */
.space { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 15% }
.space-list { position: relative; z-index: 2; width: 58%; flex: 1; margin: 9% 0 0; overflow: hidden; list-style: none; padding: 0;
  /* 위쪽은 짧게(빨리) 사라지고, 아래쪽은 길게 서서히 사라진다 (사용자 2026-10-26) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 28%, rgba(0,0,0,.45) 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 28%, rgba(0,0,0,.45) 60%, transparent 100%) }
.space-list ul { list-style: none; margin: 0; padding: 0; animation: rise 35s linear infinite }
.space-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(170,178,255,.12); font-family: var(--font-mono); font-size: clamp(9.5px, 2.6vw, 11.5px); color: rgba(220,224,255,.78); white-space: nowrap }
.space-list li .f { font-family: var(--font-body); color: rgba(240,242,255,.92) }
.space-list li .m { opacity: .55 }
@keyframes rise { from { transform: translateY(0) } to { transform: translateY(-50%) } }
@media (prefers-reduced-motion: reduce) { .space-list ul { animation-duration: 55s } }

/* ── 생각 만들기 (로그인 후) ── */
.make-space { max-width: 360px; align-self: center }
.headline.center { text-align: center; margin: 0; font-size: 20px; font-weight: 600 }
.make { padding: 18px; display: flex; flex-direction: column; gap: 16px }
.make.locked { opacity: .55 }
.field-block { display: flex; flex-direction: column; gap: 8px }
.chips.sub { padding-top: 2px }
.price-row { display: flex; align-items: center; gap: 8px } .price-row .input { font-family: var(--font-num); font-size: 18px } .price-row span { color: var(--muted) }
.sub-card { padding: 18px; display: flex; flex-direction: column; gap: 10px; text-align: center; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)) }
.sub-line { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px }
.web-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px } .web-list a { color: var(--accent) }

.subline { margin: -4px 0 4px; text-align: center; font-size: 14px; color: var(--muted) }
.start .headline { font-size: clamp(18px, 5.2vw, 23px) }
.start .space { width: min(100%, calc(100dvh - 355px)) }
.subline { line-height: 1.5; font-size: 13.5px }
.start .space { width: min(100%, calc(100dvh - 375px)) }

/* 헤더 CI + 글자 (사용자 2026-10-26 제공). 글자는 알파 그림을 mask 로 써서 테마 글자색(--ink)을 입힌다 */
.brand { gap: 9px }
.brand .ci { width: 34px; height: 34px; display: block; flex: none }
.brand .wordmark { display: block; height: 19px; aspect-ratio: 491 / 96; background: var(--ink);
  -webkit-mask: url(/img/wordmark.png?v=1) center / contain no-repeat; mask: url(/img/wordmark.png?v=1) center / contain no-repeat }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .ci { filter: drop-shadow(0 0 6px rgba(140,160,255,.35)) brightness(1.15) } }
:root[data-theme="dark"] .brand .ci { filter: drop-shadow(0 0 6px rgba(140,160,255,.35)) brightness(1.15) }
.top-tag { font-size: 11px; font-weight: 500; letter-spacing: .12em; margin-right: -.12em; color: var(--muted); white-space: nowrap }
/* '생각 거래 플랫폼' — the Newing 글자 바로 아래, 글자 폭에 맞춰 (사용자 2026-10-26) */
.brand-text { display: flex; flex-direction: column; align-items: stretch; gap: 3px }
.brand-tag { font-family: var(--font-body); font-size: 10px; font-weight: 500; line-height: 1; color: var(--muted); white-space: nowrap; display: flex; justify-content: space-between }   /* 글자마다 칸 — 일곱 글자가 같은 간격으로 글자 폭을 꽉 채움 */
.brand-tag span { display: block }

/* ── 로그인 뒤 머리: 왼쪽 ☰ 더보기 + 스위치 [생각 올리기 | 생각 둘러보기] (사용자 2026-10-26, 성성AI 왼쪽 메뉴 방식) ── */
.top { justify-content: flex-start; gap: 10px }
.icon-btn { background: none; border: 0; padding: 6px; margin-left: -6px; border-radius: 10px; color: var(--ink); display: grid; place-items: center }
.icon-btn .ico { width: 22px; height: 22px }
.icon-btn:hover { background: var(--soft) }
.mode { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 12px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) }
.mode button { border: 0; background: none; padding: 9px 6px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--muted) }
.mode button[aria-selected="true"] { background: var(--ink); color: var(--bg) }
body.start-mode .mode, body.start-mode .side-btn { display: none }

.side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 25; width: min(300px, 84vw); background: var(--card); border-right: 1px solid var(--line); padding: 14px 12px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; transform: translateX(-102%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; gap: 2px }
.side.open { transform: none }
.side-backdrop { position: fixed; inset: 0; z-index: 24; background: rgba(5, 6, 11, .45) }
.side-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px }
.side-head b { font-size: 16px } .side-head .icon-btn { margin-left: auto }
.side-sec { margin: 12px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--muted) }
.side-sec small { font-weight: 500; letter-spacing: 0; margin-left: 4px }
.side-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 10px 10px; border-radius: 10px; font-size: 14.5px; color: var(--ink); text-align: left; text-decoration: none }
.side-item:hover { background: var(--soft) }
.side-item.on { background: var(--soft); font-weight: 600 }
.side-item .ico { width: 18px; height: 18px; color: var(--muted) }
.side-item.out { margin-top: 8px; color: var(--muted) }
.side-n { margin-left: auto; font-family: var(--font-num); font-weight: 500; font-size: 12px; color: var(--muted) }
.side-badge { font-size: 10.5px; font-weight: 600; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 0 7px; margin-left: auto }
.side-head .side-badge { margin-left: 0 }
.side-badge.on { border-color: color-mix(in srgb, var(--mint) 50%, transparent); color: var(--mint) }
.theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: 0 6px; border: 1px solid var(--line); border-radius: 12px }
.theme-pick button { border: 0; background: none; padding: 7px 4px; border-radius: 8px; font-size: 13px; color: var(--muted) }
.theme-pick button[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
@media (prefers-reduced-motion: reduce) { .side { transition: none } }

.page-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px } .page-head h2 { font-size: 19px }
.info-card { padding: 16px }
.small-h { margin: 0; font-size: 14px; color: var(--muted); font-weight: 600 }
.list-card { padding: 4px 14px }
.pay-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; font-size: 13px; border-bottom: 1px solid var(--line) }
.pay-row:last-child { border-bottom: 0 }

/* 로그인 뒤 우주 정사각형은 둘러보기 스위치 아래 (사용자 2026-10-26 — 생각 만들기에서는 뺌) */
.browse-space { width: min(100%, 380px); align-self: center }
.intro-copy { display: flex; flex-direction: column; gap: 8px; margin-top: -4px }

.hero-top { display: flex; flex-direction: column; gap: 10px; padding-top: 14px }
.hero-top .space { width: min(100%, 380px); align-self: center }
body.start-mode .hero-top { display: none }

/* 로그인 화면 — 우주 정사각형 없이 문구 + 로그인만, 화면 가운데 (사용자 2026-10-26 '로그인 화면에서 빼줘') */
.start-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; width: 100%; max-width: 400px; align-self: center }
.start-mid .headline { font-size: clamp(22px, 6.4vw, 28px); margin-bottom: 0 }
.start-mid .subline { margin: 0 0 14px }

/* 로그인 화면: 정사각형 + 문구 + 로그인 (한 화면). 로그인 뒤에는 정사각형 없음 */
.start .start-mid { flex: 0 1 auto; justify-content: flex-start; gap: 8px }
.start .start-mid .headline { font-size: clamp(18px, 5.2vw, 23px) }
.start .start-mid .subline { margin: 0 0 4px }
.start .space { width: min(100%, calc(100dvh - 375px)) }

/* 포인트 주황 — 봉인 버튼은 CI 처럼 노랑→주황 */
.btn.blue { background: linear-gradient(135deg, var(--accent-2), var(--accent)); border-color: transparent; color: #fff }
.status-chip.wait { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent) }

/* 스위치 — 손잡이가 미끄러지듯 옮겨 간다 (사용자 2026-10-26 '슬라이딩 애니메이션', 색은 바꾸지 않음) */
.mode { position: relative; isolation: isolate }
.mode::before { content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 10px;
  background: var(--ink);
  transition: transform .38s cubic-bezier(.65, 0, .25, 1.15) }
.mode[data-active="browse"]::before { transform: translateX(calc(100% + 4px)) }
.mode button { position: relative; transition: color .25s }
.mode button[aria-selected="true"] { background: none; color: var(--bg) }
@media (prefers-reduced-motion: reduce) { .mode::before { transition-duration: .15s } }

.hero-top { padding-top: 18px }
.hero-top .intro-copy { margin: 0; gap: 6px }
.hero-top .headline.center { font-size: 21px }
.hero-top .subline { margin: 0 }

.pause-card { padding: 16px; display: flex; flex-direction: column; gap: 6px; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)) }
#sampleOut { display: flex; flex-direction: column; gap: 12px }
.stamp { letter-spacing: .02em; font-family: var(--font-body) }
.term.sample::before { content: 'SAMPLE · 기록 안 남음' }

.need { color: var(--accent); font-weight: 500; text-align: center; min-height: 1.2em }

/* 관리자 */
.adm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px }
.adm-grid .stat b { font-size: 20px }
.adm-table { width: 100%; border-collapse: collapse; font-size: 12.5px }
.adm-table th, .adm-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); font-weight: 500 }
.adm-table thead th { color: var(--muted); font-weight: 600 }
.est-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.est-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted) }
.est-grid .input { padding: 9px 10px; font-family: var(--font-num) }
.est-out .err { color: var(--red) }
.adm-list { padding: 4px 12px } .adm-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px }
.adm-row:last-child { border-bottom: 0 } .adm-body { width: 100%; color: var(--muted); font-size: 12.5px }