/* 첫 화면 '조선명과학 사주풀이' — 2026-11-02
   흑백 김해담 사진을 화면 가득 깔고(천천히 다가오며 어두워짐), 그 위로 글이 한꺼번에 천천히 떠오른다.
   글이 다 나오면 [사주풀이] 버튼. 화면을 누르면 남은 글이 한꺼번에 나온다(opening.js). 휴대폰 세로 화면 기준. */
.gate{--ink:#070707;--cream:#ece4d2;--dim:#b3aa98;--line:#8a826f;
 position:fixed;inset:0;z-index:50;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--ink);color:var(--cream);
 font-family:HDSerif,Batang,'바탕','Noto Serif KR',serif}
body.has-opening{overflow:hidden}
#ui-shell[hidden]{display:none!important}
.gate button{font-family:inherit}

/* 사진: 화면 가득(위로 9vh 올려 얼굴을 위쪽에 둠), 처음엔 또렷하게 → 글이 올라오면 어두워진다 */
.gate-bg{position:fixed;left:0;right:0;top:-9vh;bottom:0;z-index:0;overflow:hidden;pointer-events:none}
.gate-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;max-width:none;
 opacity:0;transform:scale(1.1);transition:opacity 2.4s ease,transform 18s cubic-bezier(.2,.5,.3,1)}
.gate.is-open .gate-bg img{opacity:1;transform:scale(1)}
.gate-bg:after{content:'';position:absolute;inset:0;opacity:.25;transition:opacity 3s ease 1.6s;
 background:linear-gradient(180deg,#070707b3 0%,#07070733 22%,#07070740 34%,#070707b8 50%,#070707e6 70%,#070707f7 100%)}
.gate.is-ready .gate-bg:after{opacity:1}
@media(min-width:700px){.gate-bg img{object-position:50% 25%}}

.gate-top{position:absolute;top:0;right:0;z-index:3;padding:calc(10px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 0 0}
.gate-top button{min-height:40px;padding:6px 12px;border:0;background:transparent;color:#9b9384;font-size:12px;letter-spacing:1px;text-shadow:0 1px 6px #000}
.gate-top button[aria-pressed=true]{color:var(--cream)}

/* 글: 사진 위에. 얼굴은 입 아래까지 비워 두고, 제목과 본문 글은 그 아래부터 */
.gate-inner{position:relative;z-index:1;max-width:440px;margin:0 auto;text-align:center;word-break:keep-all;
 padding:max(60px,calc(55vh - 50px)) max(16px,env(safe-area-inset-right,0px)) 130px max(16px,env(safe-area-inset-left,0px));
 text-shadow:0 2px 14px #000,0 0 4px #000}
/* 제목: 솔뫼 김대건체로 미리 그린 그림(assets/title.png, 11KB — 글꼴 파일 1.3MB를 받지 않으려고). 본문 글 바로 위 */
.gate-brand{margin:0 0 16px}
.gate-brand img{display:block;margin:0 auto;width:min(261px,74vw);height:auto;filter:drop-shadow(0 2px 10px #000) drop-shadow(0 0 3px #000)}
.gate h1{margin:0 0 10px;font:700 19px/1.5 HDSerif,Batang,serif;letter-spacing:2px;color:#f1e8d4;outline:none}
.gate h1 small{font-size:14px;font-weight:400;color:var(--dim);letter-spacing:0}
.gate-text p{margin:0 0 10px;font-size:15px;line-height:1.7;color:var(--cream)}
.gate-text p:last-child{margin-bottom:0}
@media(max-width:360px){.gate-text p{font-size:14.5px}}

/* 글 전체가 한꺼번에: 어둠 속에서 천천히 떠오르며 올라온다(흐림 효과는 휴대폰에서 글이 뿌옇게 남는 일이 있어 쓰지 않음). 시작 시간은 opening.js가 정한다 */
.gate .ln{display:block;opacity:0;transform:translateY(12px);
 transition:opacity 1.8s ease,transform 1.8s cubic-bezier(.2,.6,.2,1)}
.gate.is-ready .ln{opacity:1;transform:none}
.gate.is-done .ln{transition-duration:.4s!important;transition-delay:0s!important}

/* 버튼: 글이 다 나온 뒤 화면 아래에 */
.gate-foot{position:fixed;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:center;
 padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,#07070700,#070707 50%);
 opacity:0;pointer-events:none;transition:opacity 1.6s ease}
.gate.is-cta .gate-foot{opacity:1;pointer-events:auto}
.gate-cta{min-width:200px;min-height:50px;padding:0 32px;border:1px solid var(--line);background:#0e0e0dcc;color:#f6efdf;
 font-size:18px;font-weight:700;letter-spacing:6px;cursor:pointer}
.gate-cta:hover{background:#1a1a18}
.gate-cta:active{transform:translateY(1px)}
.gate-cta:focus-visible{outline:1px solid var(--cream);outline-offset:4px}

@media(prefers-reduced-motion:reduce){.gate .ln,.gate-bg img,.gate-bg:after,.gate-foot{transition:none!important}}

.opening-return{border:0;background:transparent;color:#8d806a;font:12px var(--serif);min-height:44px}