:root {
  color-scheme: light;
  --ink: #15142d;
  --muted: #68677b;
  --paper: #f6f5fb;
  --card: rgba(255, 255, 255, .82);
  --line: rgba(21, 20, 45, .12);
  --violet: #704cff;
  --blue: #3d63ff;
  --mint: #63e7ba;
  --coral: #ff806a;
  --shadow: 0 24px 70px rgba(42, 34, 91, .13);
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 92% 6%, rgba(99, 231, 186, .24), transparent 24rem), radial-gradient(circle at 6% 32%, rgba(112, 76, 255, .12), transparent 26rem), var(--paper); min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { min-height: 48px; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; background: var(--ink); color: white; padding: .75rem 1rem; border-radius: .75rem; }
.skip-link:focus { top: 1rem; }
.topbar { height: 80px; max-width: 1120px; margin: auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: white; font-size: 1.4rem; background: linear-gradient(145deg, var(--blue), var(--violet)); box-shadow: 0 10px 24px rgba(76, 74, 255, .25); }
.brand b { display: block; font-size: 1.05rem; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: .55rem; letter-spacing: .18em; }
.top-actions { display: flex; align-items: center; gap: .75rem; }
.language { border: 1px solid var(--line); background: white; border-radius: 999px; padding: 0 15px; font-weight: 800; color: var(--ink); }
.icon-button { border: 1px solid var(--line); background: rgba(255,255,255,.72); color: var(--ink); border-radius: 999px; padding: 0 16px; font-weight: 750; }
.network { font-size: .7rem; color: #116b54; font-weight: 800; }.network.is-offline { color: #a13e2d; }
main { max-width: 1120px; margin: 0 auto; padding: 44px 24px 90px; }
.hero { max-width: 780px; padding: 8vh 0 10vh; }
.eyebrow { margin: 0 0 .7rem; color: var(--blue); font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
h1 { font-size: clamp(3rem, 7vw, 6.7rem); line-height: .94; letter-spacing: -.07em; margin: 0; }
h1 em { font-style: normal; color: transparent; background: linear-gradient(90deg, var(--blue), var(--violet), #b243eb); -webkit-background-clip: text; background-clip: text; }
.hero-copy { max-width: 570px; color: var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.7; margin: 2rem 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.primary, .secondary { border: 0; border-radius: 18px; padding: 0 24px; font-weight: 800; cursor: pointer; }
.primary { color: white; background: linear-gradient(105deg, var(--blue), var(--violet)); box-shadow: 0 15px 30px rgba(75, 71, 255, .22); }
.secondary { color: var(--ink); background: rgba(255,255,255,.75); border: 1px solid var(--line); }
.microcopy { color: var(--muted); font-size: .75rem; }
.life-loop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 2rem; padding: 0; list-style: none; }
.life-loop li { display: flex; align-items: center; gap: .65rem; min-height: 58px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.64); }
.life-loop span { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; color: white; background: var(--ink); font-size: .68rem; }.life-loop b { font-size: .78rem; line-height: 1.3; }
.today, .recent { padding: 32px; border: 1px solid var(--line); border-radius: 30px; background: var(--card); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.04em; }
.current-place { margin: .55rem 0 0; color: var(--muted); font-size: .78rem; }
.support-badge { padding: .5rem .7rem; border-radius: 999px; background: rgba(99, 231, 186, .2); color: #116b54; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.habitat { --readiness-progress: 0deg; margin-top: 28px; }
.habitat-frame { position: relative; max-width: 650px; margin: 0 auto; padding: 4px; border-radius: 34px; background: conic-gradient(from -90deg, var(--mint) 0 var(--readiness-progress), rgba(21,20,45,.09) var(--readiness-progress) 360deg); transition: background .35s ease, box-shadow .35s ease; }
.habitat-frame::after { content: ''; position: absolute; inset: 4px; z-index: 0; border-radius: 30px; background: rgba(246,245,251,.92); }
.anchor-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.anchor { --anchor-color: var(--violet); position: relative; min-height: 155px; overflow: hidden; text-align: left; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: .28rem .5rem; padding: 20px; border: 1px solid var(--line); border-radius: 21px 11px 11px 11px; color: var(--ink); background: rgba(255,255,255,.92); cursor: pointer; transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, background .22s ease, box-shadow .22s ease; }
.anchor:nth-child(2) { border-radius: 11px 21px 11px 11px; }
.anchor:nth-child(3) { border-radius: 11px 11px 11px 21px; }
.anchor:nth-child(4) { border-radius: 11px 11px 21px 11px; }
.anchor[data-anchor="grocery"] { --anchor-color: var(--coral); }
.anchor[data-anchor="laundry"] { --anchor-color: var(--blue); }
.anchor[data-anchor="work"] { --anchor-color: var(--violet); }
.anchor[data-anchor="exercise"] { --anchor-color: #159b79; }
.anchor:hover { transform: translateY(-3px); border-color: var(--anchor-color); }
.anchor-index { grid-column: 1; color: var(--anchor-color); font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.anchor-visual { position: relative; grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 43px; height: 43px; border-radius: 15px; color: var(--anchor-color); background: color-mix(in srgb, var(--anchor-color) 13%, white); }
.anchor-visual::before, .anchor-visual::after { content: ''; position: absolute; }
.anchor[data-anchor="grocery"] .anchor-visual::before { width: 19px; height: 17px; margin: 15px 0 0 12px; border: 2px solid currentColor; border-radius: 3px; }
.anchor[data-anchor="grocery"] .anchor-visual::after { width: 10px; height: 7px; margin: 9px 0 0 16px; border: 2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; }
.anchor[data-anchor="laundry"] .anchor-visual::before { width: 23px; height: 23px; margin: 10px 0 0 10px; border: 2px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--anchor-color) 12%, white); }
.anchor[data-anchor="work"] .anchor-visual::before { width: 24px; height: 16px; margin: 10px 0 0 9px; border: 2px solid currentColor; border-radius: 3px; }
.anchor[data-anchor="work"] .anchor-visual::after { width: 30px; height: 2px; margin: 30px 0 0 6px; border-radius: 2px; background: currentColor; }
.anchor[data-anchor="exercise"] .anchor-visual::before { width: 22px; height: 22px; margin: 10px 0 0 10px; border: 2px solid currentColor; border-left-color: transparent; border-radius: 50%; transform: rotate(-25deg); }
.anchor[data-anchor="exercise"] .anchor-visual::after { width: 7px; height: 7px; margin: 8px 0 0 28px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(15deg); }
.anchor b { grid-column: 1; align-self: end; font-size: 1.18rem; }
.anchor small { grid-column: 1 / -1; display: -webkit-box; color: var(--muted); overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.anchor-check { position: absolute; right: 13px; bottom: 13px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: transparent; background: rgba(21,20,45,.06); font-size: .72rem; font-weight: 900; }
.anchor.is-saved { color: white; border-color: transparent; background: linear-gradient(145deg, color-mix(in srgb, var(--anchor-color) 84%, #111126), var(--anchor-color)); box-shadow: 0 15px 30px color-mix(in srgb, var(--anchor-color) 24%, transparent); }
.anchor.is-saved .anchor-index, .anchor.is-saved small { color: rgba(255,255,255,.78); }
.anchor.is-saved .anchor-visual { color: white; background: rgba(255,255,255,.16); }
.anchor.is-saved .anchor-check { color: var(--ink); background: var(--mint); }
.anchor.is-optional:not(.is-saved) { opacity: .55; border-style: dashed; }
.anchor.is-settling { animation: settle-cell .5s cubic-bezier(.18,.89,.32,1.28); }
.habitat-core { position: absolute; z-index: 2; left: 50%; top: 50%; width: 104px; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-content: center; gap: 3px; padding: 12px; border: 8px solid var(--paper); border-radius: 50%; color: white; text-align: center; pointer-events: none; background: var(--ink); box-shadow: 0 16px 36px rgba(21,20,45,.25); transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease; }
.habitat-core strong { font-size: 1.3rem; }
.habitat-core span { font-size: .56rem; line-height: 1.25; color: rgba(255,255,255,.68); }
.habitat-caption { margin: 13px 0 0; color: var(--muted); text-align: center; font-size: .78rem; }
.habitat.is-ready .habitat-frame { box-shadow: 0 20px 55px rgba(99,231,186,.2); }
.habitat.is-ready .habitat-core { color: var(--ink); background: var(--mint); transform: translate(-50%, -50%) scale(1.04); }
.habitat.is-ready .habitat-core span { color: rgba(21,20,45,.7); }
.need-picker { margin: 20px 0 8px; padding: 0; border: 0; }
.need-picker legend { font-size: .78rem; font-weight: 800; }
.need-picker > p { margin: .35rem 0 .8rem; color: var(--muted); font-size: .72rem; }
.need-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.need-options label { min-height: 48px; margin: 0; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #f9f8fd; }
.need-options input { width: 22px; min-height: 22px; height: 22px; margin: 0; }
.need-summary { padding: 14px; border-radius: 14px; color: var(--ink); background: rgba(99,231,186,.18); font-weight: 800; }
.support-note { min-height: 1.4em; margin: 20px 0 0; color: var(--muted); font-size: .82rem; }
.memory { margin: 22px 0; padding: 36px; display: grid; grid-template-columns: 145px 1fr auto; align-items: center; gap: 32px; border-radius: 30px; color: white; overflow: hidden; background: var(--ink); }
.memory p:not(.eyebrow) { color: rgba(255,255,255,.66); line-height: 1.7; }
.memory .eyebrow { color: var(--mint); }
.memory-orbit { position: relative; width: 130px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; }
.memory-orbit::before { content: ''; position: absolute; inset: 25%; border-radius: 50% 45% 50% 43%; background: linear-gradient(135deg, var(--coral), var(--violet)); transform: rotate(24deg); }
.memory-orbit span { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--mint); }
.memory-orbit span:nth-child(1) { left: 8%; top: 30%; }.memory-orbit span:nth-child(2) { right: 9%; bottom: 18%; background: var(--coral); }.memory-orbit span:nth-child(3) { right: 19%; top: 8%; background: white; }
.text-button { border: 0; background: transparent; color: white; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.recent { box-shadow: none; }
.opportunities { margin: 22px 0; padding: 30px 32px; border: 1px solid var(--line); border-radius: 30px; background: rgba(255,255,255,.68); }
.text-button.dark { color: var(--ink); }
.opportunity-list { display: grid; gap: 10px; margin-top: 20px; }
.opportunity { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px; border-radius: 20px; background: white; border: 1px solid var(--line); }
.opportunity h3 { margin: .25rem 0; font-size: 1rem; }.opportunity p { margin: 0; color: var(--muted); }.opportunity small { display: block; margin-top: .45rem; color: #a13e2d; }.opportunity time { font-size: .7rem; color: var(--violet); font-weight: 800; }.opportunity a { color: var(--blue); font-size: .78rem; font-weight: 800; }
.record-list { display: grid; gap: 10px; margin-top: 20px; }
.record { display: flex; gap: 12px; padding: 16px; background: white; border-radius: 18px; border: 1px solid var(--line); }
.record > .outcome { color: var(--violet); }.record-body { min-width: 0; flex: 1; }.record p { margin: .55rem 0 .4rem; white-space: pre-wrap; overflow-wrap: anywhere; }.record small { color: var(--muted); font-size: .72rem; }
.record-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }.record-photos img, .photo-file { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #ebe8f5; }.photo-file { display: grid; place-items: center; color: var(--muted); font-size: .7rem; font-weight: 800; }
.empty { color: var(--muted); }
dialog { width: min(560px, calc(100vw - 24px)); border: 0; border-radius: 28px; padding: 28px; color: var(--ink); box-shadow: 0 30px 100px rgba(18, 16, 45, .3); }
dialog::backdrop { background: rgba(20, 18, 44, .55); backdrop-filter: blur(7px); }
.dialog-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 24px; }
.close { width: 48px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 1.5rem; cursor: pointer; }
label { display: grid; gap: .55rem; margin: 16px 0; font-size: .78rem; font-weight: 750; }
input, textarea, select { width: 100%; min-height: 48px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #f9f8fd; }
textarea { resize: vertical; }
.outcome-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.choice { padding: 8px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: white; cursor: pointer; }
.choice.is-selected { color: white; background: var(--ink); }
.logic-consent { grid-template-columns: 24px 1fr; align-items: center; }.logic-consent input { min-height: 24px; height: 24px; }
.privacy, .boundary { padding: 12px 14px; border-radius: 14px; color: var(--muted); background: #f2f0fb; font-size: .76rem; line-height: 1.5; }
.dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 22px; }.dialog-actions .primary { min-width: 180px; }
.full { width: 100%; }
.status-line { min-height: 1.5em; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.place-results { display: grid; gap: 8px; max-height: 40vh; overflow: auto; overscroll-behavior: contain; margin: 12px 0; }
.place-result { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; }.place-result div { display: grid; gap: 3px; min-width: 0; }.place-result b { overflow-wrap: anywhere; }.place-result small { color: var(--muted); font-size: .7rem; }
.manual-place { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }.manual-place summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 800; }.attribution { font-size: .68rem; color: var(--muted); }.attribution a { color: inherit; }
.photo-picker { display: grid; gap: 8px; margin: 16px 0; }.photo-picker > small { color: var(--muted); font-size: .7rem; }.photo-preview { display: grid; gap: 6px; }.photo-preview span { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f2f0fb; }.photo-preview b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }.photo-preview small { color: var(--muted); }
.logic-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }.logic-item div { display: grid; gap: 5px; }.logic-item small { color: var(--muted); }.logic-item > span { color: #a13e2d; font-size: .75rem; }
.settings-stack { display: grid; gap: 9px; }
.import-list { display: grid; gap: 8px; max-height: 42vh; overflow: auto; overscroll-behavior: contain; margin-top: 14px; }
.import-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.import-item input { width: 24px; min-height: 24px; height: 24px; margin: 0; }
.import-item div, .import-item span { display: grid; gap: 4px; min-width: 0; }
.import-item b { overflow-wrap: anywhere; }
.import-item small { color: var(--muted); font-size: .7rem; }
.destination-summary { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-radius: 18px; color: white; background: linear-gradient(120deg, var(--blue), var(--violet)); }.destination-summary strong { font-size: 1.4rem; }.destination-summary span { font-size: .7rem; font-weight: 900; }
.logic-list { padding: 0; list-style: none; }.logic-list li { display: grid; gap: .4rem; padding: 14px 0; border-bottom: 1px solid var(--line); }.logic-list span { color: var(--muted); font-size: .8rem; }
footer { max-width: 1120px; margin: auto; padding: 26px 24px 40px; display: flex; justify-content: space-between; color: var(--muted); border-top: 1px solid var(--line); } footer small { letter-spacing: .12em; }
body[data-state="saving"] .primary { cursor: wait; }
@keyframes settle-cell { 0% { transform: scale(.92); } 65% { transform: scale(1.035); } 100% { transform: scale(1); } }
@media (max-width: 720px) {
  .topbar { height: 68px; padding: 0 14px; }.network { display: none; }.icon-button { padding: 0 12px; } main { padding: 20px 16px 70px; }.hero { padding: 7vh 0 8vh; } h1 { font-size: clamp(3rem, 15vw, 4.6rem); }.life-loop { grid-template-columns: 1fr; }.hero-actions { display: grid; }.hero-actions button { width: 100%; }.today, .recent, .opportunities { padding: 22px; border-radius: 24px; }.anchor-grid { padding: 9px; gap: 7px; }.anchor { min-width: 0; min-height: 132px; padding: 15px; }.anchor-visual { width: 38px; height: 38px; transform: scale(.88); transform-origin: top right; }.anchor b { font-size: 1rem; }.anchor small { max-width: calc(100% - 22px); font-size: .7rem; }.habitat-core { width: 88px; border-width: 7px; }.habitat-core strong { font-size: 1.08rem; }.habitat-core span { max-width: 60px; }.memory { grid-template-columns: 78px 1fr; padding: 24px; gap: 18px; }.memory-orbit { width: 74px; }.memory .text-button { grid-column: 1 / -1; justify-self: start; }.outcome-group { grid-template-columns: 1fr; }.dialog-actions { align-items: stretch; flex-direction: column; }.dialog-actions .primary { width: 100%; }.dialog-actions span { min-height: 1em; }.opportunity { align-items: flex-start; flex-direction: column; }.place-result { grid-template-columns: 1fr; }.record-photos { grid-template-columns: repeat(2, minmax(0,1fr)); } footer { flex-direction: column; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }