/* 09 OVERLAYS — 팝업, 시트, 토스트, 온보딩. */

.toast{
  position:fixed;
  z-index:2000;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  padding:9px 13px;
  background:#10244a;
  color:white;
  border-radius:999px;
  font-size:11px;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  white-space:nowrap;
}

.toast.show{
  opacity:1;
}

.tour-backdrop{
  position:fixed;
  inset:0;
  z-index:5001;
  display:none;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  pointer-events:auto;
}

.tour-backdrop.show{
  display:block;
}

.tour-shade{
  position:fixed;
  z-index:5000;
  display:none;
  background:rgba(20,42,70,.13);
  -webkit-backdrop-filter:blur(1.15px) saturate(.96);
  backdrop-filter:blur(1.15px) saturate(.96);
  pointer-events:none;
}

.tour-shade.show{
  display:block;
}

.tour-spotlight{
  position:fixed;
  z-index:5002;
  display:none;
  pointer-events:none;
  border:2px solid rgba(48,151,255,.96);
  border-radius:18px;
  box-shadow:0 0 0 3px rgba(255,255,255,.96),0 0 0 7px rgba(63,157,255,.30),0 0 24px rgba(49,146,255,.38);
  transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease,border-radius .18s ease;
}

.tour-spotlight.show{
  display:block;
  animation:tourSpotlightPulse 1.35s ease-in-out infinite;
}

.tour-overlay{
  position:fixed;
  inset:0;
  z-index:5003;
  display:none;
  background:transparent;
  pointer-events:none;
}

.tour-overlay.show{
  display:block;
}

.tour-card{
  position:fixed;
  left:14px;
  right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  max-width:600px;
  margin:auto;
  background:rgba(255,255,255,.98);
  color:#17263a;
  border:1px solid rgba(70,125,190,.16);
  border-radius:22px;
  padding:16px 16px 14px;
  box-shadow:0 18px 48px rgba(36,71,115,.20);
  pointer-events:auto;
}

.tour-card.place-top{
  top:calc(14px + env(safe-area-inset-top));
  bottom:auto;
}

.tour-card small{
  color:#1978df;
  font-weight:900;
  font-size:12px;
}

.tour-card h3{
  margin:5px 0 6px;
  font-size:18px;
  line-height:1.25;
}

.tour-card p{
  margin:0;
  color:#5b6f86;
  font-size:13px;
  line-height:1.52;
}

.tour-actions{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:12px;
}

.tour-actions button{
  border:0;
  border-radius:12px;
  padding:9px 13px;
  font-weight:900;
}

.tour-skip{
  background:#edf2f7;
  color:#6f8097;
}

.tour-next{
  background:#167fee;
  color:#fff;
  min-width:72px;
}

.tour-focus{
  filter:none;
  opacity:1;
}

body.tour-active{
  overflow:hidden;
}

body.tour-active .toast{
  z-index:5010;
}


/* 캐릭터 선택·사진 크롭·프레임 갤러리 내부 UI — Overlay 소유 */
.character-choice.selected{
  border-color:#3d9eff;
  background:#eaf5ff;
  box-shadow:0 0 0 2px rgba(61,158,255,.14) inset,0 6px 16px rgba(43,88,131,.12);
}

.character-choice-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
  margin-bottom:12px;
  overflow:visible;
}

.character-choice{
  appearance:none;
  flex-direction:column;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  border-radius:50%;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}

.character-choice img{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  background:#fff;
  border:2px solid color-mix(in srgb,var(--theme-border) 82%,#fff 18%);
  box-shadow:0 3px 9px rgba(43,88,131,.09);
}

.character-choice span{
  font-size:11px;
  line-height:1.25;
  font-weight:900;
  color:var(--theme-text);
  text-align:center;
  word-break:keep-all;
  display:none;
}

.character-choice.selected img{
  border-color:var(--theme-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent) 18%,transparent);
}

.character-choice:active img{
  transform:scale(.96);
}

.character-crop-sheet{
  width:min(100%,var(--device-dialog-max-width));
  background:#fff;
  border:1px solid rgba(169,213,245,.9);
  border-radius:24px;
  padding:16px;
  box-shadow:0 22px 60px rgba(19,52,91,.28);
}

.character-crop-sheet h3{
  margin:0 0 12px;
  text-align:center;
  font-size:17px;
  color:var(--navy);
}

.character-crop-stage{
  width:min(78vw,320px);
  aspect-ratio:1/1;
  margin:0 auto 14px;
  position:relative;
  overflow:hidden;
  border-radius:50%;
  background:#eaf5ff;
  box-shadow:0 0 0 5px #fff,0 0 0 7px var(--theme-border),0 10px 28px rgba(35,76,117,.16);
  touch-action:none;
}

