.stage{
  










  position:fixed; top:0; bottom:0; left:0; right:0; margin-inline:auto;
  






















  width:min(100%, 400px); overflow:hidden;
  
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
  background:var(--bg); color:var(--text);
}

.screens{position:absolute; inset:0;}





:root{
  --kr:'Gyeok App','Gyeok Display','Jojak',"Apple SD Gothic Neo",sans-serif;
  --ui:'Jojak App','Jojak',"Apple SD Gothic Neo",system-ui,sans-serif;
}



.skip{
  position:fixed; left:8px; top:-60px; z-index:40;
  
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 14px; border-radius:var(--r-md);
  background:var(--text); color:var(--bg);
  font-family:var(--ui); font-size:14px; font-weight:600; text-decoration:none;
  transition:top .15s ease;
}
.skip:focus-visible{top:8px;}




@media (min-width:440px){
  .stage{border-left:1px solid var(--border-hair); border-right:1px solid var(--border-hair);}
  




  .tabbar{border-left:1px solid var(--border-hair); border-right:1px solid var(--border-hair);}
}
.scr{
  position:absolute; inset:0; display:none;
  flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.scr.on{display:flex;}



.scr > *{flex-shrink:0;}












:where(.scr, .tabbar) button:where(:not(.btn)), button.scr{
  width:auto; padding:0; background:none; color:inherit;
  border:0; border-radius:0; font-weight:400;
  


  text-align:center;
}







.scr.on:not(.tabbed){animation:fadeup .4s ease both;}
.scr.on.seen{animation:none;}
@keyframes fadeup{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}



.scr.tabbed{padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom));}











.scr.tabbed:not(.scr-me):not(.birth):not(.board){padding-top:var(--top-first);}





.scr-me, .birth, .board{--ppl-drop:calc(var(--top-first) - var(--gap-sec-s));}





.scr :focus-visible, .tabbar :focus-visible, .scr:focus-visible{
  outline:none; box-shadow:inset 0 0 0 1px var(--focus-ring);
}


.h1{font-family:var(--kr); font-size:21px; line-height:1.4; font-weight:400; margin:0;}
.h2{font-family:var(--kr); font-size:16px; line-height:1.5; font-weight:400; margin:0;}

.body-l{font-family:var(--kr); font-size:14px; line-height:1.85; font-weight:400;
        color:var(--text-2); text-wrap:pretty; margin:0;}
.body-s{font-family:var(--kr); font-size:12.5px; line-height:1.65; font-weight:400;
        color:var(--text-2); text-wrap:pretty; margin:0;}











.h1, .h2, .res-title, .onb-title, .splash-title, .load-msg, .ask-p,
.body-l, .body-s, .cat-hint p, .splash-sub, .onb-body, .pay-lead, .qg-i,
.load-stay{word-spacing:-.2em;}



.lbl{font-family:var(--ui); font-size:11.5px; font-weight:500; color:var(--text-3);
     margin:0;}






.han{font-family:var(--han);}
.sv-go .ic{width:14px; height:14px; display:block;}


.cat-hint{display:flex; align-items:flex-start; gap:var(--gap-3);}
.cat-hint svg{flex:none; width:26px; height:26px; margin-top:1px;}
.cat-hint p{margin:0; font-family:var(--kr); font-size:14px; line-height:1.6;
            color:var(--text-2); text-wrap:pretty;}


.foot{margin-top:auto; padding-top:var(--gap-sec-s);}





.splash{
  align-items:center; text-align:center;
  padding:24px var(--pad-screen); cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}





















.splash-first{
  display:flex; flex-direction:column; align-items:center;
  width:100%; min-height:100svh;
  justify-content:center; padding-bottom:14svh;
}


.splash-tap{
  position:absolute; inset:0; z-index:1;
  width:100%; padding:0; background:none; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}


.splash-tap:active{background:none;}


.splash > *:not(.splash-tap){position:relative;}













.site-foot{
  width:100%; margin-top:var(--gap-sec-m); padding-top:var(--gap-sec-s);
  text-align:center;
}














.foot-bizs{margin:0 0 var(--gap-3);}
.foot-biz{
  font-family:var(--ui); font-size:11.5px; line-height:1.7; color:var(--text-2);
  margin:0;
}
.foot-biz + .foot-biz{margin-top:2px;}






.foot-biz a{color:var(--text-2); text-decoration:none;
            display:inline-block; padding:14px 0; margin:-14px 0;}

.biz-todo{color:var(--text-4);}




.splash-legal{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0 var(--gap-4);
}
.splash-legal a{
  


  display:inline-flex; align-items:center; min-height:45px;
  font-family:var(--ui); font-size:11.5px; color:var(--text-4); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}



.foot-copy{
  margin:var(--gap-2) 0 0; text-align:center;
  font-family:var(--ui); font-size:11px; color:var(--text-4);
}



.splash-stack{position:relative; width:240px; height:240px; margin-bottom:var(--gap-sec-m);}


@media (max-height:640px){ .splash-stack{width:196px; height:196px;} }
.splash-stack > span{position:absolute; inset:0;}

.splash-ring{position:absolute; inset:0; border:1px solid rgba(237,234,227,.12); border-radius:50%;}
.splash-ring.in{inset:26px; border-color:rgba(237,234,227,.07);}

.splash-orbit{position:absolute; inset:0; animation:orbit 14s linear infinite;}
.splash-orbit i{position:absolute; width:9px; height:9px; border-radius:50%;
                top:calc(50% - 4.5px); left:calc(50% - 4.5px);}
.splash-cat{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}

.splash-cat .hwcard{width:auto; height:118px; animation:hwfloat 5s ease-in-out infinite;}

.is-hwatu .splash-ring{display:none;}
.splash-title{font-family:var(--kr); font-size:27px; line-height:1.3; font-weight:400;
              letter-spacing:-.5px; margin:0 0 var(--gap-3);}
.splash-sub{font-family:var(--kr); font-size:14px; color:var(--text-3); margin:0;}









.splash-hint{
  text-align:center; margin:var(--gap-sec-l) 0 0;
  font-family:var(--ui); font-size:12.5px; color:var(--text-3);
  animation:blinkdot 2.2s ease-in-out infinite;
}



.onb{padding:var(--top-start) 0 26px; text-align:center;}


.onb-deck{flex:1; overflow:hidden; touch-action:pan-y;}
.onb-track{display:flex; height:100%; transition:translate .3s ease;}
.onb-track.dragging{transition:none;}   


@media (prefers-reduced-motion:reduce){ .onb-track{transition:none;} }
.onb-slide{
  flex:0 0 100%; min-width:0; padding:0 var(--pad-input);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}

.onb-circle{
  width:150px; height:150px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--gap-sec-l);
}

.onb-circle .hwcard{width:auto; height:122px; animation:hwfloat 5s ease-in-out infinite;}
.onb-title{font-family:var(--kr); font-size:24px; line-height:1.4; font-weight:400;
           margin:0 0 var(--gap-4);}








