/* The gate is a body sibling of the reading shell. Keep both widths equal. */
.gyeol-result-gate.is-generating{box-sizing:border-box;width:100%;max-width:var(--app-shell-width,448px);min-width:0;margin:0 auto 16px;border:0;border-radius:0;background:#fbf8f1;overflow:hidden;text-align:center}
.gyeol-result-gate.is-generating::before{content:'';position:absolute;inset:0 0 auto;height:340px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#fbf8f126,#fbf8f1 94%),url('assets/theme/hanji-landscape.webp') center 46%/cover no-repeat;opacity:.48}
.gyeol-result-gate.is-generating :is(.result-gate-art,.result-gate-symbol){display:none}
.gyeol-result-gate.is-generating .result-gate-copy{padding:22px 24px 20px;background:none;min-width:0;max-width:100%}
.gyeol-result-gate.is-generating .eyebrow{font:500 10px/1.6 var(--sans,sans-serif);letter-spacing:.2em;color:#7b785f;margin:0 0 8px}
.gyeol-result-gate.is-generating h2{font:500 clamp(22px,5.5vw,24px)/1.5 var(--serif,serif);letter-spacing:-.045em;max-width:345px;margin:0 auto 8px;text-wrap:balance;word-break:keep-all}
.gyeol-result-gate.is-generating .result-gate-message{font:400 13px/1.7 var(--sans,sans-serif);color:#697466;margin:0 auto 20px;max-width:315px;text-wrap:balance}
.generation-visual{position:relative;display:block;width:200px;height:126px;margin:0 auto 14px;pointer-events:none}
.generation-orbit{position:absolute;left:50%;top:7px;width:112px;height:112px;margin-left:-56px;border:1px solid #b9ac8566;border-radius:50%;background:radial-gradient(circle,#d8ddc842,transparent 70%)}
.generation-orbit::after{content:'';position:absolute;inset:-8px;border:1px dashed #c4b89255;border-radius:50%}
.generation-card{--card-x:0px;--card-y:0px;--card-turn:0deg;position:absolute;left:calc(50% - 31px);top:8px;width:62px;height:103px;border:1px solid #ad936b;border-radius:5px;background:#243a47 url('assets/tarot/korean-v2/back.webp') center/cover;box-shadow:0 6px 14px #34413424;transform:translate(var(--card-x),var(--card-y)) rotate(var(--card-turn));animation:generation-card-float 4.8s ease-in-out infinite;will-change:transform}
.generation-card:nth-of-type(2){--card-x:-42px;--card-y:9px;--card-turn:-16deg;animation-delay:-1.6s}
.generation-card:nth-of-type(3){z-index:2;animation-delay:-.8s}
.generation-card:nth-of-type(4){--card-x:42px;--card-y:9px;--card-turn:16deg;animation-delay:-3.2s}
.generation-visual.is-saju .generation-orbit{top:5px}
.generation-element{position:absolute;display:grid;place-items:center;width:29px;height:29px;border:1px solid #d2cbb8;border-radius:50%;background:#faf7ee;font:500 15px/1 var(--serif,serif);animation:generation-element-breathe 5s ease-in-out infinite}
.generation-element:nth-of-type(2){left:86px;top:0;color:#526e53}
.generation-element:nth-of-type(3){left:139px;top:38px;color:#a6624f;animation-delay:-1s}
.generation-element:nth-of-type(4){left:119px;top:99px;color:#8a734b;animation-delay:-2s}
.generation-element:nth-of-type(5){left:53px;top:99px;color:#817b6b;animation-delay:-3s}
.generation-element:nth-of-type(6){left:33px;top:38px;color:#56757a;animation-delay:-4s}
.generation-visual-seal{position:absolute;left:calc(50% - 22px);top:40px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #a9634d;border-radius:4px;color:#a15b48;background:#fbf8f1b3;font:500 27px/1 var(--serif,serif);transform:rotate(-5deg);box-shadow:inset 0 0 0 3px #fbf8f1,inset 0 0 0 4px #a9634d55}
.result-gate-copy .generation-progress{font-family:var(--sans,sans-serif);text-align:left;min-width:0;margin:0}
.generation-time{position:relative;padding:14px 12px 18px;border:1px solid #dce0d1;border-radius:10px;background:linear-gradient(135deg,#edf0e58c,#f4f1e780);overflow:hidden;text-align:center}
.generation-time-label{font-size:11px;letter-spacing:.03em;color:#6c7868}
.gyeol-result-gate .generation-remaining{font:600 clamp(23px,6vw,27px)/1.45 var(--sans,sans-serif);color:#2e4937;letter-spacing:-.045em;margin:4px 0 8px;overflow-wrap:anywhere}
.generation-clock-row{display:flex;justify-content:center;flex-wrap:wrap;gap:5px 18px;font:400 11px/1.6 var(--sans,sans-serif);color:#76816f}
.generation-elapsed{font-variant-numeric:tabular-nums;font-weight:500;color:#4d6350}
.generation-activity{position:absolute;inset:auto 0 0;height:3px;background:#dfe4d7;overflow:hidden}
.generation-activity::after{content:'';position:absolute;left:0;top:0;width:35%;height:100%;background:linear-gradient(90deg,transparent,#6d8464,transparent);animation:generation-activity 2.8s ease-in-out infinite}
.generation-steps{list-style:none;margin:16px 0 0;padding:0}
.generation-steps li{position:relative;display:grid;grid-template-columns:29px minmax(0,1fr) 15px;align-items:center;gap:11px;padding:11px 10px;border-bottom:1px solid #e8e7dc;color:#91998a;min-width:0}
.generation-step-mark{display:grid;place-items:center;width:29px;height:29px;border:1px solid #dedfd2;border-radius:50%;font:400 12px/1 var(--serif,serif);font-variant-numeric:tabular-nums;color:#9c9e88;background:#fbf8f1}
.generation-steps strong{display:block;font-size:13px;line-height:1.6;font-weight:500}
.generation-step-description{display:block;font-size:12px;line-height:1.65;margin-top:2px;color:#92998b;word-break:keep-all}
.generation-step-state{font-size:13px;line-height:1.6;color:#71846b}
.generation-steps .is-current{color:#2d4c38;background:linear-gradient(90deg,#e8eddf99,#e8eddf00);border-radius:6px}
.generation-steps .is-current strong{font-weight:650}
.generation-steps .is-current .generation-step-mark{color:#fbf8f1;background:#4d684e;border-color:#4d684e;box-shadow:0 0 0 3px #e2e8da}
.generation-steps .is-current .generation-step-description{color:#667760}
.generation-steps .is-current .generation-step-state::after{content:'···';letter-spacing:1px;animation:generation-breathe 2s ease-in-out infinite}
.generation-steps .is-done{color:#6e7d66}.generation-steps .is-done .generation-step-description{color:#829079}
.generation-steps .is-done .generation-step-mark{border-color:#cdd5c3;color:#657b5e;background:#edf0e6}
.generation-track{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.generation-later{display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:16px}
.result-gate-copy .generation-background-note{font:400 11px/1.6 var(--sans,sans-serif);color:#7c856f;margin:0}
.generation-later-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;min-height:44px;padding:7px 0;color:#435b42;text-decoration:none;font-size:13px;line-height:1.5;font-weight:500}
.generation-later-link::after{content:'↗';font-size:16px;color:#71816a}
.generation-later-link:hover{text-decoration:underline;text-underline-offset:4px}.generation-later-link:focus-visible{outline:2px solid #526d50;outline-offset:4px;border-radius:2px}
.gyeol-result-gate.is-late .generation-remaining{font-size:20px;color:#806b47}
@keyframes generation-card-float{0%,100%{transform:translate(var(--card-x),var(--card-y)) rotate(var(--card-turn))}50%{transform:translate(var(--card-x),calc(var(--card-y) - 5px)) rotate(var(--card-turn))}}
@keyframes generation-element-breathe{0%,100%{box-shadow:0 0 0 0 #b5bd9c00}50%{box-shadow:0 0 0 5px #b5bd9c24}}
@keyframes generation-activity{from{transform:translateX(-100%)}to{transform:translateX(390%)}}
@keyframes generation-breathe{0%,100%{opacity:.4}50%{opacity:1}}
@media(max-width:359px){.gyeol-result-gate.is-generating .result-gate-copy{padding:20px 18px 18px}.generation-clock-row{gap:4px 12px}.generation-steps li{gap:9px;padding:10px 6px}}
@media(prefers-reduced-motion:reduce){.generation-visual *,.generation-activity::after,.generation-steps .is-current .generation-step-state::after{animation:none;will-change:auto}.generation-activity::after{left:32%}}