.character-crop-stage img{
  position:absolute;
  left:50%;
  top:50%;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  transform-origin:center center;
}

.character-crop-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.character-crop-actions button{
  min-height:46px;
  border-radius:14px;
  border:1px solid var(--theme-border);
  background:var(--theme-soft);
  color:var(--theme-text);
  font-size:14px;
  font-weight:900;
}

.character-crop-actions .apply{
  background:var(--theme-accent);
  border-color:var(--theme-accent);
  color:#fff;
}

.character-crop-hint{
  text-align:center;
  font-size:11px;
  color:#73879b;
  margin:0 0 10px;
}

.character-current-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:112px;
}

.character-current-item>small{
  font-size:11px;
  font-weight:900;
  color:#6b7e96;
  line-height:1;
}

.character-current-item #characterCurrentPreview{
  width:112px;
  height:112px;
  flex:0 0 112px;
}

.frame-choice{
  appearance:none;
  border:1px solid rgba(169,213,245,.75);
  background:#f7fbff;
  border-radius:18px;
  padding:10px 6px 9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  min-height:108px;
  cursor:pointer;
}

.frame-choice-preview{
  position:relative;
  width:68px;
  height:68px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
}

.frame-choice-preview::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:4px solid #72BDF2;
  box-sizing:border-box;
}

.frame-choice-preview::after{
  content:"";
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--theme-softer);
  border:1px dashed var(--theme-border);
}

.frame-choice[data-frame-id="spring-flower"] .frame-choice-preview::before{
  border-color:#f59bb7;
  box-shadow:0 0 0 3px rgba(149,211,160,.42),0 0 0 6px rgba(245,155,183,.18);
}

.frame-choice[data-frame-id="gold-star"] .frame-choice-preview::before{
  border-color:#efc34f;
  box-shadow:0 0 0 3px rgba(255,225,124,.32),0 5px 12px rgba(173,123,13,.18);
}

.frame-choice[data-frame-id="jewel-blue"] .frame-choice-preview::before{
  border-color:#62c8f2;
  box-shadow:0 0 0 3px rgba(96,126,239,.28),0 0 14px rgba(70,166,242,.35);
}

.frame-choice[data-frame-id="night-glow"] .frame-choice-preview::before{
  border-color:#9b83e8;
  box-shadow:0 0 0 3px rgba(57,53,111,.45),0 0 16px rgba(129,102,224,.38);
}

.frame-choice[data-frame-id="mint-leaf"] .frame-choice-preview::before{
  border-color:#68c9a4;
  box-shadow:0 0 0 3px rgba(165,229,199,.36),0 5px 12px rgba(53,145,111,.16);
}

.frame-choice span{
  font-size:11px;
  font-weight:900;
  color:var(--theme-text);
  white-space:nowrap;
}

.frame-choice.selected{
  border-color:var(--theme-accent);
  background:var(--theme-softer);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent) 14%,transparent) inset;
}

.character-picker-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  background:rgba(18,33,52,.38);
}

.character-picker-backdrop.open{
  display:block;
}

.character-picker-sheet{
  position:fixed;
  
  left:50%;
  transform:translateX(-50%);
  width:min(calc(100% - 36px),var(--device-dialog-max-width));
  background:#fff;
  border:1px solid rgba(169,213,245,.9);
  border-radius:24px;
  padding:16px;
  max-height:calc(100dvh - 118px - env(safe-area-inset-top));
  overflow-y:auto;
  box-shadow:0 18px 50px rgba(27,64,105,.22);
}

.character-picker-sheet h3{
  margin:0 0 12px;
  font-size:17px;
  color:var(--navy);
  text-align:center;
}

.character-picker-current strong{
  display:block;
  font-size:16px;
  color:var(--navy);
  margin-bottom:4px;
}

.character-picker-current span{
  display:block;
  font-size:12px;
  color:#6b7e96;
  line-height:1.45;
}

.character-picker-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.character-picker-actions button{
  min-height:46px;
  border-radius:14px;
  border:1px solid var(--theme-border);
  background:var(--theme-soft);
  color:var(--theme-text);
  font-size:14px;
  font-weight:900;
}

.character-picker-actions .character-picker-cancel{
  grid-column:1 / -1;
  background:#fff;
  color:#718096;
}