.onb-body{font-family:var(--kr); font-size:clamp(12px, 3.9vw, 14px); line-height:1.7;
          color:var(--text-2); margin:0; white-space:pre;}






.onb-dots{display:flex; gap:0; justify-content:center;
  margin:var(--gap-2) 0 var(--gap-sec-l);}
.onb-dots button{
  display:flex; align-items:center; justify-content:center;
  min-width:24px; min-height:44px; padding:0; background:none; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}


.onb-dots button:active{background:none;}
.onb-dots i{display:block; width:6px; height:4px; border-radius:2px;
            background:rgba(237,234,227,.2);
            transition:width .18s ease, background-color .18s ease;}
.onb-dots button.on i{width:20px; background:var(--earth);}

@media (prefers-reduced-motion:reduce){
  .onb-dots i{transition:background-color .18s ease;}
}


.onb-start{padding:0 var(--pad-input);}










.onb-login{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:100%;
}
.lgb{
  position:relative;
  

  display:flex; align-items:center; justify-content:center; gap:8px;
  width:min(320px, 100%); height:48px; padding:0 16px;
  border:0; border-radius:12px;                   
  font-family:var(--ui); font-size:15px; font-weight:600; line-height:1;
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}


.lgb-sym{width:18px; height:18px; flex-shrink:0; display:block; object-fit:contain;}
.lgb-txt{flex:0 1 auto; text-align:center; white-space:nowrap;}
.lgb-kakao{background:#FEE500; color:rgba(0,0,0,.85);}







.lgb-naver{background:none; padding:0;}
.lgb-full{width:100%; height:100%; object-fit:contain; display:block; border-radius:12px;}

.lgb-google{background:#FFFFFF; color:#1F1F1F; border:1px solid #747775;}


.lgb-mailbox{background:transparent; border:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.72); font-weight:500;}
.lgb:active{filter:brightness(.94);}











.lgb[disabled]{opacity:.5; cursor:default; transform:scale(.99);}
.lgb[disabled]:active{filter:none;}


@media (prefers-reduced-motion:reduce){ .lgb[disabled]{transform:none;} }


.lgb:focus-visible{outline:2px solid var(--earth); outline-offset:2px;}




.lgb-wrap{position:relative; display:flex; justify-content:center;
  width:min(320px, 100%);}
.lgb-last{
  

  position:absolute; top:0; left:12px; transform:translateY(-50%);
  z-index:1; padding:3px 10px; border-radius:999px; pointer-events:none;
  font-family:var(--ui); font-size:12px; font-weight:600; line-height:1.4;
  background:#1F1F1F; color:#FFFFFF; white-space:nowrap;
}




.onb-optin{
  display:flex; align-items:center; justify-content:center; gap:var(--gap-2);
  min-height:44px; margin-top:var(--gap-2); cursor:pointer;
  font-family:var(--ui); font-size:12.5px; color:var(--text-3);
}
.onb-optin input{
  width:18px; height:18px; flex:none; accent-color:var(--earth); cursor:pointer;
}











.consent{padding:0 var(--pad-input); justify-content:center;}
.cs-wrap{width:100%;}





.cs-title{
  font-family:var(--ui); font-size:20px; font-weight:600;
  color:var(--text); margin:0 0 var(--gap-sec-m); text-align:center;
}
.cs-row{
  display:flex; align-items:flex-start; gap:var(--gap-2);
  min-height:44px; padding:var(--gap-2) 0; cursor:pointer;
  font-family:var(--ui); font-size:12.5px; line-height:1.7; color:var(--text-3);
  text-wrap:pretty;
}

.cs-row input{
  width:18px; height:18px; flex:none; margin-top:3px;
  accent-color:var(--earth); cursor:pointer;
}
.cs-row b{color:var(--text-2); font-weight:600;}







.cs-all{
  color:var(--text-2);
  padding-bottom:var(--gap-3); margin-bottom:var(--gap-2);
  border-bottom:1px solid var(--border-hair);
}


.cs-list{display:flex; flex-direction:column;}
.cs-row a{
  
  display:inline-block; padding:14px 0; margin:-14px 0;
  color:var(--text-2); text-decoration:underline; text-underline-offset:2px;
}
.cs-err{
  font-family:var(--ui); font-size:12px; color:var(--fire);
  margin:var(--gap-2) 0 0; min-height:1.2em; text-align:center;
}
.consent .btn{margin-top:var(--gap-sec-m);}







.birth{padding:0 var(--pad-input) var(--pad-input);}




.birth > * + *{margin-top:var(--gap-sec-m);}
.birth .pick-set{margin-top:0;}
.birth > .pick-set + .pick-set,
.birth > * + .pick-set{margin-top:var(--gap-sec-m);}



.birth > .sr-only + .pick-set{margin-top:0;}








.tin{
  width:100%; height:52px; margin-top:var(--gap-2); padding:0 var(--gap-3);
  border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border);
  

  font-family:var(--ui); font-size:16px; color:var(--text);
  -webkit-appearance:none; appearance:none;
}
.tin::placeholder{color:var(--text-4);}
.tin:focus{outline:none; border-color:var(--focus-ring);}


.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}











.wheels{
  --wheel-row:38px;
  display:flex; gap:var(--gap-2); margin-top:var(--gap-2);
  align-items:flex-start;
}
.wheel{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;}
.wheel.wide{flex:1.7;}
.wheel.off{opacity:.4;}
.wheel-sc{
  width:100%; height:calc(var(--wheel-row) * 5);
  overflow-y:auto; overscroll-behavior:contain;
  scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch;
  border-radius:var(--r-md); background:var(--surface);
  border:1px solid var(--border);
  
  scrollbar-width:none;
  
  background-image:linear-gradient(var(--surface-hi), var(--surface-hi));
  background-size:100% var(--wheel-row);
  

  background-position:0 calc(var(--wheel-row) * 2);
  background-repeat:no-repeat;
}
.wheel-sc::-webkit-scrollbar{display:none;}
.wheel-sc:focus-visible{outline:none; border-color:var(--focus-ring);}

.wheel-track{padding:calc(var(--wheel-row) * 2) 0;}
.wheel-i{
  display:flex; align-items:center; justify-content:center;
  height:var(--wheel-row); scroll-snap-align:center;
  font-family:var(--ui); font-size:15px; font-variant-numeric:tabular-nums;
  color:var(--text-4);
}
.wheel-i.on{font-size:17px; font-weight:600; color:var(--text);}
.wheel-cap{
  margin-top:var(--gap-2);
  font-family:var(--ui); font-size:11.5px; color:var(--text-3);
}


.dash{margin-top:var(--gap-4);
  
  border-radius:var(--r-md); background:var(--surface);
  border:1px dashed var(--border);
  font-family:var(--ui); font-size:14px; font-weight:500; color:var(--text-3);
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:border-color .15s ease, color .15s ease;
}







.dash.wide{width:100%; min-height:52px; margin-top:var(--gap-sec-m);}
.dash.on{color:var(--earth); border-color:var(--earth); border-style:solid;}











