/* olo.house — 봉인된 감정서 */
:root{
  --charcoal:#1d1d1f; --alum:#6e6e73; --snow:#f5f5f7; --blue:#0071e3; --blue-h:#0077ed;
  --graphite:#424245; --line:#e8e8ed; --mid:#d2d2d7; --white:#fff;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Pretendard","Noto Sans KR",Helvetica,Arial,sans-serif;
  --bg-a:var(--white); --bg-b:var(--snow); --ink:var(--charcoal); --ink-2:var(--graphite); --ink-3:var(--alum);
  --dark:#111113; --dark-ink:#f5f5f7; --dark-ink-2:#a1a1a6;
  --accent:var(--blue); --hero-size:64px; --title-size:40px;
  --wax-ring:rgba(255,255,255,.34);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-a);color:var(--ink);font:400 17px/1.65 var(--sans);word-break:keep-all;overflow-wrap:anywhere}
.serif{font-family:"Songti SC","Noto Serif KR","Noto Serif",serif}
b{font-weight:600}
[hidden]{display:none!important}
button{font:inherit;color:inherit}

/* 내비 */
.nav{position:sticky;top:0;z-index:50;height:44px;display:flex;align-items:center;gap:12px;padding:0 20px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.brand{font-weight:600;font-size:17px;color:var(--charcoal);text-decoration:none;letter-spacing:-.01em}
.mybadge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:980px;background:var(--charcoal);color:#fff;font-size:12px}
.mybadge b{font-weight:400;font-size:14px;letter-spacing:.04em}
.nav-price{margin-left:auto;font-size:13px;color:var(--alum)}

/* 레이아웃 */
.sec{position:relative;padding:120px 20px;overflow:hidden}
.tone-a{background:var(--bg-a)} .tone-b{background:var(--bg-b)}
.tone-dark{background:var(--dark);color:var(--dark-ink)}
.wrap{position:relative;max-width:1024px;margin:0 auto}
.narrow{max-width:680px}
.narrow-block{max-width:680px;margin-left:auto;margin-right:auto}
.center{text-align:center}

/* 타이포 */
.eyebrow{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
.hero{margin:0 0 40px;font-size:var(--hero-size);line-height:1.1;font-weight:600;letter-spacing:-.02em}
.title{margin:0 0 24px;font-size:var(--title-size);line-height:1.2;font-weight:600;letter-spacing:-.01em}
.lead{margin:0 0 20px;font-size:19px;line-height:1.65}
.body{margin:0 0 20px;font-size:17px;color:var(--ink-2)}
.caption{margin:24px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3)}

/* 글자 쪼개 등장 */
.wd{display:inline-block;white-space:nowrap}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.w>i{display:inline-block;font-style:normal;transform:translateY(105%);transition:transform .7s var(--ease-out);transition-delay:calc(var(--k)*45ms)}
.split-in .w>i{transform:none}

/* 버튼 */
.pill{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:980px;padding:12px 24px;font-size:17px;text-decoration:none;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),filter .2s var(--ease)}
.pill-blue{background:var(--accent);color:#fff}
.pill-blue:hover{filter:brightness(1.08)}
.pill-ghost{background:transparent;color:var(--accent)}
.pill-ghost:hover{text-decoration:underline}
.pill-ghost-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--mid)}
.pill-sm{padding:4px 12px;font-size:13px}
.pill-lg{padding:16px 32px;font-size:19px}
.pill:focus-visible,.chip:focus-visible,.textlink:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.textlink{margin-top:24px;background:none;border:0;padding:4px 0;font-size:15px;color:var(--accent);cursor:pointer}
.textlink.inline{margin:0;font-size:13px}
.textlink:hover{text-decoration:underline}

