/* FFFF: find a fortunate day, then prepare for it through four personal guides. */
body[data-view=home] .top { display:none; }
body[data-view=home],body.app[data-view=home] { height:auto; min-height:100dvh; overflow:auto; }
body[data-view=home] main,body.app[data-view=home] main { height:auto; max-width:none; padding:0; }
#view-home.on,body.app[data-view=home] #view-home.on { height:auto; min-height:100dvh; padding:0; overflow:clip; animation:none; }
.home-screen { position:relative; isolation:isolate; min-height:100dvh; max-width:1600px; margin:auto; padding:24px 36px 14px; display:grid; grid-template-rows:auto 1fr auto; }
.home-header { display:flex; align-items:center; gap:22px; min-height:48px; }
.home-brand-lockup { display:flex; align-items:center; gap:18px; min-width:0; }
.home-mirror-mark { display:flex; align-items:center; gap:3px; flex:none; width:140px; color:var(--space); }
.home-mirror-mark svg { display:block; width:calc((100% - 9px)/4); height:auto; overflow:visible; fill:none; stroke:currentColor; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; transform-box:fill-box; transform-origin:center; animation:home-brand-mirror 7.2s cubic-bezier(.45,0,.3,1) infinite both; }
.home-mirror-mark svg:nth-child(2) { animation-delay:.12s; }
.home-mirror-mark svg:nth-child(3) { animation-delay:.24s; }
.home-mirror-mark svg:nth-child(4) { animation-delay:.36s; }
.home-brand-line { font:700 18px/1.15 Gaegu,cursive; color:var(--space); white-space:nowrap; }
.home-brand-line b { color:var(--raspberry); font-weight:700; }
.home-header>a { margin-left:auto; font-size:11px; color:var(--muted); text-decoration:none; padding:12px 0; }
.home-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows:1fr auto 1fr; gap:20px 4%; align-items:center; max-width:1400px; width:100%; margin:24px auto; }
.home-copy { grid-column:1; grid-row:1 / 3; align-self:end; padding-left:4%; }
.home-eyebrow { margin:0 0 16px; font:700 21px/1.3 Gaegu,cursive; color:#426f79; }
.home-copy h1 { font-size:clamp(36px,3.6vw,57px); line-height:1.17; font-weight:750; letter-spacing:-.065em; margin:0; word-break:keep-all; }
.home-copy h1 em { font-style:normal; color:var(--raspberry); }
.home-lead { font-size:14px; line-height:1.8; margin:18px 0 0; color:var(--muted); word-break:keep-all; }
.home-lead-hook { display:block; margin-top:8px; font-size:12px; font-weight:650; color:var(--space); }
.home-four { margin-top:26px; max-width:520px; text-align:left; }
.home-four-intro { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:5px 10px; margin:0 0 10px; font-size:11px; color:var(--space); }
.home-four-intro small { font:700 15px/1.2 Gaegu,cursive; color:#426f79; }
.home-four-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.home-f-tab { --f-paper:#f5dedb; position:relative; min-width:0; padding:12px 3px 11px; display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--space); background:var(--f-paper); border:1px solid transparent; border-radius:28px 28px 12px 12px; cursor:pointer; transition:transform .25s,box-shadow .25s; font-family:var(--font); }
.home-f-tab:nth-child(2) { --f-paper:var(--honey); }
.home-f-tab:nth-child(3) { --f-paper:#dcecef; }
.home-f-tab:nth-child(4) { --f-paper:var(--space); color:var(--honey); }
.home-f-tab[aria-selected=true] { box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--raspberry); }
.home-f-tab[aria-selected=true]::after { content:''; position:absolute; bottom:-14px; left:calc(50% - 4px); width:8px; height:8px; background:var(--raspberry); border-radius:50%; }
.home-f-letter { display:block; position:relative; isolation:isolate; width:100%; text-align:center; font:800 49px/1 Syne,var(--font); }
.home-f-letter i { position:absolute; z-index:-1; right:9%; top:-1px; font:700 45px/1.2 var(--hanja),serif; opacity:.12; transform:rotate(12deg); }
.home-f-tab[aria-selected=true] .home-f-letter { animation:home-f-breathe 5s ease-in-out infinite; }
.home-f-tab>b { font-size:12px; font-weight:750; letter-spacing:-.03em; }
.home-f-tab>small { font-size:10px; line-height:1.4; word-break:keep-all; }
.home-four-panels { margin-top:19px; }
.home-f-panel { display:grid; grid-template-columns:minmax(0,1fr) 112px; align-items:center; gap:8px; min-height:150px; padding:17px 16px; border:1px solid #01264115; border-radius:18px; background:#ffffff8c; animation:home-feature-in .3s ease-out both; }
.home-f-panel[hidden] { display:none; }
.home-f-explain>span { font-size:9px; font-weight:650; letter-spacing:.03em; color:#426f79; }
.home-f-explain h2 { font-size:18px; font-weight:750; letter-spacing:-.05em; line-height:1.4; word-break:keep-all; margin:8px 0; }
.home-f-explain p { font-size:11px; line-height:1.8; word-break:keep-all; color:var(--muted); margin:0; }
.home-f-art { min-width:0; }
.home-f-art svg { width:100%; height:auto; display:block; overflow:visible; }
.home-art-swatches { display:flex; justify-content:center; gap:7px; }
.home-art-swatches i { width:15px; height:15px; background:var(--honey); border-radius:48% 52% 45% 55%; border:1px solid #01264115; animation:home-f-breathe 4s ease-in-out infinite; }
.home-art-swatches i:nth-child(2) { background:var(--coral); animation-delay:-1s; }
.home-art-swatches i:nth-child(3) { background:var(--harbor); animation-delay:-2s; }
.home-f-art .feature-spark { transform-box:fill-box; transform-origin:center; animation:home-feature-spark 5s ease-in-out infinite; }
.home-f-art .feature-date-ring { transform-box:fill-box; transform-origin:center; animation:home-date-ring 4s ease-in-out infinite; }
.home-f-tab:focus-visible,.home-f-panel:focus-visible { outline:2px solid var(--space); outline-offset:6px; }
@media(hover:hover) { .home-f-tab:hover { transform:translateY(-3px); } }
.home-showcase { grid-column:2; grid-row:1 / 4; min-width:0; }
.home-showcase-note { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:4px 12px; margin-bottom:16px; padding-inline:18px; font:700 20px/1.4 Gaegu,cursive; color:#426f79; }
.home-showcase-note small { font:500 9px/1.5 var(--font); border:1px solid #01264125; border-radius:6px; padding:2px 5px; }
.home-card-slider { --card-height:clamp(400px,61vh,590px); --card-width:calc(var(--card-height)*.666667); position:relative; display:flex; gap:22px; width:100%; padding:10px max(24px,calc((100% - var(--card-width))/2)) 6px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.home-card-slider::-webkit-scrollbar { display:none; }
.home-card-slider:focus-visible { outline:2px solid var(--raspberry); outline-offset:4px; border-radius:24px; }
.home-slider-controls { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:4px; }
.home-slider-controls>button { width:44px; height:44px; border:1px solid #01264120; border-radius:50%; background:var(--paper); color:var(--space); font-size:20px; cursor:pointer; }
.home-slider-controls>button:disabled { opacity:.3; cursor:default; }
.home-slider-dots { display:flex; gap:0; }
.home-slider-dots button { display:grid; place-items:center; width:34px; height:44px; padding:0; background:none; border:0; cursor:pointer; }
.home-slider-dots i { display:block; width:6px; height:6px; background:#0126412b; border-radius:50%; transition:width .25s,background .25s; }
.home-slider-dots button[aria-current=true] i { width:20px; border-radius:8px; background:var(--raspberry); }
.home-card-caption { text-align:center; margin:8px 0 0; font-size:10px; color:var(--muted); }
.home-login { grid-column:1; grid-row:3; align-self:start; display:grid; justify-items:start; gap:10px; padding-left:4%; max-width:430px; }
.home-login .g-btn { width:100%; justify-content:center; min-height:54px; padding:15px 24px; border-radius:16px; background:var(--space); color:white; border:1px solid var(--space); font-size:15px; box-shadow:none; }
.home-login .g-logo { background:white; padding:2px; border-radius:50%; width:22px; height:22px; }
.home-guest { justify-self:center; font-size:12px; color:var(--space); padding:5px 12px; text-decoration:none; }
.home-login>p { text-align:center; justify-self:center; font-size:9px; line-height:1.6; color:var(--muted); margin:0; }
.home-login>p a { color:inherit; }
.home-footer { display:flex; align-items:center; justify-content:space-between; min-height:32px; font-size:9px; letter-spacing:.1em; color:var(--muted); }
#home-motion-slot .motion-toggle { position:static; background:transparent; backdrop-filter:none; font-size:10px; min-height:30px; }
.home-atmosphere { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.home-type-track { position:absolute; top:44%; left:-20%; width:max-content; white-space:nowrap; color:var(--space); opacity:.028; font:800 clamp(150px,22vw,330px)/1 Syne,var(--font); letter-spacing:-.08em; animation:home-type-flow 60s linear infinite alternate; }
.home-orbit { position:absolute; width:620px; height:620px; right:-90px; top:16%; border:1px solid #7EACB522; border-radius:50%; animation:home-orbit-breathe 12s ease-in-out infinite alternate; }
.home-orbit.two { width:750px; height:750px; right:-155px; top:8%; border-color:#C968681a; animation-delay:-5s; }
.home-ambient-star { position:absolute; left:39%; top:18%; font-size:38px; color:var(--coral); opacity:.4; animation:hub-star 7s ease-in-out infinite; }

/* Two sides stay mounted. Only the visible side is exposed to assistive technology. */
.fortune-sample { container-type:inline-size; width:var(--card-width); height:calc(var(--card-height) + 44px); flex:0 0 var(--card-width); scroll-snap-align:center; position:relative; perspective:1200px; }
.fortune-flipper { position:relative; width:100%; height:var(--card-height); transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.75,.2,1); }
.fortune-sample.is-flipped .fortune-flipper { transform:rotateY(180deg); }
.fortune-face { position:absolute; inset:0; border-radius:28px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.fortune-front { background:#ddd7ce; color:white; transform:rotateY(0); }
.fortune-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.fortune-front::after { content:''; position:absolute; inset:38% 0 0; background:linear-gradient(transparent,#01264130 30%,#012641eb 100%); pointer-events:none; }
.fortune-watermark { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; color:#fff3cc; opacity:.18; z-index:1; }
.fortune-foil { position:absolute; inset:0; background:url('/img/ffff/talisman-foil.png') center/100% 100% no-repeat; opacity:.16; mix-blend-mode:screen; pointer-events:none; z-index:1; }
.fortune-front-brand { position:absolute; top:7%; right:7%; color:white; font:800 6cqw/1 Syne,var(--font); text-shadow:0 1px 4px #01264130; z-index:2; }
.fortune-rank { position:absolute; top:4%; left:5%; width:22%; aspect-ratio:1; color:var(--paper); background:var(--space); border-radius:18%; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; gap:.8cqw; }
.fortune-rank small { font-size:1.8cqw; letter-spacing:.1em; line-height:1; }
.fortune-rank b { font:800 11cqw/.85 Syne,var(--font); }
.fortune-rank em { font:600 2.2cqw/1 var(--font); font-style:normal; }
.fortune-rank.rank-s { width:25%; top:3%; left:4%; background:var(--raspberry); border-radius:0; clip-path:polygon(50% 0,60% 7%,72% 4%,79% 15%,91% 18%,93% 31%,100% 40%,95% 51%,100% 63%,90% 72%,88% 84%,75% 87%,66% 97%,54% 94%,43% 100%,32% 92%,20% 92%,15% 80%,4% 74%,7% 61%,0 50%,7% 39%,4% 27%,17% 21%,21% 9%,35% 9%); }
.fortune-rank.rank-s::before { content:''; position:absolute; inset:9%; border:1px solid #FADFA1c0; border-radius:50%; }
.fortune-rank.rank-s::after { content:''; position:absolute; inset:-20%; background:linear-gradient(110deg,transparent 40%,#fff6d870 50%,transparent 60%); transform:translateX(-80%); animation:rank-foil 7s ease-in-out infinite; }
.fortune-front-info { position:absolute; inset:auto 7% 5%; z-index:2; }
.fortune-front-info>time { display:block; font-size:3cqw; letter-spacing:.06em; margin-bottom:4cqw; color:#ffffffdb; }
.fortune-tag-score { display:flex; align-items:flex-end; justify-content:space-between; gap:3cqw; }
.fortune-tag-score>span { display:flex; flex-direction:column; gap:2cqw; }
.fortune-tag-score>span small { font-size:2.5cqw; color:#ffffffbf; }
.fortune-tag-score strong { font-size:6.5cqw; letter-spacing:-.04em; font-weight:750; line-height:1.2; }
.fortune-tag-score>b { flex-shrink:0; font:800 15cqw/.9 Syne,var(--font); letter-spacing:-.05em; }
.fortune-tag-score>b small { font:600 3cqw/1 var(--font); margin-left:.8cqw; letter-spacing:0; }
.fortune-front-element { display:flex; gap:2cqw; align-items:center; margin-top:4cqw; padding-top:3cqw; border-top:1px solid #ffffff35; }
.fortune-front-element>span { font:800 7cqw/1 var(--hanja),serif; color:var(--honey); }
.fortune-front-element b { font-size:3cqw; font-weight:500; color:#fff8e6; }
.fortune-front-palette { display:flex; flex-wrap:wrap; gap:2cqw 3cqw; margin-top:3cqw; }
.fortune-front-palette>span { display:flex; align-items:center; gap:1.3cqw; font-size:2.5cqw; }
.fortune-front-palette i { display:block; width:3cqw; height:3cqw; border:1px solid #ffffffc0; border-radius:50%; }
.fortune-flip-button { position:absolute; bottom:0; width:100%; height:38px; background:transparent; border:0; color:var(--space); font:600 11px/1 var(--font); cursor:pointer; }
.fortune-flip-button span { display:inline-block; font-size:16px; margin-left:6px; vertical-align:middle; }
.fortune-flip-button:focus-visible,.home-slider-controls button:focus-visible,.home-login a:focus-visible { outline:2px solid var(--raspberry); outline-offset:2px; border-radius:12px; }
.fortune-back { display:flex; flex-direction:column; justify-content:space-between; gap:2.4cqw; padding:6.5%; color:var(--space); background:#fff9e9; border:1px solid #e1d6bd; transform:rotateY(180deg); }
.fortune-back>.fortune-watermark { opacity:.08; color:var(--raspberry); }
.fortune-back-head { display:flex; justify-content:space-between; gap:2cqw; font-size:2.3cqw; font-weight:650; }
.fortune-back-title { display:flex; align-items:center; justify-content:space-between; gap:3cqw; }
.fortune-back-title small { display:block; font-size:2.5cqw; font-weight:500; }
.fortune-back-title h3 { margin:1.4cqw 0 0; font-size:7cqw; line-height:1.15; letter-spacing:-.05em; }
.fortune-back-title>strong { font:800 12cqw/1 Syne,var(--font); color:var(--raspberry); }
.fortune-back-title>strong small { display:inline; font:500 2.6cqw/1 var(--font); color:var(--muted); margin-left:1cqw; }
.fortune-back .fortune-back-desc { margin:0; font-size:3cqw; line-height:1.55; color:var(--muted); }
.fortune-balance-label { display:flex; flex-direction:column; gap:.8cqw; padding-top:2cqw; border-top:1px solid #01264118; font-size:3cqw; }
.fortune-balance-label span { color:var(--muted); font-size:2.5cqw; }
.fortune-elements { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.8cqw; }
.fortune-element { display:flex; flex-direction:column; align-items:center; gap:1.2cqw; color:var(--element-ink); font-size:3cqw; }
.element-charm { display:grid; place-items:center; position:relative; width:100%; height:15cqw; background:var(--element-paper); border-radius:45% 45% 20% 20%; }
.element-charm b { font:800 7cqw/1 var(--hanja),serif; animation:element-charm-bob 5s ease-in-out infinite; }
.fortune-element:nth-child(2n) .element-charm b { animation-delay:-2s; }
.element-charm i { position:absolute; left:18%; right:18%; bottom:10%; height:3px; border-radius:4px; background:linear-gradient(to right,var(--element-ink) var(--element-fill),#ffffff99 var(--element-fill)); }
.fortune-element.is-helpful .element-charm { outline:1px solid var(--element-ink); outline-offset:2px; }
.fortune-element strong { font-size:3.5cqw; }
.fortune-back-tip { display:flex; gap:3cqw; align-items:center; padding:2.8cqw; border:1px solid #0126411a; border-radius:12px; }
.fortune-tip-glyph { font:800 9cqw/1 var(--hanja),serif; color:var(--coral); }
.fortune-back-tip b { font-size:3.1cqw; line-height:1.4; display:block; }
.fortune-back-tip p { margin:1cqw 0 0; font-size:2.5cqw; line-height:1.5; color:var(--muted); }
.fortune-back-colors { display:flex; gap:2cqw; flex-wrap:wrap; }
.fortune-back-colors span { display:flex; align-items:center; gap:1cqw; font-size:2.5cqw; }
.fortune-back-colors i { width:3cqw; height:3cqw; border-radius:50%; border:1px solid #01264125; }
.fortune-back .fortune-action { margin:0; font-size:3cqw; line-height:1.55; }
.fortune-action b { display:block; font-size:3cqw; margin-bottom:1cqw; }
.fortune-back-base { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5cqw; font-size:2.5cqw; color:var(--muted); border-top:1px solid #0126411a; padding-top:2cqw; }
.fortune-back .fortune-rank-key { font-size:2cqw; color:var(--muted); margin:0; line-height:1.5; }
@keyframes home-type-flow { to { transform:translateX(-25%); } }
@keyframes home-orbit-breathe { to { transform:scale(1.07) rotate(12deg); } }
@keyframes rank-foil { 0%,65% { transform:translateX(-80%); } 90%,100% { transform:translateX(80%); } }
@keyframes element-charm-bob { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-2px) rotate(3deg); } }
@keyframes home-f-breathe { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes home-feature-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes home-feature-spark { 0%,100% { transform:scale(.9) rotate(-8deg); } 50% { transform:scale(1.1) rotate(8deg); } }
@keyframes home-date-ring { 0%,100% { opacity:.25; transform:scale(.92); } 50% { opacity:.8; transform:scale(1.08); } }
/* The same three strokes read F from one side and ㅋ from the other. */
@keyframes home-brand-mirror {
  0%,16%,83%,100% { transform:rotateY(0); color:var(--space); }
  34%,65% { transform:rotateY(180deg); color:var(--raspberry); }
}
@media(max-width:960px) {
  .home-screen { padding:16px 24px 10px; }
  .home-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; margin:22px auto 12px; gap:22px; max-width:650px; }
  .home-copy { grid-column:1; grid-row:1; padding:0; text-align:center; }
  .home-eyebrow { font-size:18px; margin-bottom:10px; }
  .home-copy h1 { font-size:48px; }
  .home-lead { font-size:13px; margin-top:12px; }
  .home-four { margin:24px auto 0; }
  .home-showcase { grid-column:1; grid-row:2; }
  .home-showcase-note { margin-bottom:4px; font-size:17px; }
  .home-card-slider { --card-height:clamp(330px,51vh,475px); gap:18px; }
  .home-login { grid-column:1; grid-row:3; padding:0; justify-self:center; width:min(100%,380px); gap:6px; }
  .home-login .g-btn { min-height:50px; }
  .home-ambient-star { top:12%; left:9%; font-size:27px; }
  .home-footer { font-size:8px; }
}
@media(max-width:600px) {
  .home-screen { padding:calc(12px + env(safe-area-inset-top)) 18px calc(8px + env(safe-area-inset-bottom)); }
  .home-header { min-height:36px; gap:14px; }
  .home-brand-lockup { gap:12px; }
  .home-mirror-mark { width:104px; }
  .home-brand-line { font-size:15px; }
  .home-header>a { font-size:9px; }
  .home-layout { margin:14px 0 8px; gap:12px; }
  .home-copy h1 { font-size:clamp(29px,7.7vw,43px); line-height:1.18; letter-spacing:-.065em; }
  .home-eyebrow { font-size:16px; margin-bottom:8px; }
  .home-lead { font-size:12px; line-height:1.7; margin-top:12px; }
  .home-four { margin-top:23px; }
  .home-four-tabs { gap:7px; }
  .home-four-intro { font-size:10px; }
  .home-four-intro small { font-size:13px; }
  .home-f-tab { padding:12px 2px 10px; gap:5px; border-radius:25px 25px 10px 10px; }
  .home-f-letter { font-size:40px; }
  .home-f-letter i { font-size:35px; right:5%; }
  .home-f-tab>b { font-size:11px; }
  .home-f-tab>small { font-size:9px; letter-spacing:-.04em; }
  .home-f-panel { grid-template-columns:minmax(0,1fr) 88px; min-height:145px; padding:15px 12px; gap:6px; }
  .home-f-explain h2 { font-size:17px; }
  .home-f-explain p { font-size:11px; line-height:1.7; }
  .home-f-explain p br { display:none; }
  .home-showcase { margin:0 -18px; }
  .home-showcase-note { margin-top:10px; font-size:17px; }
  .home-card-slider { --card-height:clamp(315px,46dvh,435px); gap:16px; padding-top:6px; }
  .fortune-face { border-radius:22px; }
  .home-slider-controls { gap:10px; margin-top:0; }
  .home-slider-controls>button { width:36px; height:36px; font-size:17px; }
  .home-slider-dots button { height:36px; }
  .home-card-caption { font-size:9px; margin-top:2px; }
  .home-login { max-width:380px; }
  .home-login .g-btn { font-size:13px; min-height:48px; padding:12px; }
  .home-guest { font-size:11px; padding-block:3px; }
  .home-login>p { font-size:8px; }
  .home-type-track { top:36%; opacity:.035; font-size:165px; }
  .home-orbit { width:440px; height:440px; top:26%; right:-100px; }
  .home-orbit.two { width:540px; height:540px; top:20%; right:-150px; }
  .home-ambient-star { top:20%; left:5%; font-size:23px; }
  .home-footer { margin-top:8px; }
}
@media(max-width:600px) and (max-height:700px) {
  .home-lead { margin-top:7px; }
  .home-card-slider { --card-height:300px; }
  .home-eyebrow { display:none; }
  .home-layout { gap:9px; }
}
@media(prefers-reduced-motion:reduce) {
  #view-home *,#view-home *::before,#view-home *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .home-mirror-mark::after { content:'↔ ㅋㅋㅋㅋ'; font:700 13px/1 var(--font); white-space:nowrap; color:var(--raspberry); }
  .home-mirror-mark { flex-wrap:wrap; row-gap:6px; }
}
.motion-paused .home-mirror-mark { flex-wrap:wrap; row-gap:6px; }
.motion-paused .home-mirror-mark::after { content:'↔ ㅋㅋㅋㅋ'; font:700 13px/1 var(--font); white-space:nowrap; color:var(--raspberry); }