.birth .stepline{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:46px; margin-top:var(--gap-3);
  padding:0 14px; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); text-align:left;
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.birth .stepline-c{flex:none; font-family:var(--ui); font-size:12px; color:var(--text-3);}
.birth .stepline-v{flex:1; min-width:0; font-family:var(--ui); font-size:13.5px;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.birth .stepline-e{flex:none; font-family:var(--ui); font-size:12px; color:var(--earth);}


.birth .stepline:active{filter:brightness(.92);}
@media (prefers-reduced-motion:reduce){ .birth .stepline:active{filter:none; border-color:var(--earth);} }


.birth.folded{padding-top:var(--top-first);}
.birth.folded > .stepline:first-of-type{margin-top:0;}






.birth .btn{margin-top:var(--gap-sec-l);}




.res-who{
  margin:0 0 var(--gap-4);
  font-family:var(--ui); font-size:12.5px; color:var(--text-3);
  font-variant-numeric:tabular-nums;
}











.otags{display:flex; flex-wrap:nowrap; gap:var(--gap-2); margin-top:var(--gap-3);
       overflow:auto hidden; overscroll-behavior-x:contain; scrollbar-width:none;}
.otags::-webkit-scrollbar{display:none;}
.otags > :first-child{margin-left:auto;}
.otags > :last-child{margin-right:auto;}
.otags > *{flex:none; white-space:nowrap;}











.otags-2{margin-top:var(--gap-2);}




.otag{
  display:inline-flex; align-items:baseline; gap:5px;
  min-height:27px; padding:4px 11px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--border);
}
.otag b{font-family:var(--ui); font-size:14px; font-weight:600; color:var(--text);}
.otag i{font-style:normal; font-family:var(--ui); font-size:11.5px;}


























.otag.is-lock{
  background:var(--surface); border-color:rgba(237,234,227,.22); align-items:center;
}
.otag.is-lock i{color:rgba(237,234,227,.72);}
.otag-lock{display:inline-flex; align-items:center;}
.otag-lock .ic{width:14px; height:14px; stroke-width:1.65;
               color:var(--text-3); display:block;}





.pplrow{margin:0;}



.ppl-hint:empty{margin-top:0;}


.pplrow.flat{margin:0;}





.birth .pplrow.flat .pplscroll{padding-bottom:0;}

.birth .pplrow.flat ~ .tin{margin-top:var(--gap-sec-m);}





.ppl-hint{
  margin:var(--gap-2) var(--pad-screen) 0;
  font-family:var(--ui); font-size:11.5px; line-height:1.5; color:var(--text-3);
}









.ppl[aria-selected="true"][data-role="a"]{
  background:var(--earth); border-color:var(--earth); color:var(--bg);
}
.ppl[aria-selected="true"][data-role="a"] .ppl-rel{color:rgba(11,11,12,.65);}
.ppl[aria-selected="true"][data-role="b"]{
  background:none; border-color:var(--wood); color:var(--wood);
  border-style:dashed; border-width:2px;
}
.ppl[aria-selected="true"][data-role="b"] .ppl-rel{color:var(--wood); opacity:.8;}












.scr-me > * + *,
.mypage > * + *,
.board > * + *{margin-top:var(--gap-sec-m);}



.scr-me > .pil-grid + *{margin-top:var(--gap-sec-l);}





.scr-me > .sr-only + *,
.mypage > .sr-only + *,
.board > .sr-only + *{margin-top:0;}

.mypage > .lbl + *{margin-top:var(--gap-2);}

.mypage > .my-foot{margin-top:var(--gap-sec-m);}
.mypage > * + .lbl{margin-top:var(--gap-sec-m);}











.mypage > .my-who:empty + .lbl,
.mypage > .my-who:empty + .lbl[hidden] + .mycat[hidden] + .lbl{margin-top:0;}





















@media (min-height: 730px){
  .mypage > * + .lbl{margin-top:var(--gap-sec-l);}
}
.lt-one{
  padding:var(--gap-4); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border);
}


.lt-one.is-empty{background:none; border-style:solid; border-color:var(--border-hair);}
.lt-lead{margin:0;}














.empty-mid{position:absolute; left:0; right:0; top:calc(84px + var(--ppl-drop, 0px)); bottom:86px;
           display:flex; flex-direction:column; align-items:center;
           justify-content:center; text-align:center;}
.empty-mid .body-l{margin:0;}














#s-match:has(#mtHero > *) .empty-mid,
#s-match:has(#mtGrid > *) .empty-mid,
#s-match:has(#mtBody .mt-read) .empty-mid,
#s-me:has(#meHero > *) .empty-mid,
#s-me:has(#pilGrid > *) .empty-mid,
#s-luck:has(#dwRow > *) .empty-mid{display:none;}






.res-hero:empty{display:none;}




.lt-head{display:flex; gap:var(--gap-3); align-items:flex-start;
         margin-bottom:var(--gap-3);}
.lt-sq{
  flex:none; width:48px; height:48px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  

  font-size:28px; border:1px solid;
}





.lt-tags{display:flex; flex-wrap:wrap; align-content:flex-start;
         gap:var(--gap-2); min-width:0; padding-top:2px;}
.lt-tag{
  display:inline-flex; align-items:center; min-height:26px; padding:0 8px;
  font-family:var(--ui); font-size:11.5px; font-weight:500; line-height:1.4;
  color:var(--text-2); border:1px solid var(--border); border-radius:var(--r-pill);
  white-space:nowrap;
}
.lt-one .body-l + .body-l{margin-top:var(--gap-3);}














#readBox .sec,
#lkRead .sec{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); margin-top:var(--gap-2);
}
#readBox .sec summary{
  display:flex; align-items:flex-start; gap:var(--gap-2);
  
  min-height:44px; padding:var(--gap-3); cursor:pointer;
  font-family:var(--ui); font-size:14px; font-weight:600; color:var(--text);
  list-style:none;
}
#readBox .sec summary::-webkit-details-marker{display:none;}



.sec-tag{
  flex:none; font-style:normal; font-family:var(--ui);
  


  font-size:11.5px; font-weight:500; line-height:1.9; color:var(--text-3);
  padding:0 7px; border:1px solid var(--border); border-radius:var(--r-pill);
  white-space:nowrap;
}









#readBox .sec > summary,
#lkRead .sec > summary,
.mt-read .sec > summary{
  padding:var(--gap-3);
  

  padding-right:calc(var(--gap-3) + 16px);
  



  font-family:var(--ui); font-size:14px; font-weight:600; color:var(--text);
}





#readBox .sec > summary b,
#lkRead .sec > summary b,
.mt-read .sec > summary b{font-size:inherit; font-weight:inherit; line-height:1.5;}



#readBox .sec > summary::after,
#lkRead .sec > summary::after,
.mt-read .sec > summary::after{
  right:var(--gap-3);
}


#readBox .sec > summary::before,
#lkRead .sec > summary::before,
.mt-read .sec > summary::before{
  right:calc(var(--gap-3) + 5.6px);
}



