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

/* 공통 팝업 위치 규정 */
:root{
  --app-popup-top:150px;
}

[data-app-popup-history]:not([data-app-popup-history="off"]):not([data-popup-position="custom"]){
  align-items:flex-start;
  justify-content:center;
  place-items:start center;
  padding:var(--app-popup-top) 18px max(18px,env(safe-area-inset-bottom));
  overflow-y:auto;
  box-sizing:border-box;
}

[data-app-popup-history]:not([data-app-popup-history="off"]):not([data-popup-position="custom"])
> :is(section,article,.rank-progress-sheet,.rank-up-card,.community-user-profile-card,.community-privacy-confirm-sheet,.community-report-sheet,.community-blocks-sheet){
  margin-top:0;
}


.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:var(--tone-1);
  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:var(--tone-1);
  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 var(--tone-5);
  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;
  top:var(--app-popup-top);
  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 .character-picker-confirm{border-color:var(--theme-accent);background:var(--theme-accent);color:#fff}
.frame-gallery-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.frame-gallery-actions .frame-gallery-close{width:100%}
.frame-gallery-actions .frame-gallery-confirm{width:100%;min-height:44px;border-radius:14px;border:1px solid var(--theme-accent);background:var(--theme-accent);color:#fff;font-size:13px;font-weight:900}
.community-ranking-overlay[hidden]{display:none}
.community-ranking-overlay{position:fixed;inset:0;z-index:10025;display:none;place-items:center;padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));background:rgba(21,41,63,.50);backdrop-filter:blur(4px)}
.community-ranking-overlay.open{display:grid}
.community-ranking-dialog{width:min(100%,460px);height:min(92dvh,840px);max-height:100%;background:var(--theme-soft,#f6fbff);color:var(--theme-text,#244766);border:1px solid var(--theme-border,#c1dced);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 56px rgba(9,37,61,.32)}
.community-ranking-dialog-header{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:13px;border-bottom:1px solid var(--theme-border)}
.community-ranking-dialog-header h3{margin:0;font-size:17px}
.community-ranking-dialog-header button{border:1px solid var(--theme-border);border-radius:10px;padding:8px 12px;font-weight:850;background:var(--theme-softer);color:var(--theme-text)}
.community-ranking-dialog .community-ranking-card{flex:1;min-height:0;overflow-y:auto;margin:0;border:0;border-radius:0}
.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:auto;
  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-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 82px;
  gap:6px;
  align-items:center;
}

.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:space-between;
  align-items:center;
  margin:5px 2px 10px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}

.nickname-edit-check{
  height:46px;
  border:1.5px solid var(--theme-border);
  border-radius:14px;
  background:var(--theme-soft);
  color:var(--theme-text);
  font-size:12px;
  font-weight:1000;
  cursor:pointer;
}

.nickname-edit-check:disabled,
.nickname-edit-save:disabled{opacity:.45;cursor:default;}

#nicknameEditStatus[data-state="ok"]{color:#238455;}
#nicknameEditStatus[data-state="error"]{color:#d65353;}
#nicknameEditStatus[data-state="busy"]{color:var(--theme-accent);}

.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 var(--tone-5);
  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,var(--tone-4));
  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,var(--tone-3));
}

.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,var(--tone-6));
  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,var(--tone-3));
  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:30000;
  pointer-events:none;
  overflow:hidden;
}

.daily-five-confetti-piece{
  position:absolute;
  left:var(--origin-x,50%);
  top:var(--origin-y,90%);
  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:30010;
  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);
  min-height:154px;
  padding:24px 20px 22px;
  border-radius:26px;
  background:rgba(255,255,255,.97);
  border:2px solid rgba(169,213,245,.95);
  box-shadow:0 20px 54px rgba(26,79,126,.28);
  text-align:center;
  color:#23405d;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

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

.daily-five-mission-main{
  display:block;
  max-width:310px;
  font-size:26px;
  line-height:1.25;
  font-weight:950;
  letter-spacing:-.035em;
  color:#23405d;
  text-wrap:balance;
}

.daily-five-burst-flash{
  position:absolute;
  bottom:5vh;
  width:180px;
  height:180px;
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.98) 0 8%,rgba(255,220,89,.78) 9% 18%,rgba(114,189,242,.38) 28%,rgba(255,255,255,0) 68%);
  filter:blur(.4px);
  animation:dailyFiveFlash .52s ease-out forwards;
}
.daily-five-burst-flash.left{left:-54px;}
.daily-five-burst-flash.right{right:-54px;}
.daily-five-confetti-piece.spark{
  width:5px;
  height:22px;
  border-radius:999px;
  box-shadow:0 0 8px rgba(255,255,255,.95),0 0 14px currentColor;
}



@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:24px;
  }

  .practical-shell{
    padding-left:16px;
    padding-right:16px;
  }

  .practical-card h2{
    font-size:22px;
  }

  .practical-play{
    width:96px;
    height:96px;
  }
}


.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:var(--tone-6);
  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:var(--tone-6);
}

@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;
  }
}



/* 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 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 — 첫 실행 모국어 선택 */

.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}

.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}