/* 재방문 */
.welcome{background:var(--charcoal);color:#fff;padding:16px 20px}
.welcome .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.welcome-line{margin:0;font-size:15px}
.welcome-act{display:flex;align-items:center;gap:16px}
.welcome .textlink{margin:0;color:var(--mid)}

/* S1 */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:600px}
.chip{border:0;border-radius:980px;padding:16px 8px;background:var(--bg-b);font-size:17px;word-break:keep-all;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.tone-b .chip{background:var(--bg-a)}
.chip:hover{background:var(--line)}
.chip-other[aria-expanded="true"]{background:var(--charcoal);color:#fff}
.other{display:flex;gap:10px;max-width:600px;margin-top:16px}
.other input{flex:1;min-width:0;border:1px solid var(--mid);border-radius:12px;padding:14px 16px;font:inherit;font-size:17px;background:var(--white);color:var(--ink)}
.other input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.care{max-width:600px;margin-top:16px;padding:20px 24px;border-radius:18px;background:var(--bg-b);font-size:15px;line-height:1.6;color:var(--ink-2)}
.care p{margin:0 0 8px} .care p:last-child{margin:0} .care a{color:var(--accent)}
.kst{font-size:13px;color:var(--ink-3);white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--charcoal);color:#fff}
.ganzhi-strip{position:absolute;left:0;right:0;bottom:24px;overflow:hidden;pointer-events:none;opacity:.06}
.ganzhi-track{display:inline-block;white-space:nowrap;font:400 96px/1 "Songti SC","Noto Serif KR",serif;animation:gz 240s linear infinite}
@keyframes gz{to{transform:translateX(-50%)}}

/* S2 */
.birth{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:32px 0 16px}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-3)}
.field select{appearance:none;-webkit-appearance:none;min-width:96px;padding:12px 16px;border:1px solid var(--mid);border-radius:12px;background:var(--bg-a);font:400 17px var(--sans);color:var(--ink)}
.field:first-child select{min-width:120px}
.err{margin:0 0 16px;font-size:15px;font-weight:600}
.notes{margin:24px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-3)}
.notes li{margin:0 0 8px;padding-left:16px;position:relative}
.notes li::before{content:"";position:absolute;left:0;top:.66em;width:4px;height:4px;border-radius:50%;background:var(--mid)}

/* S3 봉인 풀기 — 고정 구간 */
.stage{position:relative;height:340vh;background:var(--dark);color:var(--dark-ink)}
.stage-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(52px,9svh,64px) 20px clamp(12px,4svh,40px);overflow:hidden}
.stage-to{position:absolute;top:clamp(52px,8.5svh,72px);left:0;right:0;margin:0;text-align:center;font-size:clamp(13px,2.1svh,17px);color:var(--dark-ink-2)}
.stage-gift{position:absolute;top:clamp(74px,12.5svh,104px);left:0;right:0;margin:0;text-align:center;font-size:clamp(18px,3.4svh,28px);font-weight:600;letter-spacing:-.01em}
.stage-art{position:relative;flex:none;width:min(560px,90vw,58svh);aspect-ratio:600/300;display:grid;place-items:center}
.seal-svg{position:absolute;width:44%;height:auto;overflow:visible;animation:breathe 10s ease-in-out infinite}
.seal-svg{color:var(--wax,var(--accent))}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.glyph-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.glyph{font-size:210px;fill:var(--dark-ink);fill-opacity:0;stroke:var(--dark-ink);stroke-width:1.2;stroke-dasharray:1600;stroke-dashoffset:1600}
.stage-copy{max-width:640px;text-align:center;opacity:0;transform:translateY(16px)}
.stage-ko{margin:clamp(2px,1svh,8px) 0 clamp(4px,1.4svh,12px);font-size:clamp(20px,3.9svh,32px);font-weight:600;letter-spacing:.02em}
.stage-nature{margin:0 0 clamp(4px,1.4svh,12px);font-size:clamp(13px,2.1svh,17px);line-height:1.6}
.stage-branch{margin:0 0 clamp(4px,1.8svh,16px);font-size:clamp(12px,1.85svh,15px);color:var(--dark-ink-2)}
.stage-honest{margin:0;font-size:clamp(11px,1.6svh,13px);color:var(--dark-ink-2)}
.stage-hint{position:absolute;bottom:clamp(8px,3.5svh,32px);left:0;right:0;margin:0;text-align:center;font-size:13px;color:var(--dark-ink-2)}

/* 네 기둥 — 닫힘 */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:40px 0}
.pil{border-radius:18px;background:var(--bg-b);padding:24px 16px;text-align:center}
.tone-b .pil{background:var(--bg-a)}
.pil .nm{display:block;font-size:13px;font-weight:600;color:var(--ink-3)}
.pil .gz{display:block;margin:12px auto;font-size:40px;line-height:1.2;font-weight:600}
.pil .gz.locked{width:2.4em;height:1.2em;border:1.5px dashed var(--mid);border-radius:8px;color:transparent}
.pil .mn{display:block;font-size:13px;line-height:1.5;color:var(--ink-2)}
.pil.open{background:var(--charcoal);color:#fff}
.pil.open .nm,.pil.open .mn{color:var(--mid)}
.keep{margin:40px auto 0;text-align:center}
.keep .caption{margin-top:8px}
.keep.saved .pill{box-shadow:none;background:var(--charcoal);color:#fff}

/* 숫자 */
.numgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.num-tile strong{display:inline-block;font-size:72px;line-height:1;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.num-tile span{margin-left:4px;font-size:17px;color:var(--dark-ink-2)}
.num-tile p{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--dark-ink-2)}

/* 쌓이는 카드 */
.stack{position:relative;max-width:720px;margin:40px auto 0}
.stack-card{position:sticky;top:96px;margin:0 0 24px;border-radius:18px;background:var(--bg-a);padding:40px;min-height:220px}
.stack-card:nth-child(2){top:120px} .stack-card:nth-child(3){top:144px}
.stack-card .num{font-size:13px;color:var(--ink-3)}
.stack-card h3{margin:8px 0 12px;font-size:28px;line-height:1.3;font-weight:600}
.stack-card p{margin:0;font-size:17px;line-height:1.7;color:var(--ink-2)}

/* 콜라주 */
.collage{position:relative;height:720px;margin:40px 0 0}
.shard{position:absolute;margin:0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);will-change:transform;aspect-ratio:var(--ar);
  clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-out)}