.sec .narration p{margin-bottom:0;}



#readBox .sec .narration,
#lkRead .sec .narration,
.mt-read .sec .narration{padding:0 var(--gap-3) var(--gap-3);}



#readBox .sec .narration .body-l + .body-l,
#lkRead .sec .narration .body-l + .body-l,
.mt-read .sec .narration .body-l + .body-l{margin-top:var(--gap-4);}


.mt-extra .sec .narration .body-s + .body-l{margin-top:var(--gap-4);}





















































#readBox .sec .narration .body-l,
#lkRead .sec .narration .body-l,
.mt-read .sec .narration .body-l{text-align:start;}
@supports (text-justify: inter-character){
  #readBox .sec .narration .body-l,
  #lkRead .sec .narration .body-l,
  .mt-read .sec .narration .body-l{text-align:justify; text-justify:inter-character;}
}











.row-hintwrap{margin-top:var(--gap-sec-l);}










#s-luck .row-hintwrap.has-dial{min-height:calc(100svh - 208px - var(--ppl-drop, 0px));}














#s-luck .row-hintwrap.has-dial{max-height:calc(100svh - 208px - var(--ppl-drop, 0px));
  display:flex; flex-direction:column; justify-content:center;}
#s-luck .row-hintwrap.has-dial > .dialcard{
  min-height:0; flex:0 1 auto; display:flex; flex-direction:column;}
#s-luck .row-hintwrap.has-dial #dial{min-height:0; flex:0 1 auto;}
#s-luck .row-hintwrap.has-dial .dial-note{flex:none;}







.dialcard{
  margin-left:calc(var(--pad-screen) * -1 + 4px);
  margin-right:calc(var(--pad-screen) * -1 + 4px);
}




#dial .dial-brk{transition:opacity .2s ease;}



#dial{display:block; width:100%; height:auto;
  user-select:none; -webkit-user-select:none;}
#dial .seg{cursor:pointer; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  
  transform-box:fill-box; transform-origin:center;}









#dial .seg:focus{outline:none;}
#dial .seg:focus-visible{outline:2px solid var(--text); outline-offset:2px;}








#dial .seg[data-ring="out"]{touch-action:pan-y;}











.dial-note{display:block; width:fit-content; min-width:min(100%, 340px); margin:14px auto 0;
  padding:8px 16px; border-radius:999px;
  font-family:var(--ui); font-size:12.5px; font-weight:600; line-height:1.6;
  background:#1F1F1F; color:#FFFFFF; text-align:center;}



#tlDetail:empty{display:none;}



@keyframes dialRise{from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:none;}}







#dial .dial-in, #dial .dial-out{transform-box:view-box; transform-origin:180px 180px;}
#dial.dial-guide-1 .dial-out{opacity:0; pointer-events:none;}
#dial.dial-guide-1 .dial-aux{visibility:hidden;}
#dial.dial-guide-1 .dial-in{animation:dialNudgeIn .8s ease-in-out both;}
#dial.dial-guide-2 .dial-out{animation:dialEnterOut 1.3s ease-out both;}
@keyframes dialNudgeIn{50%{transform:rotate(-14deg);}}
@keyframes dialEnterOut{0%{opacity:0; transform:scale(1.12);} 40%{opacity:1; transform:none;}
  70%{transform:rotate(12deg);} 100%{transform:none;}}














.dial-note.guiding{min-height:56px; display:flex; align-items:center; justify-content:center;
  width:min(100%, 340px); text-wrap:balance;}
@media (prefers-reduced-motion:reduce){ #dial *{animation:none !important; transition:none !important;} }





.pick-set{border:0; padding:0; margin:0; min-width:0;}
.pick-set legend{padding:0;}
.pick-row{display:flex; gap:var(--gap-2); margin-top:var(--gap-2);}

.pick-note{margin:0; font-family:var(--ui); font-size:12.5px; line-height:1.5; color:var(--text-3);}
.pick-row input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}


.pick-b{
  


  flex:1; min-width:0; height:52px; padding:0 var(--gap-2); border-radius:12px;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ui); font-size:14px; font-weight:500; color:var(--text-2);
  cursor:pointer; white-space:nowrap;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pick-b:active{background:var(--surface-hi); transition-duration:0s;}


.pick-row input:checked + .pick-b,



.pick-b[aria-pressed="true"]{
  background:rgba(219,165,60,.12); border-color:var(--earth); color:var(--earth);
}
.pick-row input:focus-visible + .pick-b{box-shadow:inset 0 0 0 1px var(--focus-ring);}



















.opt .pick-b, .askbox .pick-b,
.dash:not(.on){background:transparent; border-style:dashed;}


.dash:not(.on):active{background:var(--surface-hi);}
.opt .pick-row input:checked + .pick-b,
.opt .pick-b[aria-pressed="true"],
.askbox .pick-b[aria-pressed="true"]{border-style:solid;}











.opt .tin{border-style:solid; border-color:rgba(237,234,227,.20);}
.opt .tin.has{border-style:solid; border-color:var(--border);}

.opt .tin.has{border-style:solid;}


.loading{align-items:center; padding:24px var(--pad-screen); text-align:center;}
.loading > :first-child{margin-top:auto;}
.loading > .load-pct{margin-bottom:auto;}



.load-stack{position:relative; width:260px; height:260px; margin-bottom:var(--gap-sec-l);}
.load-stack > *{position:absolute; inset:0;}
.load-dash{animation:orbit 9s linear infinite;}
.load-dash circle{
  fill:none; stroke:rgba(237,234,227,.18); stroke-width:1; stroke-dasharray:3 7;
  animation:dashroll 3s linear infinite;
}
.load-orbit{animation:orbit 6s linear infinite;}
.load-orbit i{
  position:absolute; width:13px; height:13px; border-radius:50%;
  top:calc(50% - 6.5px); left:calc(50% - 6.5px);
  animation:pop .5s ease both;
}
.load-cat{display:flex; align-items:center; justify-content:center;}

.load-cat .hwcard{width:auto; height:112px; animation:hwshuffle 1.5s ease-in-out infinite;}

.load-han{font-family:var(--han); font-size:14px; color:var(--text-4); pointer-events:none;}
.load-han b{position:absolute; font-weight:700;}
.load-han b:nth-child(1){left:6px; top:34px; animation:drift 2.4s ease-in-out infinite;}
.load-han b:nth-child(2){right:8px; bottom:40px; animation:drift 3.1s ease-in-out .4s infinite;}
.load-msg{font-family:var(--kr); font-size:17px; margin:0 0 var(--gap-sec-s);}
.load-track{width:210px; height:4px; border-radius:2px; background:rgba(237,234,227,.1);
            overflow:hidden;}

