/* Layout: one quiet column. A big date, a hairline, one card, one seed.
   Once a feeling is chosen, its colour washes the top of the page (the aura). */
:root{
  /* 중간기점: 따뜻함과 차가움이 반반인 아이보리. 여기서 감정색 쪽으로 기울어요. */
  --bg:#FCFAF1; --surface:#FFFEF9; --surface-2:#F1EDDC;
  --fg:#232826; --muted:#66665F; --line:#E0DAC6;
  --accent:#2F6F6A; --on-accent:#F8FBF9;
  --a0:#F8EDB0; --b0:#D3EDB6;
  --c-sink:#8FB0D6;  --c-sink2:#C4D8EE;
  --c-fear:#A99BDB;  --c-fear2:#D3CBEE;
  --c-pile:#E0B060;  --c-pile2:#F1D7A0;
  --c-high:#F2D043;  --c-high2:#F9E88F;
  --c-calm:#7CCBA6;  --c-calm2:#C0E8D5;
  --c-warm:#F29B7B;  --c-warm2:#F9C9B5;
  --nt-bg:#FFFDF0; --nt-fg:#2C3324; --nt-line:#8BA85E; --nt-bar1:#DCEFB4; --nt-bar2:#FBEFB6; --nt-btn:#FBF3C4;
  --font-display:'Gowun Batang','Noto Serif KR','Noto Serif CJK KR','Nanum Myeongjo','AppleMyungjo','Batang',serif;
  --font-body:'Gowun Dodum','Noto Sans KR','Noto Sans CJK KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* 푸른 새벽: 까맣지 않은 남색 바탕. --c-*는 배경 물감에만 쓰고, 동그라미와 카드는 밝은 파스텔(--pa, --pb)로 둔다. */
    --bg:#2A3242; --surface:#353E50; --surface-2:#414B5E;
    --fg:#F3F4F1; --muted:#C5CAD3; --line:#4C5669;
    --accent:#A9DAD0; --on-accent:#17302B;
    --a0:#5F7DBE; --b0:#3F8E9C;
    --c-sink:#4F6A8C;  --c-sink2:#3F4F66;
    --c-fear:#655A8E;  --c-fear2:#4C466A;
    --c-pile:#7F6740;  --c-pile2:#5E4F36;
    --c-high:#736A39;  --c-high2:#5F5935;
    --c-calm:#437260;  --c-calm2:#3A5A4E;
    --c-warm:#8F5F4C;  --c-warm2:#694A3E;
    --nt-bg:#383A2E; --nt-fg:#F4F1E7; --nt-line:#9DB874; --nt-bar1:#55653A; --nt-bar2:#6A6038; --nt-btn:#4A4A30;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#2A3242; --surface:#353E50; --surface-2:#414B5E;
  --fg:#F3F4F1; --muted:#C5CAD3; --line:#4C5669;
  --accent:#A9DAD0; --on-accent:#17302B;
  --a0:#5F7DBE; --b0:#3F8E9C;
  --c-sink:#4F6A8C;  --c-sink2:#3F4F66;
  --c-fear:#655A8E;  --c-fear2:#4C466A;
  --c-pile:#7F6740;  --c-pile2:#5E4F36;
  --c-high:#736A39;  --c-high2:#5F5935;
  --c-calm:#437260;  --c-calm2:#3A5A4E;
  --c-warm:#8F5F4C;  --c-warm2:#694A3E;
  --nt-bg:#383A2E; --nt-fg:#F4F1E7; --nt-line:#9DB874; --nt-bar1:#55653A; --nt-bar2:#6A6038; --nt-btn:#4A4A30;
  color-scheme: dark;
}
body{background:var(--bg);margin:0}