/* 단계 안내 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;
}

/* Google Identity Services 공식 버튼 사용 */
.account-google-btn{
display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  overflow:hidden;
  background:transparent;
  border:0;
  color:#202124;
}
.account-google-btn>div{margin:0 auto}
.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;
}


/* 문장 보관함 · 문장 상세 오버레이 */
.sentence-library-overlay,.sentence-detail-overlay{
  position:fixed;inset:0;z-index:10200;display:none;
  background:rgba(16,34,58,.34);backdrop-filter:blur(5px);
}
.sentence-library-overlay.open,.sentence-detail-overlay.open{display:flex}
.sentence-library-sheet{
  width:min(100%,540px);height:min(88dvh,860px);background:var(--theme-bg,#f7fbff);color:var(--theme-text,#18314d);
  border-radius:26px 26px 0 0;box-shadow:0 -14px 42px rgba(20,52,86,.22);display:flex;flex-direction:column;
  overflow:hidden;padding:18px 14px max(18px,env(safe-area-inset-bottom));
}
.sentence-library-head{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:2px 2px 10px}
.sentence-library-close{width:36px;height:36px;border:0;border-radius:50%;font-size:27px;line-height:1;background:var(--theme-soft);color:var(--theme-text)}
.sentence-library-head h3{margin:1px 0 2px;font-size:24px;letter-spacing:-.7px}
.sentence-library-head p{margin:0;color:var(--muted);font-size:12px;font-weight:750}
.sentence-library-gift{font-size:11px;font-weight:950;color:var(--theme-accent)}
.sentence-library-count{min-width:42px;text-align:center;padding:7px 9px;border-radius:14px;background:var(--theme-soft);font-weight:1000;color:var(--theme-accent)}
.sentence-library-filters{display:flex;gap:7px;overflow-x:auto;padding:5px 2px 11px;scrollbar-width:none}
.sentence-library-filters::-webkit-scrollbar{display:none}
.sentence-library-filter{flex:0 0 auto;border:1px solid var(--theme-border);background:var(--theme-softer);color:var(--theme-text);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;white-space:nowrap}
.sentence-library-filter.active{background:var(--theme-accent);border-color:var(--theme-accent);color:#fff}
.sentence-library-list{min-height:0;flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:1px 1px 10px}
.sentence-library-item{width:100%;border:1px solid var(--theme-border);background:var(--theme-soft);border-radius:17px;padding:12px 13px;text-align:left;color:var(--theme-text);display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.sentence-library-item-meta{display:flex;gap:7px;align-items:center;margin-bottom:5px;font-size:10px;font-weight:900;color:var(--muted)}
.sentence-library-item-jp{font-size:16px;font-weight:950;line-height:1.38;letter-spacing:-.2px}
.sentence-library-item-ko{font-size:12px;font-weight:750;color:var(--muted);margin-top:4px;line-height:1.35}
.sentence-library-item-arrow{font-size:23px;color:var(--theme-accent);font-weight:1000}
.sentence-library-empty{margin:auto;text-align:center;color:var(--muted);font-weight:850;padding:30px}


.sentence-detail-card{
  width:min(100%,520px);max-height:92dvh;overflow:auto;background:var(--theme-bg,#f7fbff);color:var(--theme-text,#18314d);
  border-radius:25px;box-shadow:0 16px 50px rgba(20,52,86,.27);padding:15px 14px max(16px,env(safe-area-inset-bottom));
}
.sentence-detail-head{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;margin-bottom:11px}
.sentence-detail-back{width:36px;height:36px;border:0;border-radius:50%;background:var(--theme-soft);color:var(--theme-text);font-size:30px;line-height:1}
.sentence-detail-head h3{margin:1px 0 0;font-size:20px;letter-spacing:-.5px}
.sentence-detail-head span{font-size:10px;font-weight:900;color:var(--muted)}
.sentence-detail-position{background:var(--theme-soft);padding:6px 9px;border-radius:12px;white-space:nowrap}
.sentence-detail-main{border:2px solid var(--theme-border);background:var(--theme-soft);border-radius:20px;padding:18px 15px;text-align:center}
.sentence-detail-jp{font-size:clamp(24px,6.4vw,31px);font-weight:1000;line-height:1.38;letter-spacing:-.7px}
.sentence-detail-kana{margin-top:7px;color:var(--theme-accent);font-size:14px;font-weight:850;line-height:1.4}
.sentence-detail-ko{margin-top:11px;font-size:16px;font-weight:850;line-height:1.4}
.sentence-detail-audio.main{margin-top:15px;border:0;border-radius:14px;padding:11px 18px;background:var(--theme-accent);color:#fff;font-weight:950;font-size:14px}
.sentence-detail-answer{margin-top:9px;border-radius:17px;padding:12px 13px;border:1px solid var(--theme-border)}
.sentence-detail-answer.positive{background:color-mix(in srgb,#dff8e8 72%,var(--theme-bg) 28%)}
.sentence-detail-answer.negative{background:color-mix(in srgb,#ffe5ea 72%,var(--theme-bg) 28%)}
.sentence-detail-answer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.sentence-detail-answer-head b{font-size:12px}
.sentence-detail-answer-head button{border:0;background:rgba(255,255,255,.68);border-radius:10px;padding:6px 9px;font-size:11px;font-weight:900;color:var(--theme-text)}
.sentence-detail-answer-jp{font-size:16px;font-weight:950;line-height:1.4}
.sentence-detail-answer-kana{font-size:12px;font-weight:800;color:var(--muted);margin-top:3px;line-height:1.35}
.sentence-detail-answer-ko{font-size:13px;font-weight:800;margin-top:5px;line-height:1.35}
.sentence-detail-nav{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.sentence-detail-nav button{border:1px solid var(--theme-border);border-radius:15px;padding:12px;background:var(--theme-soft);color:var(--theme-text);font-weight:950}
.sentence-detail-nav button:disabled{opacity:.34}

@media (min-width:600px){.sentence-library-sheet{border-radius:26px;height:min(86dvh,820px)}}

.sentence-library-head,
.sentence-library-filters{
  flex-shrink:0;
}


/* 학습메이트 실전확인 오버레이 */
.practical-overlay{
  position:fixed;
  inset:0;
  z-index:10070;
  display:flex;
  align-items:stretch;
  justify-content:center;
  background:rgba(31,57,82,.38);
  backdrop-filter:blur(3px);
}
.practical-overlay[hidden]{display:none}
.practical-shell{
  position:relative;
  width:min(100%,520px);
  min-height:100dvh;
  padding:max(18px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
  box-sizing:border-box;
  overflow:auto;
  background:linear-gradient(180deg,#f8fcff 0%,var(--tone-1) 100%);
  color:#274e70;
}
.practical-head{display:grid;grid-template-columns:44px 1fr 48px;align-items:center;gap:8px;min-height:48px}
.practical-back{width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.86);color:#4f718f;font-size:24px}
.practical-title{text-align:center;font-size:17px;font-weight:950;letter-spacing:-.025em}
.practical-step{text-align:right;font-size:12px;font-weight:900;color:#6c8ba5}
.practical-progress{height:5px;margin:8px 0 18px;border-radius:999px;background:#dcecff;overflow:hidden}
.practical-progress>span{display:block;height:100%;width:0;border-radius:inherit;background:var(--tone-5);transition:width .25s ease}
.practical-card{min-height:calc(100dvh - 118px - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.practical-kicker{margin:0 0 10px;font-size:12px;font-weight:950;color:var(--tone-6)}
.practical-card h2{margin:0 0 10px;font-size:24px;line-height:1.3;letter-spacing:-.04em;color:#214c70}
.practical-card p{margin:0;max-width:330px;font-size:14px;line-height:1.6;color:#607e96;word-break:keep-all}
.practical-mate{width:118px;height:118px;object-fit:contain;margin:4px 0 14px;filter:drop-shadow(0 8px 15px rgba(37,89,127,.12))}
.practical-play{display:grid;place-items:center;width:104px;height:104px;margin:28px 0 20px;border:0;border-radius:50%;background:var(--tone-6);color:white;box-shadow:0 12px 26px rgba(38,152,234,.28);font-size:38px}
.practical-play:disabled{opacity:.48;box-shadow:none}
.practical-actions{width:100%;max-width:360px;display:grid;gap:10px;margin-top:24px}
.practical-primary,.practical-secondary,.practical-choice,.practical-link{
  border:0;border-radius:17px;font-weight:900;font-family:inherit;cursor:pointer
}
.practical-primary{min-height:54px;background:var(--tone-6);color:#fff;font-size:16px;box-shadow:0 8px 18px rgba(38,152,234,.2)}
.practical-secondary{min-height:50px;background:var(--tone-3);color:#376b95;font-size:15px}
.practical-link{min-height:40px;background:transparent;color:#6a87a0;font-size:13px}
.practical-choices{width:100%;max-width:380px;display:grid;gap:10px;margin-top:22px}
.practical-choice{min-height:60px;padding:13px 16px;background:rgba(255,255,255,.94);border:1px solid #cfe4f6;color:#365f80;font-size:15px;line-height:1.45;text-align:left;box-shadow:0 5px 14px rgba(52,93,125,.07)}
.practical-choice:disabled{opacity:.62}
.practical-choice.is-picked{border-color:var(--tone-5);background:#eef8ff}
.practical-feedback{min-height:44px;margin-top:15px;color:#4b789a;font-size:14px;font-weight:850;line-height:1.5}
.practical-japanese{margin-top:18px;padding:14px 17px;border-radius:18px;background:rgba(255,255,255,.92);border:1px solid #d8eaf8;font-size:22px;font-weight:900;line-height:1.55;color:#224d70}
.practical-korean{margin-top:8px;font-size:14px;color:#6f879a}
.practical-dialogue{width:100%;max-width:380px;display:grid;gap:9px;margin-top:18px;text-align:left}
.practical-turn{display:flex;gap:9px;align-items:flex-start;opacity:.62;transition:opacity .2s ease,transform .2s ease}
.practical-turn.is-active{opacity:1;transform:translateY(-1px)}
.practical-speaker{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:var(--tone-3);color:#3177aa;font-size:12px;font-weight:950}
.practical-bubble{flex:1;min-height:34px;padding:9px 12px;border-radius:15px;background:rgba(255,255,255,.9);border:1px solid #d8eaf8;color:#6c8294;font-size:14px;font-weight:800}
.practical-dialogue.is-hidden-text .practical-bubble{font-size:18px;letter-spacing:.15em;color:#7ea4c1}
.practical-situation{margin-top:12px;padding:9px 13px;border-radius:999px;background:var(--tone-2);border:1px solid #d7e9f7;color:#547894;font-size:13px;font-weight:850}
.practical-mic{display:grid;place-items:center;width:112px;height:112px;margin:26px 0 12px;border:0;border-radius:50%;background:var(--tone-6);color:#fff;font-size:42px;box-shadow:0 13px 28px rgba(38,152,234,.28)}
.practical-mic.is-recording{animation:practicalPulse 1.15s ease-in-out infinite}
.practical-rec-status{min-height:24px;font-size:13px;font-weight:850;color:#5f7f98}
.practical-audio{width:min(100%,340px);margin-top:10px}
.practical-summary{width:100%;max-width:360px;display:grid;gap:10px;margin:20px 0}
.practical-summary-row{padding:14px 16px;border:1px solid #d7e9f7;border-radius:17px;background:rgba(255,255,255,.9);text-align:left;color:#456a87;font-size:14px;font-weight:850}
@keyframes practicalPulse{50%{transform:scale(1.05);box-shadow:0 0 0 14px rgba(38,152,234,.12)}}



/* 계급 진행 · 진급 오버레이 */
/* 보석 계급 진행 팝업 */
.rank-progress-overlay[hidden]{display:none;}
.rank-progress-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  
  
  
  background:rgba(20,35,50,.28);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .16s ease;
}
.rank-progress-overlay.open{opacity:1;}
.rank-progress-sheet{
  position:relative;
  width:min(100%,430px);
  max-height:min(78vh,690px);
  overflow:auto;
  border-radius:28px;
  padding:20px 18px 18px;
  background:color-mix(in srgb,var(--theme-soft,var(--tone-2)) 72%,#fff 28%);
  border:1px solid color-mix(in srgb,var(--theme-accent,var(--tone-6)) 18%,transparent);
  box-shadow:0 18px 48px rgba(25,55,80,.22);
  transform:translateY(18px);
  transition:transform .16s ease;
  overscroll-behavior:contain;
}
.rank-progress-overlay.open .rank-progress-sheet{transform:translateY(0);}
.rank-progress-close{
  position:absolute;
  top:10px;
  right:12px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.66);
  color:var(--theme-text,var(--tone-text));
  font-size:25px;
  line-height:1;
  font-weight:700;
}
.rank-progress-current{
  display:flex;
  align-items:center;
  gap:14px;
  padding:4px 40px 12px 2px;
}
.rank-progress-current-copy{min-width:0;}
.rank-progress-kicker{
  display:block;
  margin-bottom:2px;
  color:var(--theme-muted,#6b8092);
  font-size:12px;
  font-weight:800;
}
.rank-progress-current-copy h3{
  margin:0;
  color:var(--theme-text,var(--tone-text));
  font-size:22px;
  line-height:1.2;
  font-weight:1000;
}
.rank-progress-current-copy p{
  margin:4px 0 0;
  color:var(--theme-muted,#6b8092);
  font-size:13px;
  font-weight:800;
}
.rank-progress-bar-wrap{
  margin:4px 0 15px;
  padding:12px 13px;
  border-radius:17px;
  background:rgba(255,255,255,.62);
}
.rank-progress-bar{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--theme-accent,var(--tone-6)) 12%,#fff 88%);
}
.rank-progress-bar span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:var(--theme-accent,var(--tone-6));
  transition:width .25s ease;
}
.rank-progress-next{
  margin-top:7px;
  color:var(--theme-text,var(--tone-text));
  font-size:12px;
  font-weight:900;
  text-align:right;
}
.rank-progress-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px 6px;
}
.rank-progress-item{
  position:relative;
  min-width:0;
  padding:8px 2px 7px;
  border-radius:14px;
  text-align:center;
  opacity:.38;
  filter:saturate(.55);
}
.rank-progress-item.achieved{
  opacity:1;
  filter:none;
}
.rank-progress-item.active{
  background:rgba(255,255,255,.82);
  box-shadow:0 5px 14px rgba(35,75,110,.12);
  outline:2px solid color-mix(in srgb,var(--theme-accent,var(--tone-6)) 55%,transparent);
}
.rank-progress-item b{
  position:absolute;
  top:4px;
  left:4px;
  min-width:14px;
  height:14px;
  padding:0 3px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:#48657b;
  font-size:7px;
  line-height:14px;
}
.rank-progress-item span{
  display:block;
  overflow:hidden;
  color:var(--theme-text,var(--tone-text));
  font-size:9px;
  line-height:1.25;
  font-weight:900;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.rank-progress-item small{
  display:block;
  margin-top:1px;
  color:var(--theme-muted,#6b8092);
  font-size:7.5px;
  line-height:1.2;
  font-weight:800;
}
/* 보석 계급 승급 축하 */
.rank-up-overlay[hidden]{display:none;}
.rank-up-overlay{
  position:fixed;
  inset:0;
  z-index:10020;
  display:grid;
  
  
  background:rgba(18,34,48,.32);
  backdrop-filter:blur(7px);
  opacity:0;
  transition:opacity .18s ease;
}
.rank-up-overlay.open{opacity:1;}
.rank-up-card{
  position:relative;
  width:min(100%,340px);
  overflow:hidden;
  padding:28px 22px 22px;
  border-radius:30px;
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,249,255,.98));
  border:1px solid rgba(92,167,220,.22);
  box-shadow:0 22px 58px rgba(25,60,92,.26);
  transform:translateY(15px) scale(.94);
  transition:transform .22s cubic-bezier(.2,.9,.2,1.08);
}
.rank-up-overlay.open .rank-up-card{transform:translateY(0) scale(1);}
.rank-up-kicker{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  background:var(--theme-soft,var(--tone-2));
  color:var(--theme-accent,var(--tone-6));
  font-size:12px;
  line-height:1;
  font-weight:1000;
}
.rank-up-gem{
  display:block;
  width:108px;
  height:108px;
  object-fit:contain;
  margin:14px auto 5px;
  filter:drop-shadow(0 10px 12px rgba(31,75,108,.22));
  animation:rankUpGemPop .7s cubic-bezier(.2,.9,.2,1.15);
}
.rank-up-card h3{
  margin:5px 0 7px;
  color:var(--theme-text,var(--tone-text));
  font-size:22px;
  line-height:1.3;
  font-weight:1000;
}
.rank-up-card p{
  margin:0 auto 18px;
  color:var(--theme-muted,#667d90);
  font-size:13px;
  line-height:1.55;
  font-weight:750;
}
.rank-up-confirm{
  width:100%;
  min-height:46px;
  border:0;
  border-radius:16px;
  background:var(--theme-accent,var(--tone-6));
  color:#fff;
  font-size:14px;
  font-weight:1000;
  box-shadow:0 7px 15px rgba(35,115,175,.22);
}
.rank-up-sparkles i{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--theme-accent-2,var(--tone-5));
  opacity:.8;
  animation:rankUpSparkle 1.4s ease-in-out infinite alternate;
}
.rank-up-sparkles i:nth-child(1){left:16%;top:21%;animation-delay:.05s;}
.rank-up-sparkles i:nth-child(2){left:25%;top:10%;width:5px;height:5px;animation-delay:.28s;}
.rank-up-sparkles i:nth-child(3){right:18%;top:18%;animation-delay:.45s;}
.rank-up-sparkles i:nth-child(4){right:27%;top:8%;width:5px;height:5px;animation-delay:.7s;}
.rank-up-sparkles i:nth-child(5){left:12%;top:43%;width:4px;height:4px;animation-delay:.9s;}
.rank-up-sparkles i:nth-child(6){right:12%;top:42%;width:4px;height:4px;animation-delay:1.05s;}
@keyframes rankUpGemPop{
  0%{transform:scale(.55) rotate(-7deg);opacity:.25}
  58%{transform:scale(1.12) rotate(3deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}
@keyframes rankUpSparkle{
  from{transform:scale(.55);opacity:.3}
  to{transform:scale(1.35);opacity:1}
}
.rank-progress-main-icon{
  width:50px;
  height:50px;
  max-width:50px;
  max-height:50px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
  background:transparent;
  filter:drop-shadow(0 5px 7px rgba(30,60,90,.22));
}
.rank-progress-item img{
  width:50px;
  height:50px;
  max-width:50px;
  max-height:50px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
  margin:0 auto 2px;
  background:transparent;
}


/* 커뮤니티 사용자 프로필 오버레이 */
.community-user-profile-overlay[hidden]{display:none;}
.community-user-profile-overlay{
  position:fixed;
  inset:0;
  z-index:10030;
  display:grid;
  place-items:center;
  padding:12px;
  
  
  background:rgba(19,34,48,.34);
  backdrop-filter:blur(7px);
  opacity:0;
  transition:opacity .16s ease;
}
.community-user-profile-overlay.open{opacity:1;}
.community-user-profile-card{
  position:relative;
  width:min(calc(100vw - 24px),440px);
  max-width:100%;
  max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:25px 20px 18px;
  border-radius:28px;
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(242,249,255,.98));
  border:1px solid rgba(83,154,208,.20);
  box-shadow:0 22px 58px rgba(25,60,92,.25);
  transform:translateY(12px) scale(.96);
  transition:transform .18s cubic-bezier(.2,.9,.2,1.05);
}
.community-user-profile-overlay.open .community-user-profile-card{
  transform:translateY(0) scale(1);
}
.community-user-profile-close{
  position:absolute;
  right:11px;
  top:10px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(240,247,252,.9);
  color:var(--theme-text,var(--tone-text));
  font-size:24px;
  line-height:1;
}
.community-user-profile-avatar-wrap{
  position:relative;
  width:82px;
  height:82px;
  margin:2px auto 10px;
}
.community-user-profile-avatar{
  width:82px;
  height:82px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 7px 18px rgba(30,70,100,.16);
}
.community-user-profile-gem{
  position:absolute;
  right:-9px;
  bottom:-5px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
}
.community-user-profile-gem img{
  width:34px;
  height:34px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(20,50,80,.25));
}
.community-user-profile-gem b{
  position:absolute;
  right:-1px;
  bottom:-1px;
  min-width:12px;
  height:12px;
  padding:0 2px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  color:#456078;
  font-size:6px;
  line-height:12px;
  box-shadow:0 1px 3px rgba(20,45,70,.18);
}
.community-user-profile-card h3{
  margin:2px 0 2px;
  color:var(--theme-text,var(--tone-text));
  font-size:21px;
  line-height:1.25;
  font-weight:1000;
}
.community-user-profile-rank{
  margin:0 0 14px;
  color:var(--theme-accent,var(--tone-6));
  font-size:12px;
  font-weight:1000;
}
.community-user-profile-info{
  display:grid;
  gap:7px;
  padding:12px 13px;
  border-radius:18px;
  background:rgba(255,255,255,.68);
}
.community-user-profile-info > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:24px;
}
.community-user-profile-info span{
  color:var(--theme-muted,#6b8092);
  font-size:11px;
  font-weight:800;
}
.community-user-profile-info b{
  color:var(--theme-text,var(--tone-text));
  font-size:11px;
  font-weight:1000;
  text-align:right;
}
.community-user-profile-note{
  margin:10px 0 0;
  color:var(--theme-muted,#718494);
  font-size:9px;
  font-weight:700;
}
.community-user-profile-avatar-frame{
  position:absolute;
  inset:0;
  width:82px;
  height:82px;
  display:block;
}

.community-user-profile-avatar-frame .community-user-profile-avatar{
  width:82px;
  height:82px;
  border-radius:50%;
  object-fit:cover;
}

/* 커뮤니티 공개 동의 확인 */
.community-privacy-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:1900;
  display:grid;
  
}
.community-privacy-confirm-overlay[hidden]{display:none;}
.community-privacy-confirm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(24,38,52,.42);
  backdrop-filter:blur(4px);
}
.community-privacy-confirm-sheet{
  position:relative;
  z-index:1;
  width:min(100%,480px);
  max-height:88dvh;
  overflow:auto;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0;
  background:var(--theme-card,#fff);
  box-shadow:0 -12px 38px rgba(20,42,60,.18);
}
.community-privacy-confirm-close{
  position:absolute;
  right:14px;
  top:12px;
  width:31px;
  height:31px;
  border:0;
  border-radius:50%;
  background:rgba(118,145,164,.12);
  color:var(--theme-text,#334a5c);
  font-size:20px;
  font-weight:800;
}
.community-privacy-confirm-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  margin:2px auto 9px;
  border-radius:15px;
  background:rgba(84,164,222,.12);
  font-size:24px;
}
.community-privacy-confirm-sheet h3{
  margin:0;
  padding:0 22px;
  text-align:center;
  color:var(--theme-text,#334a5c);
  font-size:17px;
  line-height:1.35;
  font-weight:1000;
}
.community-privacy-confirm-sheet > p{
  margin:8px 0 12px;
  text-align:center;
  color:var(--theme-muted,#6b8092);
  font-size:10px;
  line-height:1.5;
  font-weight:750;
}
.community-privacy-share-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.community-privacy-share-list span{
  padding:9px 10px;
  border-radius:12px;
  background:rgba(221,239,252,.65);
  color:var(--theme-text,#334a5c);
  font-size:9px;
  font-weight:900;
  text-align:center;
}
.community-privacy-safe-note{
  margin-top:12px;
  padding:11px 12px;
  border-radius:14px;
  background:rgba(105,192,146,.10);
}
.community-privacy-safe-note b,
.community-privacy-safe-note span{
  display:block;
}
.community-privacy-safe-note b{
  color:#377b59;
  font-size:9.5px;
  font-weight:1000;
}
.community-privacy-safe-note span{
  margin-top:3px;
  color:var(--theme-muted,#6b8092);
  font-size:8.5px;
  line-height:1.45;
  font-weight:750;
}
.community-privacy-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:9px;
  margin-top:15px;
}
.community-privacy-confirm-actions button{
  min-height:43px;
  border:0;
  border-radius:13px;
  font-size:11px;
  font-weight:1000;
}
.community-privacy-confirm-actions .secondary{
  background:rgba(123,146,164,.13);
  color:var(--theme-text,#334a5c);
}
.community-privacy-confirm-actions .primary{
  background:var(--theme-accent,var(--tone-6));
  color:#fff;
}
/* 커뮤니티 신고 */
.community-user-report-btn{
  display:block;
  width:100%;
  margin-top:10px;
  padding:9px 10px;
  border:0;
  border-radius:12px;
  background:rgba(190,85,85,.08);
  color:#a15151;
  font-size:9px;
  font-weight:900;
}
.community-user-report-btn[hidden]{display:none;}
.community-report-overlay{
  position:fixed;
  inset:0;
  z-index:1920;
  display:grid;
  
}
.community-report-overlay[hidden]{display:none;}
.community-report-backdrop{
  position:absolute;
  inset:0;
  background:rgba(24,38,52,.44);
  backdrop-filter:blur(4px);
}
.community-report-sheet{
  position:relative;
  z-index:1;
  width:min(100%,480px);
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0;
  background:var(--theme-card,#fff);
  box-shadow:0 -12px 38px rgba(20,42,60,.18);
}
.community-report-close{
  position:absolute;
  right:14px;
  top:12px;
  width:31px;
  height:31px;
  border:0;
  border-radius:50%;
  background:rgba(118,145,164,.12);
  color:var(--theme-text,#334a5c);
  font-size:20px;
  font-weight:800;
}
.community-report-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin:2px auto 9px;
  border-radius:14px;
  background:rgba(188,86,86,.10);
  color:#a15151;
  font-size:23px;
}
.community-report-sheet h3{
  margin:0;
  text-align:center;
  color:var(--theme-text,#334a5c);
  font-size:17px;
  line-height:1.35;
  font-weight:1000;
}
.community-report-sheet > p{
  margin:7px 0 12px;
  text-align:center;
  color:var(--theme-muted,#6b8092);
  font-size:9px;
  line-height:1.45;
  font-weight:750;
}
.community-report-reasons{
  display:grid;
  gap:7px;
}
.community-report-reasons label{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:0 12px;
  border-radius:12px;
  background:rgba(227,239,247,.58);
  color:var(--theme-text,#334a5c);
  font-size:10px;
  font-weight:850;
}
.community-report-reasons input{
  width:17px;
  height:17px;
  accent-color:var(--theme-accent,var(--tone-6));
}
.community-report-actions{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:9px;
  margin-top:14px;
}
.community-report-actions button{
  min-height:42px;
  border:0;
  border-radius:13px;
  font-size:10px;
  font-weight:1000;
}
.community-report-actions .secondary{
  background:rgba(123,146,164,.13);
  color:var(--theme-text,#334a5c);
}
.community-report-actions .danger{
  background:#b85e5e;
  color:#fff;
}
.community-report-actions .danger:disabled{
  opacity:.42;
}
/* 커뮤니티 차단 · 신고 후 차단 오버레이 */
.community-user-safety-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:10px;
}
.community-user-safety-actions button[hidden]{display:none;}
.community-user-block-btn,
.community-user-report-btn{
  width:100%;
  margin:0;
  padding:9px 10px;
  border:0;
  border-radius:12px;
  font-size:9px;
  font-weight:900;
}
.community-user-block-btn{
  background:rgba(110,127,142,.10);
  color:#677a88;
}
.community-blocks-overlay{
  position:fixed;
  inset:0;
  z-index:1910;
  display:grid;
  
}
.community-blocks-overlay[hidden]{display:none;}
.community-blocks-backdrop{
  position:absolute;
  inset:0;
  background:rgba(24,38,52,.43);
  backdrop-filter:blur(4px);
}
.community-blocks-sheet{
  position:relative;
  z-index:1;
  width:min(100%,480px);
  max-height:78dvh;
  overflow:auto;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0;
  background:var(--theme-card,#fff);
  box-shadow:0 -12px 38px rgba(20,42,60,.18);
}
.community-blocks-close{
  position:absolute;
  right:14px;
  top:12px;
  width:31px;
  height:31px;
  border:0;
  border-radius:50%;
  background:rgba(118,145,164,.12);
  color:var(--theme-text,#334a5c);
  font-size:20px;
  font-weight:800;
}
.community-blocks-sheet h3{
  margin:2px 36px 0 0;
  color:var(--theme-text,#334a5c);
  font-size:17px;
  font-weight:1000;
}
.community-blocks-sheet > p{
  margin:5px 36px 13px 0;
  color:var(--theme-muted,#6b8092);
  font-size:9px;
  line-height:1.45;
  font-weight:750;
}
.community-blocks-list{
  display:grid;
  gap:8px;
}
.community-blocked-user-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border-radius:13px;
  background:rgba(229,239,246,.62);
}
.community-blocked-user-row b,
.community-blocked-user-row span{
  display:block;
}
.community-blocked-user-row b{
  color:var(--theme-text,#334a5c);
  font-size:10px;
  font-weight:1000;
}
.community-blocked-user-row span{
  margin-top:2px;
  color:var(--theme-muted,#6b8092);
  font-size:8px;
  font-weight:750;
}
.community-blocked-user-row button{
  flex:0 0 auto;
  border:0;
  border-radius:9px;
  padding:7px 9px;
  background:rgba(91,151,194,.12);
  color:var(--theme-accent,var(--tone-6));
  font-size:8.5px;
  font-weight:1000;
}
/* 신고 후 차단 */
.community-report-block-option{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:10px 11px;
  border-radius:12px;
  background:rgba(112,136,154,.08);
  color:var(--theme-text,#334a5c);
  font-size:9px;
  line-height:1.4;
  font-weight:850;
}
.community-report-block-option input{
  width:17px;
  height:17px;
  flex:0 0 auto;
  accent-color:var(--theme-accent,var(--tone-6));
}
/* 회원 탈퇴 확인 오버레이 */
.account-delete-overlay{position:fixed;inset:0;z-index:11200;display:none;background:rgba(18,31,45,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.account-delete-overlay.open{display:flex}
.account-delete-backdrop{position:absolute;inset:0}
.account-delete-dialog{position:relative;z-index:1;width:min(100%,420px);padding:23px 20px 19px;border-radius:27px;background:var(--theme-card);border:1px solid var(--theme-border);box-shadow:0 22px 60px rgba(20,40,60,.28);text-align:center}
.account-delete-close{position:absolute;right:11px;top:9px;width:36px;height:36px;border:0;background:transparent;color:var(--text-main);font-size:27px;opacity:.58}
.account-delete-warning-icon{width:54px;height:54px;margin:2px auto 10px;border-radius:18px;display:grid;place-items:center;background:#fff0f0;color:#c64d4d;font-size:28px;font-weight:1000}
.account-delete-dialog h3{margin:0;font-size:20px}
.account-delete-lead{margin:7px 4px 13px;font-size:11px;line-height:1.55;opacity:.72}
.account-delete-loss-list{display:grid;gap:7px;margin:0 0 12px;text-align:left}
.account-delete-loss-list span{position:relative;padding:9px 11px 9px 31px;border-radius:12px;background:var(--theme-soft);font-size:10px;font-weight:800}
.account-delete-loss-list span::before{content:"−";position:absolute;left:12px;top:7px;color:#c75454;font-size:15px;font-weight:1000}
.account-delete-caution{margin:0 0 14px;padding:10px 12px;border-radius:12px;background:#fff4e8;color:#9a6230;font-size:10px;font-weight:900}
.account-delete-confirm-label,.account-delete-password-label{display:grid;gap:6px;margin-top:10px;text-align:left;font-size:10px;font-weight:900}
.account-delete-confirm-label input,.account-delete-password-label input{box-sizing:border-box;width:100%;height:44px;padding:0 13px;border:1px solid var(--theme-border);border-radius:13px;background:var(--theme-soft);color:var(--text-main);font:inherit}
.account-delete-message{min-height:18px;margin:9px 2px 0;font-size:9px;font-weight:800}
.account-delete-message[data-state="error"]{color:#bd4848}
.account-delete-message[data-state="busy"]{color:var(--theme-accent)}
.account-delete-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:5px}
.account-delete-actions button{height:45px;border-radius:14px;font-weight:900}
.account-delete-cancel{border:1px solid var(--theme-border);background:var(--theme-soft);color:var(--text-main)}
.account-delete-confirm{border:0;background:#c74f4f;color:#fff}
.account-delete-confirm:disabled{opacity:.36}


/* 오버레이 전용 애니메이션 */
@keyframes tourSpotlightPulse{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.96),0 0 0 7px rgba(63,157,255,.28),0 0 22px rgba(49,146,255,.34)}
50%{box-shadow:0 0 0 3px rgba(255,255,255,.98),0 0 0 9px rgba(255,186,76,.34),0 0 28px rgba(255,177,56,.38)}}

@keyframes dailyFiveBurst{0%{transform:translate3d(-50%,-50%,0) scale(.25) rotate(0deg);opacity:0}
  7%{opacity:1}
  34%{transform:translate3d(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y)),0) scale(1.08) rotate(calc(var(--spin)*.38));opacity:1}
  72%{opacity:1}
  100%{transform:translate3d(calc(-50% + var(--final-x)),calc(-50% + var(--final-y)),0) scale(.9) rotate(var(--spin));opacity:0}}

@keyframes dailyFivePop{0%{transform:scale(.35) rotate(-14deg)}65%{transform:scale(1.18) rotate(6deg)}100%{transform:scale(1) rotate(0)}}

@keyframes dailyFiveFlash{0%{transform:scale(.2);opacity:0}18%{opacity:1}100%{transform:scale(1.35);opacity:0}}

/* S25 Ultra: primary email action and registration switch touch targets */
.account-email-submit{display:block;width:100%;min-height:56px;padding:14px 18px;font-size:16px;font-weight:900;line-height:1.35;border-radius:14px;touch-action:manipulation}
.account-mode-toggle{display:block;margin:12px auto 0;min-height:44px;padding:10px 14px;font-size:14px;line-height:1.4;touch-action:manipulation}
.account-mode-toggle:focus-visible,.account-email-submit:focus-visible{outline:3px solid var(--theme-accent);outline-offset:3px}

/* Accessible, prominent mobile email login and registration. */
.account-email-submit{display:block;width:100%;min-height:56px;padding:13px 18px;border-radius:14px;font-size:16px;font-weight:800;line-height:1.35;cursor:pointer;touch-action:manipulation}
.account-mode-toggle{min-height:48px;padding:12px;font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Hidden account labels follow the existing account visibility rule above. */

/* Signup validation, S25 Ultra touch targets */
/* 닉네임 + 중복 확인은 한 줄 고정; 입력창만 유연하게 줄어든다. */
.account-nickname-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:8px;min-width:0;margin-top:5px}
.account-email-form .account-nickname-input-row input{width:100%;min-width:0;margin-top:0}
.account-nickname-check{margin:0;min-height:44px;min-width:88px;padding:0 12px;white-space:nowrap;border:1px solid var(--theme-border);border-radius:10px;background:var(--theme-soft);color:var(--text-main);font-size:13px;font-weight:800;touch-action:manipulation}
#accountNicknameStatus,#accountEmailStatus,#accountPasswordRules{display:block;margin-top:6px;font-size:11px;line-height:1.5;color:var(--text-sub);font-weight:500}
#accountNicknameLabel[hidden]{display:none}