.load-bar{height:100%; width:0; border-radius:2px;
          background:linear-gradient(90deg,#3FBE84,#DBA53C,#E05A4B);
          transition:width .18s linear;}
.load-pct{font-family:var(--ui); font-size:11.5px; letter-spacing:1px; color:var(--text-3);
          margin:var(--gap-3) 0 0;}

.pil-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap-2);}
.pil-col{display:flex; flex-direction:column; gap:var(--gap-2); min-width:0;}
.pil-cap{font-family:var(--ui); font-size:11.5px; font-weight:500; color:var(--text-3);
         text-align:center; margin-bottom:2px;}





.gcell{
  position:relative; height:88px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border-hair);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; cursor:pointer; padding:0;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:background-color .15s ease, border-color .15s ease;
}
.gcell b{font-family:var(--han); font-size:32px; font-weight:700; line-height:1;}

.gcell i{font-style:normal; font-family:var(--ui); font-size:11.5px; color:var(--text-3);}

.gcell.on{background:var(--surface-hi);}

.g-role{
  

  position:absolute; top:4px; right:4px; font-style:normal;
  font-family:var(--ui); font-size:10.5px; line-height:1; padding:2px 3px;
  border-radius:var(--r-pill); background:var(--surface-hi);
  color:var(--earth); border:1px solid var(--border);
}
.g-role.is-gi{color:var(--text-3);}


.res-hero{
  

























  


  


















  padding:0 var(--pad-screen);
  











  












  




  min-height:calc(100svh - 448px - var(--ppl-drop, 0px));
  






  display:flex; flex-direction:column; justify-content:center;
  

  text-align:center;
}
.res-circle{
  width:188px; height:188px; border-radius:50%; margin:0 auto var(--gap-4);
  border:1px solid rgba(219,165,60,.3);
  display:flex; align-items:center; justify-content:center;
}


.res-circle.hw{border-color:transparent;}
.res-circle.hw .hwcard{width:auto; height:186px; animation:hwfloat 4.5s ease-in-out infinite;}




@keyframes hwfloat{
  0%,100%{transform:translateY(0) rotate(-.6deg);}
  50%{transform:translateY(-2.5px) rotate(.6deg);}
}
@keyframes hwshuffle{
  0%,100%{transform:rotate(-5deg) translateY(0);}
  50%{transform:rotate(5deg) translateY(-2px);}
}
@keyframes hwslam{
  0%{transform:translateY(-24px) rotate(-6deg); opacity:.4;}
  55%{transform:translateY(2px) rotate(1deg); opacity:1;}
  75%{transform:translateY(-2px);}
  100%{transform:none; opacity:1;}
}

.res-circle.hw.is-tap .hwcard{animation:hwslam .5s ease-out;}













.res-circle{
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;          
  transition:border-color .2s ease-out;
}
.res-circle.is-tap{border-color:rgba(219,165,60,.75);}




.res-circle.hw.is-tap{border-color:transparent;}



@media (prefers-reduced-motion: reduce){
  .res-circle.is-tap svg{animation:none;}
}












.res-title{font-family:var(--kr); font-size:20px; line-height:1.35; font-weight:400;
           margin:0;}
















.match{padding:var(--top-first) var(--pad-screen) 0;}







.mypage{padding:var(--top-first) var(--pad-screen) 0;}



.sv-go{flex:none; font-size:14px; color:var(--text-3);}


.pay-card{
  margin-top:var(--gap-3); padding:var(--gap-4);
  background:var(--surface); border:1px solid var(--border-hair); border-radius:var(--r-lg);
}
.pay-card .btn{margin-top:var(--gap-4);}


.policy-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0 var(--gap-4);
  margin-top:var(--gap-sec-l);
}
.policy-row a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--ui); font-size:11.5px; color:var(--text-4); text-decoration:none;
}


.my-who{
  font-family:var(--ui); font-size:12.5px; color:var(--text-2); margin:0 0 var(--gap-4);
}
.my-who:empty{display:none;}




.my-foot{display:flex; flex-direction:column; align-items:stretch;
         gap:var(--gap-2); padding:var(--gap-sec-l) 0 0;}
.my-foot .btn{margin:0; width:100%;}
















.my-foot .btn.ghost{border:1px solid var(--border); background:transparent;}




.my-foot .btn.ghost:active{background:var(--surface-hi);}







.my-quit{
  display:inline-flex; align-items:center; min-height:44px; padding:0 4px;
  




  font-family:var(--ui); font-size:11.5px; color:var(--text-2);
  background:none; border:0; cursor:pointer;
  transition:color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.my-quit:active{color:var(--text);}



@media (hover:hover) and (pointer:fine){ .my-quit:hover{color:var(--text);} }



.mycol{
  display:grid; grid-template-columns:1fr auto; gap:var(--gap-2) var(--gap-3);
  align-items:center; width:100%; padding:var(--gap-4);
  background:var(--surface); border:1px solid var(--border-hair); border-radius:var(--r-lg);
  

  color:inherit; text-align:left; cursor:pointer; text-decoration:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  


  transition:background-color .16s ease, border-color .16s ease;
}

.mycol:active{
  background:var(--surface-hi); border-color:var(--border);
  transition-duration:0s;
}
@media (hover:hover) and (pointer:fine){
  .mycol:hover{background:var(--surface-hi);}
}
@media (prefers-reduced-motion:reduce){ .mycol{transition:none;} }


.mycol-t{grid-column:1; font-family:var(--ui); font-size:12.5px; color:var(--text-3);}
.mycol-t b{font-family:var(--ui); font-size:26px; font-weight:600; color:var(--text);
           font-variant-numeric:tabular-nums; margin-right:5px;}











.mycol-t b.is-wait, .dk-count b.is-wait{
  color:transparent; border-radius:4px; background:var(--surface-hi);
}
@media (prefers-reduced-motion:no-preference){
  .mycol-t b.is-wait, .dk-count b.is-wait{animation:wait 1.2s ease-in-out infinite;}
}
.mycol-bar{grid-column:1; height:4px; border-radius:2px;
           background:var(--surface-hi); overflow:hidden;}
.mycol-bar i{display:block; height:100%; background:var(--earth);}



.mycol-b{grid-column:1;}


.mycol.is-plain .mycol-t b{font-size:16px; margin-right:0;}
.mycol-go{grid-column:2; grid-row:1 / span 3; align-self:center; color:var(--text-3);}

.mycol-go .ic{width:16px; height:16px; display:block;}


.deck{padding:var(--top-first) var(--pad-screen) 0;}
.dk-promo{
  padding:var(--gap-4); background:var(--surface);
  border:1px solid var(--border-hair); border-radius:var(--r-lg);
}
.dk-promo-b{font-family:var(--ui); font-size:12.5px; line-height:1.7; color:var(--text-2);
            margin:0;}

.dk-promo-b b, .mycol-b b{color:var(--earth); font-weight:600;}
.dk-bar{height:4px; border-radius:2px; background:var(--surface-hi); overflow:hidden;
        margin-top:var(--gap-3);}
.dk-bar i{display:block; height:100%; background:var(--earth); transition:width .4s ease;}

@media (prefers-reduced-motion:reduce){ .dk-bar i{transition:none;} }
.dk-count{font-family:var(--ui); font-size:11.5px; color:var(--text-3);
          margin:6px 0 0; text-align:right;}
.dk-count b{font-family:var(--ui); font-size:14px; font-weight:600; color:var(--text);
            font-variant-numeric:tabular-nums;}



.dk-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--gap-3) var(--gap-2);
  margin:var(--gap-sec-m) 0 var(--gap-sec-l);
}
.dk-slot{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:0; padding:0; color:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}


