/* 한 바가지의 쉼 - 2차 시안. 외부 폰트 없음(기기 기본 명조/고딕) */
:root{
  --paper:#efe8da;
  --ink:#2b2824;
  --ink2:#4a443c;
  --serif:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang","BatangChe",serif;
  --sans:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#d9d2c3;color:var(--ink);font-family:var(--sans);font-size:20px;line-height:1.5;word-break:keep-all;overflow-wrap:break-word}
p,h2{text-wrap:balance}
body{display:flex;justify-content:center;overflow:hidden}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{position:relative;width:min(100vw,480px);height:100vh;height:100dvh;overflow:hidden;background:var(--paper);container-type:size}
#main{position:absolute;inset:0}

/* 그림 무대: 화면을 덮도록(cover) 그림 비율 유지 */
.stage{position:absolute;left:50%;top:50%;
  width:max(100cqw, calc(100cqh * 941 / 1672));aspect-ratio:941/1672;
  transform:translate(-50%,-50%)}
.bg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}

/* 물줄기: 반투명 흰빛 + 옅은 담청 수묵 번짐, 폭 있게, 위에서 아래로 그려짐 */
.stream path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.st-tint{stroke:#8fb7c6;stroke-width:44;opacity:0;filter:url(#soft)}
.st-body{stroke:#f4fafb;stroke-width:24;opacity:0;filter:url(#softer)}
.st-core{stroke:#ffffff;stroke-width:8;opacity:0}
.stream path.st-tint,.stream path.st-body,.stream path.st-core{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}
.riv{stroke:#f6fbfc;stroke-width:5;opacity:0;stroke-dasharray:560;stroke-dashoffset:560;filter:url(#softer)}
.riv-tint{stroke:#9fc2cf;stroke-width:11;filter:url(#soft)}
#bodyWash{fill:#e4f0f4;opacity:0}
.pouring #bodyWash{animation:wash2 3.2s ease-in-out .7s forwards}
@keyframes wash2{0%{opacity:0}30%{opacity:.32}80%{opacity:.25}100%{opacity:0}}
.riv-thin{stroke-width:4}
#crownGlint{fill:#ffffff;opacity:0}
#crownWash{fill:#dcebf0;opacity:0}
#splash circle{fill:#ffffff;opacity:0}

.pouring .st-tint{animation:flowTint 3s ease-in forwards}
.pouring .st-body{animation:flowBody 3s ease-in forwards}
.pouring .st-core{animation:flowCore 3s ease-in forwards}
.pouring .riv{animation:rivulet 2.8s ease-in .45s forwards}
.pouring .riv-tint{animation-name:rivuletTint}
.pouring #crownGlint{animation:glint 2.8s ease-in-out .4s forwards}
.pouring #crownWash{animation:wash 3s ease-in-out .45s forwards}
.pouring #splash circle{animation:splash 1.1s ease-out .45s 2}
/* 0~15%: 입구에서 정수리까지 그려짐, 15~78%: 이어짐, 끝: 위에서부터 끊김 */
@keyframes flowTint{0%{stroke-dashoffset:var(--len);opacity:.5}15%{stroke-dashoffset:0;opacity:.5}78%{stroke-dashoffset:0;opacity:.45}100%{stroke-dashoffset:calc(var(--len) * -1);opacity:.1}}
@keyframes flowBody{0%{stroke-dashoffset:var(--len);opacity:.8}15%{stroke-dashoffset:0;opacity:.8}78%{stroke-dashoffset:0;opacity:.75}100%{stroke-dashoffset:calc(var(--len) * -1);opacity:.2}}
@keyframes flowCore{0%{stroke-dashoffset:var(--len);opacity:.95}15%{stroke-dashoffset:0;opacity:.95}78%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:calc(var(--len) * -1);opacity:.2}}
@keyframes rivulet{0%{stroke-dashoffset:560;opacity:.5}55%{stroke-dashoffset:0;opacity:.42}100%{stroke-dashoffset:0;opacity:0}}
@keyframes rivuletTint{0%{stroke-dashoffset:560;opacity:.22}55%{stroke-dashoffset:0;opacity:.18}100%{stroke-dashoffset:0;opacity:0}}
@keyframes glint{0%{opacity:0}20%{opacity:.9}80%{opacity:.6}100%{opacity:0}}
@keyframes wash{0%{opacity:0}25%{opacity:.45}80%{opacity:.35}100%{opacity:0}}
@keyframes splash{0%{opacity:0;transform:translateY(0)}30%{opacity:.9}100%{opacity:0;transform:translateY(-10px)}}

/* 물결 3겹: 흰빛과 옅은 먹선 */
.ripple{opacity:0;transform-box:fill-box;transform-origin:center}
.rp-ink{fill:none;stroke:#4f5a60;stroke-width:4;opacity:.5;filter:url(#soft)}
.rp-w{fill:none;stroke:#ffffff;stroke-width:3.4;opacity:.95;filter:url(#softer)}
.waves .ripple{animation:ripple 2.4s ease-out forwards}
.waves .ripple:nth-child(1){animation-delay:1.4s}
.waves .ripple:nth-child(2){animation-delay:2.0s}
.waves .ripple:nth-child(3){animation-delay:2.6s}
@keyframes ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(5.6,5.2)}}

/* 바가지: 관불반 테두리 오른쪽에 놓여 있다가 들려서 붓고 돌아옴 */
.bagaji{position:absolute;left:67.5%;top:66.6%;width:20.5%;aspect-ratio:380/200;min-width:64px;min-height:56px;z-index:2;
  padding:0;border:0;background:transparent;cursor:pointer;border-radius:30%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot,0deg));transform-origin:50% 50%;
  transition:transform 1s cubic-bezier(.35,.1,.25,1)}
.bagaji img{position:relative;width:100%;height:100%;display:block;pointer-events:none;mix-blend-mode:multiply;
  filter:saturate(.72) brightness(1.04)}
/* 놓여 있을 때만 테두리 위 옅은 그림자 */
.bagaji::before{content:"";position:absolute;left:8%;right:38%;bottom:-4%;height:18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(70,55,35,.32), rgba(70,55,35,0));transition:opacity .25s}
.bagaji.lifted::before{opacity:0}
.bagaji.tilt{transition:transform .7s ease-in-out}
.bagaji.press img{transform:scale(.95)}

.bagaji::after{content:"";position:absolute;inset:-8%;border-radius:50%;pointer-events:none}
.bagaji.glow::after{animation:glow 2.8s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,250,235,0)}50%{box-shadow:0 0 22px 8px rgba(255,250,235,.8)}}