.character-picker-current img{
  background:#fff;
  width:112px;
  height:112px;
  flex:0 0 112px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  border:2px solid color-mix(in srgb,var(--theme-border) 82%,#fff 18%);
  box-shadow:0 6px 18px rgba(43,88,131,.12);
}


.character-crop-backdrop{
  position:fixed;
  inset:0;
  z-index:10020;
  display:none;
  
  
  background:rgba(14,27,44,.58);
  
}

.character-crop-backdrop.open{
  display:flex;
}

.toast.action-toast{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:9px;
  padding-right:7px;
}

.toast.action-toast button{
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  padding:5px 9px;
  font-size:10px;
  font-weight:950;
  cursor:pointer;
}

.home-review-sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:4900;
  display:none;
  
  
  background:rgba(20,37,58,.35);
  
}

.home-review-sheet-backdrop.open{
  display:flex;
}

.home-review-sheet{
  width:min(100%,var(--device-dialog-max-width));
  max-height:min(calc(100dvh - 162px),650px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--theme-border);
  border-radius:24px 24px 18px 18px;
  box-shadow:0 20px 55px rgba(25,61,102,.25);
  padding:14px;
}

.home-review-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
}

.home-review-sheet-head small{
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  margin-bottom:2px;
}

.home-review-sheet-head h3{
  margin:0;
  color:var(--theme-text);
  font-size:18px;
}

.home-review-sheet-head button{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:var(--theme-soft);
  color:var(--theme-text);
  font-size:23px;
  line-height:1;
}

.home-review-sheet-note{
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
  margin:2px 0 8px;
}

.home-review-sheet-list{
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:1px;
}

.nickname-edit-backdrop.open{
  display:flex;
}

.nickname-edit-dialog h3{
  margin:0 0 6px;
  color:var(--theme-text);
  font-size:18px;
  font-weight:1000;
}

.nickname-edit-dialog p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
  font-weight:750;
}

.nickname-edit-input{
  width:100%;
  height:46px;
  border:1.5px solid var(--theme-border);
  border-radius:14px;
  background:var(--theme-softer);
  color:var(--theme-text);
  padding:0 13px;
  font-size:16px;
  font-weight:900;
  outline:none;
  box-sizing:border-box;
}

.nickname-edit-input:focus{
  border-color:var(--theme-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent) 15%,transparent);
}

.nickname-edit-meta{
  display:flex;
  justify-content:flex-end;
  margin:5px 2px 10px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}

.nickname-edit-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.nickname-edit-actions button{
  height:42px;
  border:0;
  border-radius:13px;
  font-size:13px;
  font-weight:1000;
  cursor:pointer;
}

.nickname-edit-cancel{
  background:var(--theme-soft);
  color:var(--theme-text);
}

.nickname-edit-save{
  background:var(--theme-accent);
  color:#fff;
}

.character-picker-current{
  border-radius:18px;
  margin-bottom:8px;
  border:0;
  background:transparent;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:18px;
  padding:8px 0 12px;
}

.frame-picker-open{
  position:relative;
  width:112px;
  height:112px;
  flex:0 0 112px;
  border-radius:50%;
  border:0;
  background:#fff;
  padding:0;
  display:grid;
  place-items:center;
  cursor:pointer;
box-shadow:
    0 12px 0 -8px rgba(46,122,88,.20),
    0 15px 22px rgba(38,84,125,.13),
    0 4px 8px rgba(38,84,125,.10),
    inset 0 2px 0 rgba(255,255,255,.90),
    inset 0 -3px 0 rgba(71,104,134,.10);
  transform:translateY(-1px);
}

.frame-picker-open::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:5px solid #72BDF2;
  box-sizing:border-box;
  pointer-events:none;
}