.dk-art{
  position:relative; width:100%; aspect-ratio:80 / 116;
  display:flex; align-items:center; justify-content:center;
}

.dk-art.is-back{opacity:.5;}
.dk-art svg{width:100%; height:100%; display:block;}

.dk-n{
  position:absolute; right:-3px; bottom:-3px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--earth); color:#1A1613; font-style:normal;
  font-family:var(--ui); font-size:10px; font-weight:700; line-height:16px; text-align:center;
}
.dk-name{font-family:var(--ui); font-size:10.5px; color:var(--text-3);}
.dk-slot.is-on .dk-name{color:var(--text);}


.sl-row{
  display:flex; align-items:center; gap:var(--gap-3); width:100%;
  min-height:76px; padding:var(--gap-2) 0; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--border-hair);
  color:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.sl-mini{flex:none;}
.sl-mini svg{height:56px; width:auto; display:block;}
.sl-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.sl-nm{display:flex; align-items:center; gap:var(--gap-2);}
.sl-nm b{font-family:var(--ui); font-size:14px; font-weight:600;}

.sl-nm i{
  font-style:normal; font-family:var(--ui); font-size:10.5px; color:var(--text-3);
  border:1px solid var(--border); border-radius:9px; padding:1px 7px;
}




.sl-b{font-family:var(--ui); font-size:12.5px; color:var(--text-2);
      font-variant-numeric:tabular-nums;}


.sl-next{
  display:flex; align-items:center; gap:var(--gap-3); width:100%;
  min-height:76px; padding:var(--gap-2) 0;
}

.sl-next-c{flex:none; opacity:.5;}
.sl-next-c svg{height:56px; width:auto; display:block;}
.sl-next-t{flex:1; min-width:0; font-family:var(--ui); font-size:11.5px;
           line-height:1.6; color:var(--text-3);}


.tabbar{
  















  position:fixed; left:0; right:0; bottom:0; z-index:20;
  width:min(100%, 400px); margin-inline:auto;
  height:calc(var(--tabbar) + env(safe-area-inset-bottom));
  padding:12px calc(8px + env(safe-area-inset-right))
          env(safe-area-inset-bottom) calc(8px + env(safe-area-inset-left));
  


  display:none; grid-auto-flow:column; grid-auto-columns:1fr;
  







  background:var(--bg);
  border-top:1px solid var(--border-hair);
}
.tabbar.on{display:grid;}

.tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.tab svg{width:26px; height:26px; color:var(--text-4); transition:color .15s ease;}




.tab .tab-lb{font-family:var(--ui); font-size:11px; line-height:1;
  letter-spacing:.4px; color:var(--text-4); transition:color .15s ease;}
.tab.on svg{color:var(--earth);}
.tab.on .tab-lb{color:var(--earth); font-weight:600;}
@media (prefers-reduced-motion:reduce){
  .tab svg, .tab .tab-lb{transition:none;}
}










.load-pct,
.f{
  font-variant-numeric:tabular-nums;
}



@media (hover:hover) and (pointer:fine){
  .key:hover, .f:hover, .gcell:not(.is-none):hover,
  .pick-b:hover, .tab:hover{
    background-color:var(--surface-hi);
  }
  .btn:hover{background-color:rgba(237,234,227,.88);}
  .btn.ghost:hover{background-color:var(--surface-hi); border-color:rgba(237,234,227,.32);}.skip:hover{color:var(--text);}
}








.ic{fill:none; stroke:currentColor; stroke-width:1.45;
    stroke-linecap:round; stroke-linejoin:round;}



@keyframes orbit{from{transform:rotate(0);} to{transform:rotate(360deg);}}
@keyframes dashroll{to{stroke-dashoffset:-64;}}






@keyframes pop{
  0%{scale:.5; opacity:0;}
  60%{scale:1.18; opacity:1;}
  100%{scale:1; opacity:1;}
}
@keyframes drift{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(4px,-7px);}
}
@keyframes blinkdot{
  0%,100%{opacity:.25;}
  50%{opacity:1;}
}



@media (prefers-reduced-motion: reduce){
  .scr.on, .splash-orbit, .load-dash, .load-dash circle,
  .load-orbit, .load-orbit i, .load-han b,
  .splash-hint, .hwcard{
    animation:none !important;
  }
  .load-bar{transition:none;}
}















.pplscroll{
  display:flex; align-items:center; gap:var(--gap-2);
  


  padding:calc(var(--gap-sec-s) + var(--ppl-drop, 0px)) var(--pad-screen) 10px;
  







  overflow:auto hidden; overscroll-behavior-x:contain; scrollbar-width:none;
}
.pplscroll::-webkit-scrollbar{display:none;}



.pplscroll{position:relative;}