/* 초점 표시: 먹색 2px */
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:12px;box-shadow:0 0 0 5px rgba(247,242,231,.85)}

/* 위쪽 한 줄 */
.top{position:absolute;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 72px) 12px 0;text-align:center;pointer-events:none;
  transition:opacity 4s ease 1s, visibility 0s linear 5s;z-index:3}
.top.fade{opacity:0;visibility:hidden}
.lead{display:inline-block;margin:0;font-family:var(--serif);font-size:24px;letter-spacing:.06em;color:var(--ink);
  background:radial-gradient(closest-side, rgba(247,242,231,.9), rgba(247,242,231,.7) 70%, rgba(247,242,231,0));padding:10px 26px}

/* 3초 안내: 바가지 바로 위 */
.hint{position:absolute;left:64%;top:56.6%;display:flex;flex-direction:column;align-items:center;gap:0;opacity:0;
  transition:opacity 1.2s ease;pointer-events:none;z-index:3}
.hint.on{opacity:1}
.hint-text{font-size:20px;line-height:1.3;font-weight:600;color:var(--ink);text-align:center;white-space:nowrap;
  background:radial-gradient(closest-side, rgba(247,242,231,.95), rgba(247,242,231,.8) 75%, rgba(247,242,231,0));padding:8px 18px}