.frame-picker-open::after{
  content:"";
  width:68px;
  height:68px;
  border-radius:50%;
  background:var(--theme-softer);
  border:1px dashed color-mix(in srgb,var(--theme-border) 82%,#fff 18%);
}

.frame-picker-open .frame-plus{
  position:absolute;
  z-index:2;
  font-size:26px;
  line-height:1;
  font-weight:500;
  color:var(--theme-accent);
}

.frame-picker-open[data-frame-item="spring-flower"]::before{
  border-color:#f59bb7;
  box-shadow:0 0 0 3px rgba(149,211,160,.42),0 0 0 6px rgba(245,155,183,.18);
}

.frame-picker-open[data-frame-item="gold-star"]::before{
  border-color:#efc34f;
  box-shadow:0 0 0 3px rgba(255,225,124,.32),0 5px 12px rgba(173,123,13,.18);
}

.frame-picker-open[data-frame-item="jewel-blue"]::before{
  border-color:#62c8f2;
  box-shadow:0 0 0 3px rgba(96,126,239,.28),0 0 14px rgba(70,166,242,.35);
}

.frame-picker-open[data-frame-item="night-glow"]::before{
  border-color:#9b83e8;
  box-shadow:0 0 0 3px rgba(57,53,111,.45),0 0 16px rgba(129,102,224,.38);
}

.frame-picker-open[data-frame-item="mint-leaf"]::before{
  border-color:#68c9a4;
  box-shadow:0 0 0 3px rgba(165,229,199,.36),0 5px 12px rgba(53,145,111,.16);
}

.frame-gallery-backdrop{
  position:fixed;
  inset:0;
  z-index:10020;
  display:none;
  
  
  background:rgba(18,33,52,.42);
  
}

.frame-gallery-backdrop.open{
  display:flex;
}

.frame-gallery-sheet{
  width:min(100%,var(--device-dialog-max-width));
  background:#fff;
  border:1px solid rgba(169,213,245,.9);
  border-radius:24px;
  padding:16px;
  box-shadow:0 18px 50px rgba(27,64,105,.24);
}

.frame-gallery-sheet h3{
  margin:0 0 4px;
  text-align:center;
  font-size:17px;
  color:var(--navy);
}

.frame-gallery-sheet .frame-gallery-sub{
  margin:0 0 14px;
  text-align:center;
  font-size:11px;
  color:#6b7e96;
  line-height:1.45;
}

.frame-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:8px 0 14px;
}

.frame-gallery-close{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid var(--theme-border);
  background:var(--theme-soft);
  color:var(--theme-text);
  font-size:13px;
  font-weight:1000;
}