.pplscroll{
  --ppl-fade:28px;
  -webkit-mask-image:var(--ppl-mask, none);
          mask-image:var(--ppl-mask, none);
}
.pplscroll.more{
  --ppl-mask:linear-gradient(to right, #000 calc(100% - var(--ppl-fade)), transparent 100%);
}
.pplscroll.less{
  --ppl-mask:linear-gradient(to right, transparent 0, #000 var(--ppl-fade));
}
.pplscroll.more.less{
  --ppl-mask:linear-gradient(to right, transparent 0, #000 var(--ppl-fade),
                             #000 calc(100% - var(--ppl-fade)), transparent 100%);
}
.ppl-list{display:flex; align-items:center; gap:var(--gap-2);}




.match .pplscroll{padding-bottom:6px;}
.match .pplscroll + .pplscroll{padding-top:0;}
.ppl{
  flex:0 0 auto; width:auto; margin:0;
  






  display:inline-flex; flex-wrap:wrap; align-content:center;
  align-items:baseline; gap:5px;
  padding:7px 13px; min-height:44px;
  font-family:var(--ui); font-size:14px; font-weight:500; line-height:1.3;
  color:var(--text-3); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-pill);
  white-space:nowrap; cursor:pointer;
  

  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}





.ppl[aria-selected="true"], .ppl[aria-pressed="true"]{
  color:var(--bg); background:var(--earth); border-color:var(--earth); font-weight:600;
}
.ppl[aria-selected="true"] .ppl-rel{color:rgba(11,11,12,.82);}




.ppl[aria-selected="true"]:active, .ppl[aria-pressed="true"]:active{filter:brightness(.92);}



.ppl-rel{font-size:11.5px; color:var(--text-3);}
.ppl[aria-selected="true"] .ppl-rel{color:rgba(11,11,12,.82);}

.ppl-add{border-style:dashed; background:transparent; color:var(--text-4);}
@media (prefers-reduced-motion:reduce){ .ppl{transition:none;} }











.home{padding:var(--top-start) var(--pad-screen) 0;}







.scr-me{padding:0 var(--pad-screen) 0;}











#mtSum .body-l + .body-l{margin-top:var(--gap-3);}

.why{
  margin-top:var(--gap-sec-m); padding:var(--gap-4);
  background:var(--surface-hi); border-radius:var(--r-md);
}


.gcell.is-wait{
  background:var(--surface-hi); border:1px solid var(--border-hair);
  border-radius:var(--r-grid); min-height:64px;
}
@media (prefers-reduced-motion:no-preference){
  .gcell.is-wait{animation:wait 1.2s ease-in-out infinite;}
}
@keyframes wait{0%,100%{opacity:.5}50%{opacity:.85}}



.gcell.is-none{cursor:default;}


.load-fail{
  padding:var(--gap-4); background:var(--surface);
  border:1px solid var(--border-hair); border-radius:var(--r-lg); text-align:center;
}
.load-fail .btn{margin-top:var(--gap-3);}


.load-fail-what{color:var(--text);}


.load-fail-why{margin-top:var(--gap-1);}

.load-fail-hint{margin-top:var(--gap-2); color:var(--text-3);}

.load-fail .btn[disabled]{opacity:.6;}
































.mt-wait{height:var(--gap-sec-m); padding:0; display:flex; align-items:center;}
.mt-read{margin-top:var(--gap-sec-m);}
.mt-read.is-skel{margin-top:0;}
.mt-read .sec{background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); margin-top:var(--gap-2);}
.mt-read .sec summary{display:flex; align-items:flex-start; gap:var(--gap-2);
  min-height:44px; padding:var(--gap-3); cursor:pointer; list-style:none;
  font-family:var(--ui); font-size:14px; font-weight:600; color:var(--text);}
.mt-read .sec summary::-webkit-details-marker{display:none;}
.mt-read .sec .narration{padding:0 var(--gap-3) var(--gap-3);}
.mt-read .sec .narration .body-l + .body-l{margin-top:var(--gap-4);}








.sec.is-lock{
  background:none; border:1px solid var(--border-hair);
  border-radius:var(--r-lg); margin-top:var(--gap-2);
}
.sec-lockhead{
  display:flex; align-items:center; gap:var(--gap-2);
  min-height:44px; padding:var(--gap-3);
  font-family:var(--ui); font-size:14px; font-weight:600; color:var(--text-3);
}



.sec-lockhead b{flex:1; font-weight:600; font-variant-numeric:tabular-nums;}



.sec-lockhead:has(+ .sec-tease){padding-bottom:0;}







.birth [hidden]{display:none;}
.birth .btn[hidden]{display:none;}


.birth .nx{margin-top:var(--gap-sec-m);}
.sec-tease{
  margin:0; padding:2px var(--gap-3) var(--gap-3);
  font-family:var(--ui); font-size:12.5px; line-height:1.5; color:var(--text-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}











.sec.is-fill .sec-lockhead{color:var(--text-2);}







.lock-ic .ic{width:16px; height:16px; color:var(--text-3); display:block;}






.paywall:first-child{margin-top:0;}





.paywall{
  margin-top:var(--gap-sec-m); padding:var(--gap-4);
  border-radius:var(--r-lg); background:var(--surface);
  border:1px solid var(--border);
}



.paywall.is-skel{opacity:.28; filter:blur(3px); pointer-events:none;}




.pay-lead{margin:0; font-family:var(--kr); font-size:14px; line-height:1.65;
          color:var(--text-2);}
.paywall .btn{margin-top:var(--gap-3);}

.pay-btn{display:flex; align-items:center; justify-content:center; gap:8px;}








.tin-foot{
  margin:var(--gap-2) 0 0; display:flex; justify-content:flex-end;
  align-items:baseline; gap:var(--gap-2);
  font-family:var(--ui); font-size:12.5px; line-height:1.5; color:var(--text-3);
}
.tin-cnt{font-family:var(--ui); font-variant-numeric:tabular-nums; color:var(--text-4);}




.dw.is-lock{cursor:default; opacity:.72;}
.dw.is-lock:active{background:var(--surface);}
#payBox:empty{display:none;}














.policy-row a, .ppl-add, .my-quit{color:var(--text-3);}







.ppl-hint, .otag i, .res-who{font-size:12.5px;}
.wheel-cap{font-size:11.5px;}  




.policy-row a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 4px;
  transition:color .15s ease;
}
.policy-row a:active, .my-quit:active{color:var(--text);}
@media (hover:hover) and (pointer:fine){
  .policy-row a:hover, .my-quit:hover{color:var(--text);}
}
@media (prefers-reduced-motion:reduce){ .policy-row a, .my-quit{transition:none;} }







.stage, .stage *{word-break:keep-all; overflow-wrap:anywhere;}


.han, .gcell, .wheel-i, .lt-sq{overflow-wrap:normal;}







#lkRead{margin-top:var(--gap-sec-m);}
#lkRead .sec.is-lock{margin-top:var(--gap-2);}







.qg{margin-top:var(--gap-sec-m);}
.qg-h{
  font-family:var(--ui); font-size:14px; font-weight:600; color:var(--text-2);
  margin:0 0 var(--gap-2);
}
.qg-lead{margin:0 0 var(--gap-3); color:var(--text-3);}
.qg-l{list-style:none; margin:0; padding:0;}


.qg-i{
  display:block; width:100%; text-align:left;
  font-family:var(--kr); font-size:14px; line-height:1.75; font-weight:400;
  color:var(--text-2); text-wrap:pretty;
  padding:var(--gap-3); min-height:44px;
  background:none; border:1px solid var(--border-hair);
  border-radius:var(--r-lg); cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:border-color .16s ease, color .16s ease;
}


.qg-i[aria-pressed="true"]{color:var(--text); border-color:var(--earth);}
.qg-l li + li{margin-top:var(--gap-2);}
@media (prefers-reduced-motion:reduce){ .qg-i{transition:none;} }

.pay-ask{margin:var(--gap-2) 0 0; color:var(--text-2);}
.pay-ask b{font-family:var(--ui); font-size:11.5px; color:var(--text-3);}






.mycat{
  display:flex; align-items:center; gap:var(--gap-3); width:100%;
  

  min-height:76px; padding:var(--gap-4);
  background:var(--surface); border:1px solid var(--border-hair);
  border-radius:var(--r-lg);
  color:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.mycat[hidden]{display:none;}










.mycat .sl-nm b{font-size:20px; line-height:1.35;}
.mycat .sl-mini svg{height:44px;}




.mycat .sl-mini.is-wait{opacity:.5;}
@media (prefers-reduced-motion:no-preference){
  .mycat .sl-mini.is-wait{animation:wait 1.2s ease-in-out infinite;}
}

.sl-login{font-family:var(--ui); font-size:10.5px; color:var(--text-3);}
























.askbox{margin-top:var(--gap-sec-m);}





.askbox + *{margin-top:var(--gap-sec-m);}
.askbox .lbl{display:block; margin:0 0 var(--gap-2);}


.askbox .pick-row + .lbl{margin-top:var(--gap-sec-m);}

.pick-wrap{flex-wrap:wrap;}
.pick-wrap .pick-b{flex:0 1 auto; min-width:auto; padding:0 var(--gap-4);}







.bd-row{text-decoration:none; display:flex;}

.bd-row .sl-nm{align-items:flex-start; flex-wrap:wrap;}
.bd-row .sl-nm b{line-height:1.4;}

.bd-row .sl-nm i{white-space:nowrap; flex:none;}
div.bd-row{cursor:default;}
div.bd-row .sl-nm b{color:var(--text-2);}

.bd-row .sl-b{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.55;
}


.bd-empty{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--gap-3);
  margin-top:var(--gap-sec-s); padding:var(--gap-4);
  background:var(--surface); border:1px solid var(--border-hair);
  border-radius:var(--r-lg);
}
.bd-empty p{margin:0; color:var(--text-2);}







.ask-card::backdrop{background:rgba(11,11,12,.72); backdrop-filter:blur(6px);}

body.has-ask{overflow:hidden;}
.ask-card{
  

  width:calc(100% - var(--pad-screen) * 2); max-width:340px;
  margin:auto; padding:var(--gap-4);
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-lg);
  overscroll-behavior:contain;
}