.finger{width:30px;height:36px;margin-top:-2px;margin-left:30px;fill:#f7f2e7;stroke:var(--ink2);stroke-width:2;transform:rotate(180deg)}
.hint.on .finger{animation:tap 1.4s ease-in-out infinite}
@keyframes tap{0%,100%{translate:0 0}50%{translate:0 7px}}

/* 소리 단추와 메뉴: 맨 위 한 줄(8~64px)에만, 위 문구(72px~)와 겹치지 않음 */
.corner{position:absolute;top:calc(env(safe-area-inset-top) + 8px);right:8px;left:8px;display:flex;flex-direction:row-reverse;align-items:center;gap:6px;z-index:6;pointer-events:none}
.corner>*{pointer-events:auto}
.sound-menu{display:flex;gap:6px;animation:fadein .3s ease}
.sm-btn{min-width:56px;min-height:56px;padding:4px 14px;display:flex;align-items:center;gap:4px;border:1px solid rgba(74,68,60,.35);
  background:rgba(247,242,231,.93);color:var(--ink);border-radius:28px;font:inherit;font-size:20px;cursor:pointer;white-space:nowrap}
.sm-btn svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sm-btn .spk{fill:var(--ink)}
.corner[data-on="true"] .mute{display:none}
.corner[data-on="false"] .wave1,.corner[data-on="false"] .wave2{display:none}

/* 공용 단추 */
.btn{min-height:56px;min-width:56px;padding:10px 22px;border-radius:30px;border:2px solid #3d5a66;background:#3d5a66;color:#fff;
  font:inherit;font-size:21px;font-weight:600;cursor:pointer;touch-action:manipulation}
.btn.ghost{background:rgba(247,242,231,.95);color:#24343b}
.btn:active{transform:translateY(1px)}

/* 묻기 상자: 아래쪽(염주 자리) */
.ask{position:absolute;left:16px;right:16px;margin:0 auto;max-width:400px;z-index:6;
  background:rgba(247,242,231,.96);border:1px solid rgba(74,68,60,.22);border-radius:18px;padding:14px 16px;text-align:center;
  box-shadow:0 6px 24px rgba(60,45,25,.15);animation:fadein .6s ease}
.ask-bottom{bottom:calc(env(safe-area-inset-bottom) + 96px)}
.ask p{margin:0 0 10px;font-family:var(--serif);font-size:22px}
.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 염주: 상자 없이, 한지 빛 안개만 살짝 */
.mala-wrap{position:absolute;left:50%;width:min(85%, calc(100% - 32px));margin-left:calc(min(85%, calc(100% - 32px)) / -2);
  bottom:calc(env(safe-area-inset-bottom) + 96px);height:84px;display:flex;align-items:center;justify-content:center;
  z-index:4;animation:rise 1.4s ease-out}
.mala-wrap::before{content:"";position:absolute;left:-10%;right:-10%;top:-30px;bottom:-24px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 55% 50% at 50% 50%, rgba(241,234,217,.82), rgba(241,234,217,.55) 55%, rgba(241,234,217,0) 100%)}
@keyframes rise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
.mala{flex:1 1 auto;width:100%;min-height:84px;padding:0;border:0;border-radius:24px;background:transparent;cursor:pointer;touch-action:manipulation}
.mala svg{width:100%;height:84px;display:block;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.cord{fill:none;stroke:#a88866;stroke-width:2.2;opacity:.85;stroke-linecap:round}
.bead-sh{fill:#5a4630;opacity:.16}
.bead-img{mix-blend-mode:multiply}
.mala.busy,.mala[aria-disabled="true"]{cursor:default}
/* 그릇: 염주 줄과 떨어진 왼쪽 위(관불반 앞), 화면 안 */
.bowl{position:absolute;left:18px;bottom:calc(env(safe-area-inset-bottom) + 96px + 84px + 8px);width:72px;height:41px;z-index:4;animation:rise 1.4s ease-out}
.bowl img{position:relative;width:100%;height:100%;display:block;mix-blend-mode:multiply}
/* 그릇 물: 그릇 안쪽 입구 타원 안에서 차오름 */
.bowl-water{position:absolute;left:12%;right:12%;top:13%;height:16%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%, rgba(236,244,244,.95), rgba(150,180,188,.85));opacity:0;transform:scale(.25);
  transition:opacity 1.1s ease,transform 1.1s ease;z-index:1;mix-blend-mode:normal}
.bowl.full{animation:bowlglow 1.6s ease}
@keyframes bowlglow{50%{filter:drop-shadow(0 0 8px rgba(255,250,230,.95))}}

/* 마치기: 염주와 24px 이상 떨어짐 */
.finish{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 14px);z-index:5;
  background:rgba(247,242,231,.95);color:#24343b;min-width:140px}
.finish:active{transform:translateX(-50%) translateY(1px)}

/* 날씨 */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:10;max-height:100%;overflow:auto;background:rgba(247,242,231,.98);
  border-radius:24px 24px 0 0;padding:22px 18px calc(env(safe-area-inset-bottom) + 22px);box-shadow:0 -8px 30px rgba(60,45,25,.18);animation:rise .9s ease-out}
.sheet h2{margin:0 0 4px;font-family:var(--serif);font-size:24px;font-weight:600;text-align:center}
.sub{margin:0 0 14px;font-size:20px;color:var(--ink2);text-align:center}
.weather-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wbtn{min-height:96px;min-width:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:1px solid rgba(74,68,60,.3);background:#fbf8f1;border-radius:18px;color:var(--ink);font:inherit;font-size:20px;cursor:pointer}
.wbtn svg{width:44px;height:44px;fill:none;stroke:#3d5a66;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wbtn.skip{color:var(--ink2);background:transparent}

/* 갈피: 뒤 화면을 완전히 가림, 스크롤바 숨김 */
.galpi-screen{position:absolute;inset:0;z-index:12;overflow-y:auto;overflow-x:hidden;padding:calc(env(safe-area-inset-top) + 18px) 0 28px;
  background:#efe8da;text-align:center;scrollbar-width:none;-ms-overflow-style:none}
.galpi-screen::-webkit-scrollbar{display:none;width:0;height:0}
.galpi-card{width:86%;max-width:420px;margin:0 auto 16px;border-radius:6px;box-shadow:0 10px 28px rgba(60,45,25,.22);background:#f6f0e4;
  animation:float-up .9s ease-out}
.galpi-card img{display:block;width:100%;height:auto;border-radius:6px}
/* 처음부터 보이는 상태: 짧은 이동·옅은 페이드만 (멈춰도 보임) */
@keyframes float-up{from{opacity:.75;transform:translateY(18px)}to{opacity:1;transform:none}}
.share-row{display:flex;flex-direction:column;gap:10px;align-items:center;padding:0 18px}
.share-row .btn{width:min(100%,320px)}
.status{min-height:30px;margin:10px 18px 4px;font-size:20px;color:#24343b}
.exit{margin-top:6px;padding:0 18px;color:#4a443c}
.exit p{margin:4px 0;font-size:20px}
.again{margin-top:14px}

/* 동작 줄이기: 움직임 없이 정지 그림 변화로 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pouring .stream path.st-tint{stroke-dashoffset:0;opacity:.5}
  .pouring .stream path.st-body{stroke-dashoffset:0;opacity:.8}
  .pouring .stream path.st-core{stroke-dashoffset:0;opacity:.95}
  .pouring #splash circle{opacity:.7}
  .pouring .riv{stroke-dashoffset:0;opacity:.42}
  .pouring .riv-tint{opacity:.18}
  .pouring #bodyWash{opacity:.28}
  .pouring #crownGlint{opacity:.8}
  .pouring #crownWash{opacity:.4}
  .waves .ripple{opacity:.6}
  .waves .ripple:nth-child(1){transform:scale(2)}
  .waves .ripple:nth-child(2){transform:scale(3.4,3.2)}
  .waves .ripple:nth-child(3){transform:scale(4.8,4.5)}
  .top.fade{opacity:0}
}