.guest-login-overlay{
  position:fixed;
  inset:0;
  z-index:10050;
  display:none;
  
  
  
  background:rgba(16,34,61,.38);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.guest-login-overlay.open{
  display:flex;
}

.guest-login-card{
  width:min(390px,94vw);
  border-radius:24px;
  padding:24px 20px 18px;
  background:var(--surface,#fff);
  border:1px solid var(--theme-border,#A9D5F5);
  box-shadow:0 18px 48px rgba(18,52,86,.22);
  text-align:center;
}

.guest-login-icon{
  width:58px;
  height:58px;
  margin:0 auto 12px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:30px;
  background:var(--theme-soft,#DEEDFF);
}

.guest-login-card h3{
  margin:0 0 10px;
  font-size:21px;
  line-height:1.3;
  color:var(--theme-text,#16324f);
  font-weight:1000;
}

.guest-login-card p{
  margin:0 auto 18px;
  max-width:320px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted,#61758a);
  font-weight:750;
}

.guest-login-actions{
  display:grid;
  gap:9px;
}

.guest-login-primary{
  width:100%;
  min-height:50px;
  border:0;
  border-radius:16px;
  font:inherit;
  font-weight:1000;
  cursor:pointer;
  background:var(--theme-primary,#2698EA);
  color:#fff;
  box-shadow:0 8px 18px rgba(38,152,234,.24);
}

.guest-login-later{
  width:100%;
  min-height:50px;
  border:0;
  border-radius:16px;
  font:inherit;
  font-weight:1000;
  cursor:pointer;
  background:var(--theme-soft,#DEEDFF);
  color:var(--theme-text,#16324f);
}

.guest-login-note{
  margin-top:10px;
  margin-bottom:0;
  font-size:10px;
  opacity:.72;
}

.daily-five-confetti{
  position:fixed;
  inset:0;
  z-index:6000;
  pointer-events:none;
  overflow:hidden;
}

.daily-five-confetti-piece{
  position:absolute;
  left:50%;
  top:46%;
  width:10px;
  height:18px;
  border-radius:3px;
  opacity:0;
  will-change:transform,opacity;
  animation:dailyFiveBurst var(--fall,2600ms) cubic-bezier(.16,.7,.18,1) forwards;
}

.daily-five-mission{
  position:fixed;
  inset:0;
  z-index:6010;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  opacity:0;
  transform:translateY(10px) scale(.96);
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}

.daily-five-mission.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

.daily-five-mission.hide{
  opacity:0;
  transform:translateY(-10px) scale(.98);
}

.daily-five-mission-card{
  width:min(88vw,360px);
  padding:20px 18px 18px;
  border-radius:24px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(169,213,245,.9);
  box-shadow:0 18px 48px rgba(26,79,126,.25);
  text-align:center;
  color:#23405d;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.daily-five-mission-emoji{
  font-size:34px;
  line-height:1;
  margin-bottom:8px;
  animation:dailyFivePop .55s cubic-bezier(.2,.9,.25,1.25) both;
}

.daily-five-mission-card strong{
  display:block;
  font-size:18px;
  line-height:1.45;
  font-weight:1000;
  letter-spacing:-.02em;
}

.daily-five-mission-card p{
  margin:10px 0 0;
  font-size:13px;
  line-height:1.65;
  font-weight:750;
  color:#5c7086;
}

.daily-five-mission-card p span{
  font-size:12px;
  color:#7c8c9d;
}


@media (max-width:390px){
  .character-choice-grid{
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:4px;
  }
  .character-choice img{
    width:40px;
    height:40px;
  }
  .character-current-item{
    min-width:104px;
  }

  .tour-card{
    left:10px;
    right:10px;
    padding:14px;
  }

  .tour-card h3{
    font-size:17px;
  }

  .tour-card p{
    font-size:12px;
  }

  .character-picker-current img{
    width:104px;
    height:104px;
    flex-basis:104px;
  }

  .character-picker-current{
    gap:12px;
  }

  .frame-picker-open{
    width:104px;
    height:104px;
    flex-basis:104px;
  }

  .frame-gallery-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .daily-five-mission{
    padding:18px;
  }

  .daily-five-mission-card{
    width:min(90vw,340px);
    padding:18px 15px 16px;
  }

  .daily-five-mission-card strong{
    font-size:17px;
  }
}


.nickname-edit-backdrop{
  position:fixed;
  inset:0;
  z-index:5050;
  display:none;
  background:rgba(20,37,58,.38);
  
  
  
  overflow-y:auto;
}

.nickname-edit-dialog{
  width:min(100%,var(--device-nickname-dialog-max));
  background:#fff;
  border:1px solid var(--theme-border);
  border-radius:22px;
  box-shadow:0 24px 60px rgba(25,61,102,.28);
  padding:18px 16px 15px;
  max-height:calc(100dvh - env(safe-area-inset-top) - 132px);
  overflow-y:auto;
  margin:0 auto;
}


/* Device Runtime: 키보드가 열린 동안 닉네임 수정창은 visual viewport 안에 유지한다. */
:root[data-keyboard="open"] .nickname-edit-backdrop{
  inset:0 0 auto 0;
  height:var(--visual-viewport-height);
  
  
}

:root[data-keyboard="open"] .nickname-edit-dialog{
  max-height:calc(var(--visual-viewport-height) - env(safe-area-inset-top) - 114px);
}

.nickname-edit-save,
.character-picker-actions button:not(.character-picker-cancel),
.frame-picker-open{
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
  filter:saturate(1.02);
}

.nickname-edit-save,
.character-picker-actions button:not(.character-picker-cancel){
  box-shadow:
    0 11px 0 -8px color-mix(in srgb,var(--theme-accent) 34%,transparent),
    0 13px 22px color-mix(in srgb,var(--theme-accent) 20%,transparent),
    0 4px 8px rgba(38,84,125,.12),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -2px 0 rgba(0,65,135,.12);
  transform:translateY(-1px);
}

.nickname-edit-save:active,
.character-picker-actions button:not(.character-picker-cancel):active{
  transform:translateY(1px) scale(.995);
  box-shadow:
    0 4px 8px rgba(38,84,125,.10),
    inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,65,135,.10);
}


.first-intro{
  position:fixed;
  inset:0;
  z-index:21000;
  display:none;
  overflow:hidden;
  background:#F7FCFF;
  color:#20344D;
  touch-action:manipulation;
}

.first-intro.show{
  display:block;
}

.first-intro-slide{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:14px;
  padding:max(24px,env(safe-area-inset-top)) 0 max(48px,calc(env(safe-area-inset-bottom) + 24px));
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .32s ease,transform .32s ease,visibility .32s;
  pointer-events:none;
  background:linear-gradient(180deg,#FBFDFF 0%,#F0F8FF 100%);
}

.first-intro-slide.active{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

.first-intro-copy{
  width:min(calc(100% - 38px),520px);
  margin:0 auto;
  text-align:center;
  padding-top:clamp(18px,4vh,38px);
  position:relative;
  z-index:2;
}

.first-intro-copy h2{
  margin:0;
  color:#203F5D;
  font-size:clamp(26px,6.8vw,34px);
  line-height:1.42;
  letter-spacing:-.035em;
  font-weight:950;
}

.first-intro-copy p{
  margin:12px 0 0;
  color:#5E7489;
  font-size:clamp(16px,4.15vw,20px);
  line-height:1.62;
  font-weight:760;
}

.first-intro-copy strong{
  color:#176FB5;
  font-weight:950;
}

.first-intro-scene-wrap{
  position:relative;
  min-height:0;
  overflow:hidden;
  align-self:stretch;
}

.first-intro-scene{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%);
}

.first-intro-scene-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(247,252,255,.44) 0%,rgba(247,252,255,0) 22%,rgba(234,245,255,0) 72%,rgba(234,245,255,.58) 100%);
}

.intro-fade-words{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.intro-fade-words span{
  position:absolute;
  padding:8px 12px;
  border-radius:13px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(38,152,234,.14);
  color:#718CA4;
  font-size:clamp(18px,4.8vw,24px);
  font-weight:900;
  box-shadow:0 6px 14px rgba(50,100,145,.08);
  animation:introWordRelease 3s ease-in-out infinite;
}

.intro-fade-words span:first-child{
  left:10%;
  top:18%;
}

.intro-fade-words span:last-child{
  right:10%;
  top:31%;
  animation-delay:.7s;
}

.first-intro-slide[data-intro-slide="3"]{
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
}

.first-intro-scene-wrap.final{
  overflow:hidden;
}

.first-intro-slide[data-intro-slide="3"] .first-intro-scene{
  object-position:center top;
}

.first-intro-title{
  position:absolute;
  left:50%;
  top:8%;
  transform:translateX(-50%);
  z-index:2;
  width:min(230px,60vw);
  height:auto;
  filter:drop-shadow(0 6px 12px rgba(255,255,255,.62));
}

.first-intro-start{
  width:min(calc(100% - 44px),520px);
  min-height:54px;
  margin:0 auto 8px;
  border:2px solid #1689DB;
  border-radius:18px;
  background:#2698EA;
  color:#FFFFFF;
  box-shadow:0 6px 0 #147BC1;
  font-size:17px;
  font-weight:950;
  cursor:pointer;
  position:relative;
  z-index:3;
}

.first-intro-start:active{
  transform:translateY(2px);
  box-shadow:0 4px 0 #147BC1;
}

.first-intro-dots{
  position:absolute;
  left:50%;
  bottom:max(16px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex;
  gap:7px;
  z-index:5;
  pointer-events:none;
}

.first-intro-dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#C6D7E6;
  transition:width .2s ease,background-color .2s ease,border-radius .2s ease;
}

.first-intro-dots span.active{
  width:20px;
  border-radius:999px;
  background:#2698EA;
}

@keyframes introWordRelease{
  0%,18%{opacity:.62;transform:translateY(0) scale(1)}
  68%,100%{opacity:.08;transform:translateY(-14px) scale(.96)}
}

@media (prefers-reduced-motion:reduce){
  .daily-five-confetti-piece{
    animation-duration:950ms;
  }

  .daily-five-mission,
.daily-five-mission-emoji{
    transition:none;
    animation:none;
  }

  .first-intro-slide,
  .intro-fade-words span{
    animation:none;
    transition:none;
  }
}



/* v9.11.14 account login */
.account-login-overlay{position:fixed;inset:0;z-index:10100;display:none;background:rgba(23,42,60,.42);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);pointer-events:none}
.account-login-overlay.open{display:flex;pointer-events:auto}
.account-login-card{position:relative;width:min(100%,390px);padding:22px 20px 18px;border:1px solid var(--theme-border);border-radius:24px;background:var(--theme-card);box-shadow:0 18px 50px rgba(27,59,88,.22);text-align:center;pointer-events:auto}
.account-login-close{position:absolute;right:12px;top:10px;width:36px;height:36px;border:0;background:transparent;font-size:28px;line-height:1;color:var(--text-main);opacity:.65}
.account-login-icon{font-size:30px}.account-login-card h3{margin:5px 0 5px;font-size:21px}.account-login-desc{margin:0 16px 16px;font-size:12px;line-height:1.55;opacity:.7;white-space:pre-line}
.account-google-btn,.account-email-submit{width:100%;height:48px;border-radius:14px;font-weight:900;font-size:14px}.account-google-btn{border:1px solid rgba(80,100,120,.2);background:#fff;color:#202124}.account-google-btn span{display:inline-grid;place-items:center;margin-right:10px;width:23px;height:23px;border-radius:50%;font-weight:900;color:#4285f4}
.account-login-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--text-sub);font-size:10px}.account-login-divider:before,.account-login-divider:after{content:"";height:1px;flex:1;background:var(--theme-border)}
.account-email-form{display:grid;gap:10px;text-align:left;pointer-events:auto}.account-email-form label{font-size:10px;font-weight:900;color:var(--text-sub);pointer-events:auto}.account-email-form input{box-sizing:border-box;width:100%;height:44px;margin-top:5px;padding:0 12px;border:1px solid var(--theme-border);border-radius:12px;background:var(--theme-soft);color:var(--text-main);font-size:14px;outline:none;pointer-events:auto;touch-action:manipulation;user-select:text;-webkit-user-select:text}.account-email-form input:focus{border-color:var(--theme-accent)}
.account-password-field{position:relative;margin-top:5px}.account-password-field input{margin-top:0;padding-right:52px}.account-password-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:42px;height:42px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-sub);display:grid;place-items:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.account-password-toggle:active{transform:translateY(-50%) scale(.94)}.account-password-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.password-eye-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.eye-open-pupil{fill:currentColor;stroke:none}.eye-closed-line,.eye-lash,.eye-open-outline{vector-effect:non-scaling-stroke}

.account-email-submit{border:0;background:var(--theme-accent);color:#fff}.account-email-submit:disabled{opacity:.55}.account-mode-toggle{margin-top:11px;border:0;background:transparent;color:var(--theme-accent);font-size:11px;font-weight:900}.account-login-message{min-height:18px;margin-top:10px;font-size:11px;font-weight:800;line-height:1.45}.account-login-message[data-state="error"]{color:#d04c58}.account-login-message[data-state="success"]{color:#208a59}.account-login-note{margin:7px 0 0;font-size:9px;line-height:1.45;opacity:.55}

/* NATIVE LANGUAGE — 첫 실행 모국어 선택 */
.native-language-overlay{
  position:fixed;inset:0;z-index:22000;display:none;align-items:center;justify-content:center;
  padding:max(22px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#FBFDFF 0%,#EAF5FF 100%);color:#20344D;overflow:auto;
}
.native-language-overlay.show{display:flex}
.native-language-card{width:min(100%,520px);margin:auto;text-align:center}
.native-language-brand{display:flex;align-items:center;justify-content:center;width:100%;min-height:0;margin:0 auto 4px;padding:0;background:transparent;border:0;box-shadow:none}
.native-language-brand img{display:block;width:min(42vw,185px);height:auto;max-height:62px;object-fit:contain;margin:0 auto}
.native-language-kicker{margin:28px 0 8px;font-size:12px;font-weight:950;letter-spacing:.18em;color:#72BDF2}
.native-language-card h2{margin:0;font-size:clamp(28px,7.2vw,36px);line-height:1.3;font-weight:950;letter-spacing:-.045em;color:#203F5D}
.language-pair-step[data-language-step="native"] h2{font-size:clamp(17px,4.5vw,21px);line-height:1.25;letter-spacing:-.055em;white-space:nowrap;margin-bottom:22px}
.native-language-desc{margin:10px 0 22px;font-size:15px;line-height:1.55;font-weight:700;color:#6C8194}
.native-language-options{display:grid;gap:10px}
.native-language-choice{width:100%;min-height:74px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding:10px 16px;border:2px solid #D6E9F8;border-radius:20px;background:rgba(255,255,255,.94);box-shadow:0 5px 0 #D7EAF8;text-align:left;color:#28445F;cursor:pointer}
.native-language-choice:active{transform:translateY(2px);box-shadow:0 3px 0 #D7EAF8}
.native-language-choice.selected{border-color:#2698EA;background:#F4FAFF}
.native-language-flag{font-size:31px;line-height:1}
.native-language-choice strong{display:block;font-size:19px;font-weight:950;letter-spacing:-.02em}
.native-language-choice small{display:block;margin-top:3px;font-size:12px;font-weight:750;color:#75899B}
.native-language-choice i{font-style:normal;font-size:30px;font-weight:500;color:#74BDEB}
.native-language-choice em{font-style:normal;padding:5px 8px;border-radius:999px;background:#EFF2F5;color:#7B8792;font-size:10px;font-weight:950;letter-spacing:.08em}
.native-language-choice.dev{margin-top:5px;border-style:dashed;background:#FAFBFC;box-shadow:none}
.native-language-note{margin:20px auto 0;max-width:440px;font-size:12px;line-height:1.55;color:#81909D;font-weight:700}
.native-language-note b{color:#43718F}

.language-pair-step{display:none}
.language-pair-step.active{display:block}
.language-step-back{display:block;margin:0 0 8px;padding:7px 0;border:0;background:transparent;color:#4E84AA;font-size:13px;font-weight:900;text-align:left}
.native-language-choice.unavailable{opacity:.58;box-shadow:none;cursor:default}
.native-language-choice.unavailable:active{transform:none}
.language-pair-empty{margin:10px 0 0;padding:18px;border:1px dashed #C8DDEA;border-radius:16px;color:#75899B;font-size:13px;font-weight:800}

.account-forgot-password{display:block;margin:9px auto 0;border:0;background:transparent;color:var(--text-sub);font-size:11px;font-weight:850;text-decoration:underline;text-underline-offset:3px}
.account-forgot-password[hidden],.account-google-btn[hidden],.account-login-divider[hidden],.account-email-form label[hidden]{display:none!important}

.stage-info-overlay{
  position:fixed;
  inset:0;
  z-index:10120;
  display:none;
  
  
  
  background:rgba(20,37,58,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.stage-info-overlay.open{display:flex}
.stage-info-card{
  position:relative;
  width:min(100%,380px);
  padding:22px 20px 20px;
  border:1px solid var(--theme-border);
  border-radius:22px;
  background:var(--theme-card,#fff);
  box-shadow:0 18px 48px rgba(25,61,102,.22);
}
.stage-info-close{
  position:absolute;
  top:8px;
  right:10px;
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:var(--text-main);
  font-size:27px;
  line-height:1;
}
.stage-info-kicker{font-size:10px;font-weight:900;opacity:.58}
.stage-info-card h3{margin:4px 0 10px;font-size:22px}
.stage-info-card p{margin:0;font-size:12px;line-height:1.65}
.stage-info-next{margin-top:16px;padding:11px 12px;border-radius:14px;background:var(--theme-soft);font-weight:900}
.stage-info-progress{margin-top:8px;font-size:10.5px;line-height:1.45;opacity:.72}

.stage-growth-row{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:end;
  gap:6px;
  margin-top:16px;
}
.stage-growth-item{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  opacity:.55;
  transform:scale(.92);
  transition:transform .18s ease,opacity .18s ease;
}
.stage-growth-item.current{
  opacity:1;
  transform:scale(1.08);
}
.stage-growth-item img{
  display:block;
  width:100%;
  max-width:92px;
  height:88px;
  object-fit:contain;
  background:transparent;
}
.stage-growth-item strong{
  font-size:11px;
  line-height:1.2;
  white-space:nowrap;
}
.stage-growth-arrow{
  align-self:center;
  margin-bottom:24px;
  font-size:26px;
  font-weight:800;
  color:var(--theme-accent);
  opacity:.45;
}

/* v9.11.59 — 단계 안내 2번 디자인 */
.stage-info-card-v2{
  text-align:center;
}
.stage-info-heading{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin-top:3px;
}
.stage-info-title-icon{
  width:28px;
  height:28px;
  object-fit:contain;
}
.stage-info-card-v2 h3{
  margin:0;
  font-size:24px;
}
.stage-info-card-v2 #stageInfoDesc{
  max-width:310px;
  margin:12px auto 0;
}
.stage-focus-row{
  display:grid;
  grid-template-columns:minmax(54px,1fr) 16px minmax(86px,1.25fr) 16px minmax(54px,1fr);
  align-items:end;
  gap:3px;
  margin:14px 0 12px;
}
.stage-focus-side,
.stage-focus-current{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}
.stage-focus-side[hidden]{visibility:hidden;display:flex}
.stage-focus-side img{
  width:54px;
  height:60px;
  object-fit:contain;
  opacity:.58;
}
.stage-focus-current img{
  width:84px;
  height:90px;
  object-fit:contain;
}
.stage-focus-side strong{
  margin-top:4px;
  font-size:10.5px;
  opacity:.68;
  white-space:nowrap;
}
.stage-focus-current strong{
  margin-top:3px;
  font-size:15px;
  font-weight:950;
  white-space:nowrap;
}
.stage-focus-arrow{
  align-self:center;
  margin-bottom:30px;
  font-size:24px;
  font-weight:900;
  color:var(--theme-accent);
  opacity:.36;
}
.stage-info-progressbar{
  width:100%;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:var(--theme-soft);
  margin-top:6px;
}
.stage-info-progressbar span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:var(--theme-accent);
  transition:width .25s ease;
}
.stage-info-card-v2 .stage-info-progress{
  margin-top:7px;
  font-weight:800;
  opacity:.72;
}
.stage-info-card-v2 .stage-info-next{
  margin-top:12px;
  font-size:11.5px;
}

/* v9.11.67 — Google Identity Services 공식 버튼 사용 */
.account-google-btn{
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:0!important;
  overflow:hidden;
  background:transparent!important;
  border:0!important;
}
.account-google-btn>div{margin:0 auto!important}
.account-google-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  border:1px solid rgba(80,100,120,.2);
  border-radius:14px;
  background:#fff;
  color:#202124;
  font-weight:900;
  font-size:14px;
}