.ask-card :focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--r-sm);
}
.ask-t{
  margin:0; font-family:var(--ui); font-size:16px; font-weight:600;
  line-height:1.5; color:var(--text); text-wrap:balance;
}
.ask-b{margin-top:var(--gap-sec-s);}
.ask-b > * + *{margin-top:var(--gap-2);}
.ask-p{
  margin:0; font-family:var(--kr); font-size:14px; line-height:1.6;
  color:var(--text-2); text-wrap:pretty;
}




.ask-cost{
  padding:var(--gap-3); border-radius:var(--r-md);
  background:var(--surface-hi); text-align:center;
}

.ask-p + .ask-cost{margin-top:var(--gap-3);}
.ask-num{
  margin:0; display:flex; justify-content:center;
  align-items:center; gap:var(--gap-3);
  font-family:var(--ui); font-size:20px; font-weight:600; color:var(--text-3);
  font-variant-numeric:tabular-nums;
}


.ask-num i{display:flex; color:var(--text-4);}
.ask-num i .ic{width:16px; height:16px; display:block;}

.ask-num b.is-left{color:var(--earth);}
.ask-row{display:flex; gap:var(--gap-2); margin-top:var(--gap-sec-s);}


.ask-row .dash{background:var(--surface); border-style:solid; color:var(--text-2);}


.ask-row > .dash.wide, .ask-row > .btn{
  flex:1; min-width:0; width:auto; margin-top:0;
  height:52px; min-height:52px; padding:0; font-size:14px;
}

.ask-row .btn.is-warn{background:var(--danger); color:var(--text);}

















.load-tag{margin:0 0 var(--gap-sec-s); display:flex; justify-content:center;}
.load-tag[hidden]{display:none;}









.load-tag{min-height:44px;}




.load-tagwrap{display:inline-flex; gap:6px;}
.load-tagx{
  

  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--ui); font-size:12.5px; line-height:1;
  padding:0 14px; border-radius:var(--r-pill); text-decoration:none;
  background:var(--surface-hi); color:var(--earth);
  border:1px solid var(--border); white-space:nowrap;
}
.load-stay{
  margin:var(--gap-3) auto 0; max-width:300px;
  font-family:var(--kr); font-size:12px; line-height:1.6;
  color:var(--text-3); text-align:center; text-wrap:pretty;
}
























.lgwait{
  position:fixed; inset:0; z-index:60;      
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:16px; background:var(--bg);
  font-family:var(--ui);
}
.lgwait:not([hidden]){display:flex;}
.lgwait-txt{margin:0; color:var(--text-2); font-size:15px; line-height:1;}


.lgwait-dots{display:flex; gap:7px;}
.lgwait-dots i{
  width:7px; height:7px; border-radius:50%; background:var(--text-3);
  animation:lgwait-beat 1.05s ease-in-out infinite;
}
.lgwait-dots i:nth-child(2){animation-delay:.14s;}
.lgwait-dots i:nth-child(3){animation-delay:.28s;}
@keyframes lgwait-beat{
  0%,70%,100%{opacity:.28; transform:translateY(0);}
  35%{opacity:1; transform:translateY(-4px);}
}

@media (prefers-reduced-motion:reduce){
  .lgwait-dots i{animation:lgwait-fade 1.4s ease-in-out infinite;}
  @keyframes lgwait-fade{0%,100%{opacity:.3;} 50%{opacity:.85;}}
}



































   






















@media (max-height: 840px){
  
  
  






  
  .res-hero{min-height:calc(100svh - 394px - var(--ppl-drop, 0px));
            padding-top:0; padding-bottom:0;}
  .pplscroll{padding-top:calc(10px + var(--ppl-drop, 0px)); padding-bottom:8px;}
  
  .scr-me, .birth, .board{--ppl-drop:calc(var(--top-first) - 10px);}
  
  .res-circle{width:80px; height:80px;}
  .res-circle.hw .hwcard{height:78px;}
  .res-title{font-size:17px;}
  .otag{min-height:26px; padding:3px 10px;}
  .scr-me > * + *{margin-top:var(--gap-sec-s);}
  .scr-me > .sr-only + *{margin-top:0;}
  .gcell{height:72px;}   
  




  #s-luck .row-hintwrap.has-dial{min-height:calc(100svh - 178px - var(--ppl-drop, 0px));
                                 max-height:calc(100svh - 178px - var(--ppl-drop, 0px));}
}


@media (max-height: 660px){
  
  




  .res-hero{min-height:calc(100svh - 370px - var(--ppl-drop, 0px));
            padding-top:0; padding-bottom:0;}
  





  .res-circle{width:44px; height:44px; margin-bottom:var(--gap-2);}
  .res-circle.hw .hwcard{height:42px;}
  .res-title{font-size:15px;}
  .res-hero .otags{margin-top:var(--gap-2); gap:var(--gap-1);}
  .res-hero .otags-2{margin-top:var(--gap-1);}
  .otag{min-height:24px; padding:2px 9px;}
  .gcell{height:60px;}   
}










@media (max-height: 700px){
  .mypage > * + .lbl{margin-top:var(--gap-4);}
  .mypage > .my-foot{margin-top:var(--gap-4);}
}







@media (min-height: 700px) and (max-height: 840px){
  

  .res-circle{width:132px; height:132px; margin-bottom:var(--gap-sec-s);}
  .res-circle.hw .hwcard{height:130px;}
  .res-hero .otags{margin-top:var(--gap-4);}
  .res-hero .otags-2{margin-top:var(--gap-3);}
}