.shard.in{clip-path:inset(0)}
.shard img{display:block;width:100%;margin-top:var(--y)}
.shard figcaption{position:absolute;left:12px;bottom:8px;padding:2px 8px;border-radius:980px;background:rgba(29,29,31,.8);color:#fff;font-size:12px}
.s1{left:0;top:0;width:54%}
.s2{right:0;top:120px;width:42%}
.s3{left:8%;top:430px;width:48%}
.s4{right:4%;top:470px;width:44%}
.sample{margin:40px 0 0}
.sample img{display:block;width:100%;max-width:680px;margin:0 auto;height:auto;border-radius:12px}

/* 가격 */
.prices{display:grid;gap:12px;margin:40px 0 0}
.price{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;border-radius:18px;background:var(--bg-a);padding:20px 24px}
.price h3{margin:0;font-size:19px;font-weight:600}
.price p{grid-column:1;margin:4px 0 0;font-size:14px;color:var(--ink-3)}
.price strong{grid-column:2;grid-row:1/span 2;font-size:24px;font-weight:600}
.price.pick{box-shadow:inset 0 0 0 2px var(--charcoal)}
.price.pick h3::after{content:"맞춤";margin-left:8px;padding:2px 8px;border-radius:980px;background:var(--charcoal);color:#fff;font-size:11px;vertical-align:middle}
.assure{margin:24px 0 0;padding:20px 24px;list-style:none;border-radius:18px;background:var(--bg-a);font-size:15px;color:var(--ink-2)}
.assure li{margin:0 0 8px} .assure li:last-child{margin:0}
.cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:40px}

/* 오늘의 일진 */
.today-date{margin:0 0 8px;font-size:15px;color:var(--ink-3)}
.pillar-mid{margin:0 0 20px}
.pillar-mid .ko{font-size:40px;font-weight:600;letter-spacing:-.01em}
.pillar-mid .hz{font-size:32px;color:var(--ink-3);margin-left:8px}

.today-me{margin:32px auto 0;max-width:520px;text-align:left;border-top:1px solid var(--line,rgba(0,0,0,.12));padding-top:24px}
.today-me-k{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ink-3)}
.today-me-l{margin:0 0 12px;font-size:21px;line-height:1.5;font-weight:600;color:var(--ink);word-break:keep-all}
.today-me-l a{color:inherit}
.today-me-n{margin:0;font-size:13px;color:var(--ink-3)}
.today-act{margin:40px auto 0;max-width:520px;padding:28px 24px;border-radius:18px;background:var(--bg-b)}
.today-q{margin:0 0 8px;font-size:19px;font-weight:600;color:var(--ink)}
.today-a{margin:0 0 20px;font-size:15px;color:var(--ink-2)}
.today-price{white-space:nowrap;color:var(--ink)}

/* 낮은 창(가로로 눕힌 폰·작은 패널) — 위에서부터 쌓고 글 폭을 넓힌다 */
@media (max-height:560px){
  .stage-pin{justify-content:flex-start;padding-top:calc(clamp(74px,12.5svh,104px) + clamp(18px,3.4svh,28px)*1.4 + 16px)}
  .stage-copy{max-width:min(900px,94vw)}
  .stage-art{width:min(560px,90vw,50svh)}
}