html{font-size:16px}
html.large{font-size:19px}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:400 1rem/1.75 var(--font-body);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
button,input,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.shell{--a:var(--a0);--b:var(--b0);position:relative;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:6px 9rem}
[data-e="sink"]{--a:var(--c-sink);--b:var(--c-sink2);--pa:#8FB0D6;--pb:#DCE9F7}
[data-e="fear"]{--a:var(--c-fear);--b:var(--c-fear2);--pa:#A99BDB;--pb:#E3DDF6}
[data-e="pile"]{--a:var(--c-pile);--b:var(--c-pile2);--pa:#E0B060;--pb:#F7E6C2}
[data-e="high"]{--a:var(--c-high);--b:var(--c-high2);--pa:#EFD053;--pb:#FBF0B0}
[data-e="calm"]{--a:var(--c-calm);--b:var(--c-calm2);--pa:#7CCBA6;--pb:#D4F0E3}
[data-e="warm"]{--a:var(--c-warm);--b:var(--c-warm2);--pa:#F29B7B;--pb:#FBDCCD}

.aura{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity .8s ease;
  background:radial-gradient(120% 60% at 10% -5%,var(--a) 0%,transparent 66%),radial-gradient(100% 55% at 105% 8%,var(--b) 0%,transparent 64%),linear-gradient(180deg,color-mix(in srgb,var(--b) 45%,var(--bg)) 0%,var(--bg) 88%)}
.shell[data-late="1"] .aura{opacity:.6}
.col{position:relative;z-index:1;max-width:30rem;margin-inline:auto}

.top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-block:.9rem .2rem}
.mark{display:flex;align-items:center;gap:.4rem;color:var(--accent);font-family:var(--font-display);font-weight:700;font-size:1.2rem}
.top{flex-wrap:wrap}
.nav{display:flex;gap:.15rem;padding:.2rem;border-radius:999px;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line)}
.nav button{background:none;border:0;color:var(--muted);font-size:.88rem;padding:.4rem .85rem;min-height:40px;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease}
.nav button[aria-current="page"]{background:var(--accent);color:var(--on-accent)}

.date{padding-top:1.6rem}
.dow{font-size:.85rem;color:var(--muted);letter-spacing:.06em}
.dd{font-family:var(--font-display);font-weight:700;font-size:clamp(2.5rem,12vw,3.5rem);line-height:1.15;font-variant-numeric:tabular-nums}
hr.rule{border:0;border-top:1px solid var(--line);margin:1rem 0 1.7rem}

.ask{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1.4;margin:0 0 1.3rem;text-wrap:balance}
.hint{color:var(--muted);font-size:.92rem;margin:1.3rem 0 0}
.lbl{font-size:.78rem;letter-spacing:.06em;color:var(--muted);margin-bottom:.45rem}

.picker{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem .5rem}
.sb{background:none;border:0;color:var(--fg);display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:.4rem 0;min-height:44px;cursor:pointer}
.sb .dot{width:4.2rem;height:4.2rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--b),var(--a));transition:transform .25s ease}
.sb:hover .dot{transform:scale(1.06)}
.sb .nm{font-size:.95rem}

.card{position:relative;border-radius:1.25rem;padding:1.5rem 1.4rem 1.1rem;background:linear-gradient(160deg,var(--a),var(--b));color:var(--fg);border:1px solid var(--line)}
.card.fade{animation:rise .6s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.c-label{font-size:.78rem;letter-spacing:.06em;margin-bottom:1.6rem}
.c-title{font-family:var(--font-display);font-weight:700;font-size:1.55rem;line-height:1.35;margin:0 0 .8rem;text-wrap:balance}
.c-story{margin:0;line-height:1.85}
.c-brand{margin-top:1.6rem;font-size:.72rem;letter-spacing:.08em;text-align:right}

.seed{margin-top:2rem}
.s-text{font-family:var(--font-display);font-size:1.3rem;line-height:1.5;margin:0 0 .3rem;text-wrap:balance}
.s-meta{font-size:.85rem;color:var(--muted);margin:0 0 1.1rem}
.end{margin:1.6rem 0 0;font-family:var(--font-display);font-size:1.6rem;line-height:1.4}
.end small{display:block;font-family:var(--font-body);font-size:.95rem;color:var(--muted);margin-top:.35rem}

.row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.row.center{justify-content:center}
.btn{border:1px solid transparent;background:var(--accent);color:var(--on-accent);padding:.7rem 1.3rem;min-height:44px;border-radius:999px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn:disabled{opacity:.4;cursor:default}
.seedcard{background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--line);border-radius:1.2rem;padding:1.1rem 1.2rem 1.2rem}
.s-label{display:flex;align-items:center;gap:.4rem;color:var(--accent);font-weight:700;font-size:1rem;margin-bottom:.7rem}
.seedcard .s-text{font-size:1.45rem;color:var(--fg);margin:0 0 .2rem}
.seedcard .s-meta{margin:0 0 1rem}
.flip{animation:rise .5s ease both}
.row.sub{margin-top:1.1rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:.55rem 1rem;min-height:44px;font-size:.92rem;cursor:pointer}
.chip small{color:var(--muted);font-size:.78rem;margin-left:.1rem}
.chip.off{color:var(--muted);border-style:dashed;cursor:default}
.chip:hover:not(.off){border-color:var(--accent)}
.link{background:none;border:0;color:var(--muted);font-size:.9rem;text-decoration:underline;text-underline-offset:.3em;padding:.6rem .2rem;min-height:44px;cursor:pointer}

.askbox{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.1rem 0;margin-bottom:1.8rem}
.askbox p{margin:0 0 .8rem}

.support{margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.support.strong{color:var(--fg);border-top-color:var(--accent)}
.support p{margin:0 0 .5rem}
.nums{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin:.3rem 0 0;padding:0;list-style:none}
.num{font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;pointer-events:none;
  padding:2.2rem max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:linear-gradient(to top,var(--bg) 45%,transparent)}
.dock button{pointer-events:auto;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:.8rem 1.9rem;min-height:48px;cursor:pointer;box-shadow:0 2px 14px rgba(0,0,0,.07)}

.pulse{padding-top:.6rem}
.ring{width:9rem;height:9rem;border-radius:50%;margin:1.6rem auto 1.4rem;background:radial-gradient(circle at 40% 35%,var(--c-calm2),var(--c-calm));animation:breathe 10s ease-in-out infinite}
@keyframes breathe{0%{transform:scale(.78)}40%{transform:scale(1.12)}100%{transform:scale(.78)}}
.breath{text-align:center;color:var(--muted);margin:0 0 1.5rem}
.evid{font-family:var(--font-display);font-size:1.25rem;line-height:1.55;text-align:center;margin:0 0 1.2rem;text-wrap:balance}
.evid.left{text-align:left}
.later{text-align:center;margin:0 0 1.4rem}
.later small{display:block;color:var(--muted);font-size:.88rem;margin-top:.3rem}
.panel{margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.panel p{margin:.2rem 0 .8rem;font-size:.92rem;color:var(--muted)}

.pi{padding:1.2rem 0;border-bottom:1px solid var(--line)}
.pi-d{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted)}
.pi-d i{width:.75rem;height:.75rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--b),var(--a));border:1px solid var(--line)}
.pi h3{font-family:var(--font-display);font-size:1.2rem;line-height:1.4;margin:.4rem 0 .3rem}
.pi p{margin:0;font-size:.97rem}
.pi .ps{margin-top:.5rem;font-size:.88rem;color:var(--muted)}

.set{padding-block:1.2rem;border-bottom:1px solid var(--line)}
.set h3{font-family:var(--font-display);font-size:1.1rem;margin:0 0 .6rem}
.set p{margin:0 0 .7rem;font-size:.95rem;color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{background:transparent;color:var(--fg);border:0;padding:.55rem 1.2rem;min-height:44px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
input[type=text]{width:100%;max-width:20rem;padding:.7rem .9rem;min-height:44px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:.7rem}
textarea{width:100%;padding:.8rem .9rem;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:.7rem;line-height:1.7;resize:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.story{min-height:8.5rem;display:flex;flex-direction:column;justify-content:center;margin-bottom:.6rem}
.story .big{font-family:var(--font-display);font-size:1.3rem;line-height:1.65;color:var(--fg);margin:0;text-wrap:balance}
.story .by{margin:.8rem 0 0;font-size:.9rem}
.cnt{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* 첫 화면은 가운데 정렬. '지금 힘들어요'가 없는 화면이라 .shell의 아래 여백을 없애고 한 화면에 담는다. */
.shell:has(.intro){padding-block:0}
.intro{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:100vh;min-height:100dvh;padding-block:1rem 5vh}
.intro .row{justify-content:center}
.intro-mark{color:var(--accent)}
.slogan{font-family:var(--font-display);font-weight:700;font-size:clamp(2.3rem,11vw,3.2rem);line-height:1.3;color:var(--fg);margin:1.4rem 0 0}
.intro-tag{color:var(--muted);font-size:.95rem;margin:1.1rem 0 2.2rem}
.fine{color:var(--muted);font-size:.85rem;margin:1.2rem 0 0}

/* 돌아왔을 때 쪽지: 이 창만 작은 Y2K 창이다. 새싹 연두와 버터색 안에서만 쓴다.
   '지금 힘들어요'(.dock)는 쪽지 위에 남겨 언제든 누를 수 있게 한다. */
.nt-wrap{position:fixed;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;overflow-y:auto;
  padding:1rem max(16px,env(safe-area-inset-right,0px)) 6.5rem max(16px,env(safe-area-inset-left,0px));
  background:color-mix(in srgb,var(--bg) 62%,transparent)}
.nt{width:100%;max-width:21rem;margin:auto;background:var(--nt-bg);color:var(--nt-fg);border:3px solid var(--nt-line);border-radius:.4rem;box-shadow:4px 4px 0 color-mix(in srgb,var(--nt-line) 35%,transparent)}
.nt:focus{outline:0}
.nt :focus-visible{outline-color:var(--nt-line)}
.nt-bar{display:flex;align-items:center;justify-content:space-between;padding-left:.7rem;border-bottom:3px solid var(--nt-line);background:linear-gradient(90deg,var(--nt-bar1),var(--nt-bar2));font-size:.78rem;letter-spacing:.04em}
.nt-x{display:flex;align-items:center;justify-content:center;width:44px;height:36px;min-height:44px;padding:0;background:none;border:0;color:inherit;cursor:pointer}
.nt-x span{display:flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;font-size:.8rem;line-height:1;border:2px solid var(--nt-line);border-radius:.2rem;background:var(--nt-bg)}
.nt-body{padding:1.3rem 1.1rem 1.1rem}
.nt-text{font-family:var(--font-display);font-size:1.2rem;line-height:1.65;margin:0 0 1.2rem;min-height:4rem;text-wrap:pretty}
.nt-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.5rem 1rem;background:var(--nt-btn);color:var(--nt-fg);border:2px solid var(--nt-line);border-radius:.3rem;cursor:pointer}
.nt-ans{display:grid;gap:.5rem}
.nt-nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.nt-skip{color:inherit}
.conn{margin-top:.8rem}
.conn .btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.conn-seed{margin-top:1.3rem}
.sw-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.95rem}
.sw{flex:none;display:flex;align-items:center;width:3.2rem;min-height:44px;padding:0;background:none;border:0;cursor:pointer}
.sw i{display:block;position:relative;width:100%;height:1.7rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);transition:background .2s ease}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:calc(1.7rem - 6px);height:calc(1.7rem - 6px);border-radius:50%;background:var(--muted);transition:transform .2s ease}
.sw[aria-checked="true"] i{background:var(--accent);border-color:var(--accent)}
.sw[aria-checked="true"] i::after{background:var(--on-accent);transform:translateX(1.5rem)}

/* 다크 모드: 배경은 물감이 번진 듯하게, 동그라미와 카드는 밝은 파스텔로. 물감 색은 고른 감정(--a, --b)을 따른다. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .aura{background:
    radial-gradient(78% 38% at 6% 0%,color-mix(in srgb,var(--a) 68%,transparent) 0%,transparent 74%),
    radial-gradient(70% 34% at 100% 10%,color-mix(in srgb,var(--b) 68%,transparent) 0%,transparent 72%),
    radial-gradient(52% 24% at 46% 28%,rgba(132,112,196,.40) 0%,transparent 76%),
    radial-gradient(70% 28% at 94% 50%,rgba(84,140,190,.42) 0%,transparent 74%),
    radial-gradient(66% 28% at 4% 68%,rgba(128,108,190,.38) 0%,transparent 74%),
    radial-gradient(76% 26% at 72% 98%,rgba(66,146,158,.36) 0%,transparent 76%),
    var(--bg)}
  :root:not([data-theme="light"]) .sb .dot{background:radial-gradient(circle at 35% 30%,var(--pb),var(--pa));box-shadow:0 0 22px color-mix(in srgb,var(--pa) 33%,transparent)}
  :root:not([data-theme="light"]) .card{background:linear-gradient(160deg,var(--pa),var(--pb));color:#232826;border-color:transparent}
  :root:not([data-theme="light"]) .pi-d i{background:radial-gradient(circle at 35% 30%,var(--pb),var(--pa))}
  :root:not([data-theme="light"]) .ring{background:radial-gradient(circle at 40% 35%,var(--pb),var(--pa))}
  :root:not([data-theme="light"]) .shell[data-late="1"] .sb .dot{opacity:.78;box-shadow:none}
  :root:not([data-theme="light"]) .shell[data-late="1"] .card{filter:brightness(.86)}
}
:root[data-theme="dark"] .aura{background:
  radial-gradient(78% 38% at 6% 0%,color-mix(in srgb,var(--a) 68%,transparent) 0%,transparent 74%),
  radial-gradient(70% 34% at 100% 10%,color-mix(in srgb,var(--b) 68%,transparent) 0%,transparent 72%),
  radial-gradient(52% 24% at 46% 28%,rgba(132,112,196,.40) 0%,transparent 76%),
  radial-gradient(70% 28% at 94% 50%,rgba(84,140,190,.42) 0%,transparent 74%),
  radial-gradient(66% 28% at 4% 68%,rgba(128,108,190,.38) 0%,transparent 74%),
  radial-gradient(76% 26% at 72% 98%,rgba(66,146,158,.36) 0%,transparent 76%),
  var(--bg)}
:root[data-theme="dark"] .sb .dot{background:radial-gradient(circle at 35% 30%,var(--pb),var(--pa));box-shadow:0 0 22px color-mix(in srgb,var(--pa) 33%,transparent)}
:root[data-theme="dark"] .card{background:linear-gradient(160deg,var(--pa),var(--pb));color:#232826;border-color:transparent}
:root[data-theme="dark"] .pi-d i{background:radial-gradient(circle at 35% 30%,var(--pb),var(--pa))}
:root[data-theme="dark"] .ring{background:radial-gradient(circle at 40% 35%,var(--pb),var(--pa))}
:root[data-theme="dark"] .shell[data-late="1"] .sb .dot{opacity:.78;box-shadow:none}
:root[data-theme="dark"] .shell[data-late="1"] .card{filter:brightness(.86)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}