/* 진행 알약 */
.sealbar{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border-radius:980px;
  background:rgba(29,29,31,.88);color:#fff;font-size:13px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:opacity .3s var(--ease)}
.sealbar.gone{opacity:0;pointer-events:none}
.sealbar svg{width:28px;height:28px;transform:rotate(-90deg)}
.sealbar circle{fill:none;stroke-width:3}
.sealbar .trk{stroke:rgba(255,255,255,.2)}
.sealbar .val{stroke:#fff;stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:94.25}

/* 시안 전환 */

.foot{padding:40px 20px 96px;background:var(--bg-b);border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--ink-3)}
.foot p{margin:0 0 4px}

/* 등장 */
.js .rise{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rise.in{opacity:1;transform:none}

/* ───── 테마: 키네틱 타이포 (Lando Norris 계열) ───── */
[data-theme="kinetic"]{--hero-size:112px;--title-size:64px}
[data-theme="kinetic"] .hero{line-height:.98;letter-spacing:-.04em}
[data-theme="kinetic"] .title{letter-spacing:-.03em}
[data-theme="kinetic"] .ganzhi-strip{opacity:.14}
[data-theme="kinetic"] .ganzhi-track{animation-duration:90s;font-size:140px}
[data-theme="kinetic"] .stage{background:#0a0a0b}
[data-theme="kinetic"] .num-tile strong{font-size:112px;color:var(--accent)}
[data-theme="kinetic"] .stack-card h3{font-size:40px;letter-spacing:-.02em}
[data-theme="kinetic"] .shard{border-radius:0}

/* ───── 테마: 오방색 컬러필드 (Dropbox Brand 계열) ───── */
[data-theme="obang"]{--o-blue:#1f4fb4;--o-red:#d62b2b;--o-yellow:#f2b705;--o-white:#f5f5f7;--o-black:#1d1d1f;
  --hero-size:80px;--title-size:48px;--dark-ink-2:rgba(245,245,247,.72)}
[data-theme="obang"] #s1{background:var(--o-yellow)}
[data-theme="obang"] #s1 .eyebrow{color:rgba(29,29,31,.6)}
[data-theme="obang"] #s1 .chip{background:rgba(255,255,255,.55)}
[data-theme="obang"] #s1 .chip[aria-pressed="true"]{background:var(--o-black)}
[data-theme="obang"] .stage{background:var(--o-black)}
[data-theme="obang"]{--wax:var(--o-red)}
[data-theme="obang"] #nums{padding:0}
[data-theme="obang"] #nums .wrap{max-width:none}
[data-theme="obang"] .numgrid{gap:0}
[data-theme="obang"] .num-tile{padding:64px 32px;min-height:320px}
[data-theme="obang"] .num-tile:nth-child(1){background:var(--o-blue)}
[data-theme="obang"] .num-tile:nth-child(2){background:var(--o-red)}
[data-theme="obang"] .num-tile:nth-child(3){background:var(--o-yellow);color:var(--o-black)}
[data-theme="obang"] .num-tile:nth-child(3) span,[data-theme="obang"] .num-tile:nth-child(3) p{color:rgba(29,29,31,.72)}
[data-theme="obang"] .num-tile:nth-child(4){background:var(--o-black)}
[data-theme="obang"] #p3{background:var(--o-red);color:#fff}
[data-theme="obang"] #p3 .eyebrow{color:rgba(255,255,255,.75)}
[data-theme="obang"] .stack-card{background:#fff;color:var(--o-black)}
[data-theme="obang"] .pill-blue{background:var(--o-black)}

/* 모바일 */
@media (max-width:734px){
  :root{--hero-size:44px;--title-size:32px}
  [data-theme="kinetic"]{--hero-size:60px;--title-size:40px}
  [data-theme="obang"]{--hero-size:48px;--title-size:34px}
  .sec{padding:64px 20px}
  .lead{font-size:17px}
  .nav{gap:8px}
  .nav-price{font-size:12px}
  .mybadge{font-size:11px;padding:2px 8px}
  .mybadge:not([hidden])~.nav-price{display:none}
  .mybadge:not([hidden]){margin-left:auto}
  .chips{grid-template-columns:repeat(2,1fr)}
  .chip-other{grid-column:1/-1}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .numgrid{grid-template-columns:repeat(2,1fr);gap:32px 16px}
  .num-tile strong{font-size:56px}
  [data-theme="kinetic"] .num-tile strong{font-size:72px}
  [data-theme="obang"] .num-tile{padding:40px 20px;min-height:0}
  .stage-gift{font-size:22px}
  .stack-card{padding:28px;top:72px}
  .stack-card:nth-child(2){top:88px} .stack-card:nth-child(3){top:104px}
  .stack-card h3{font-size:24px}
  .collage{height:auto;display:grid;gap:12px}
  .shard{position:relative;left:auto!important;right:auto!important;top:auto!important;width:100%!important;transform:none!important}
  .birth .pill{width:100%}
  .field{flex:1}
  .field select,.field:first-child select{min-width:0;width:100%}
  .ganzhi-track,[data-theme="kinetic"] .ganzhi-track{font-size:56px}
  .ganzhi-strip{bottom:8px}
  .sealbar{right:12px;bottom:20px}
}

@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  .w>i{transform:none;transition:none}
  .seal-svg,.ganzhi-track{animation:none}
  .shard{clip-path:none;transition:none}
}

[data-theme="kinetic"] #s1 .narrow{max-width:1024px}