/* 04 COMMON UI — 여러 페이지가 공유하는 컴포넌트의 단일 소유권. */


.footer{
  color:#8aa0ba;
  text-align:center;
  flex:0 0 auto;
  font-size:11px;
  padding-top:4px;
}

@media (max-height:760px){
  .footer{
    font-size:9px;
  }
}

ruby{
  ruby-position:over;
  ruby-align:center;
}

ruby rt{
  font-weight:950;
  color:#173f70;
  font-size:.42em;
  letter-spacing:0;
  white-space:nowrap;
}

.status{
  padding:7px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:950;
  white-space:nowrap;
  color:var(--theme-text);
  border-color:var(--theme-border);
  background:var(--theme-soft);
}

button[data-action="reveal"]{
  position:relative;
  z-index:9999;
  isolation:isolate;
  overflow:visible;
}

.brand-title-pair .brand-logo{
  height:100%;
  width:100%;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
}

#help .app-info-sign .brand-title-pair{
  height:62px;
  width:min(330px,88vw);
  max-width:100%;
  flex:0 1 330px;
}

@media (max-width:430px){
  #help .app-info-sign .brand-title-pair{
    height:58px;
    width:min(310px,86vw);
  }
}


.character-frame-slot{
  --character-frame-ring:#72BDF2;
  --character-frame-image:none;
  position:relative;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  line-height:0;
  border-radius:50%;
  overflow:visible;
  isolation:isolate;
}

.character-frame-slot .my-character{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  border:2px solid rgba(255,255,255,.96);
}

.character-frame-slot::after{
  content:"";
  position:absolute;
  inset:-4px;
  z-index:2;
  border-radius:50%;
  border:3px solid var(--character-frame-ring);
  box-shadow:0 0 0 1px rgba(255,255,255,.92),0 4px 11px rgba(39,111,178,.18);
  pointer-events:none;
}

.character-frame-slot::before{
  content:"";
  position:absolute;
  inset:-8px;
  z-index:3;
  border-radius:50%;
  background-image:var(--character-frame-image);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
}

.character-frame-slot[data-frame-item="basic-ring"]{
  --character-frame-ring:#72BDF2;
  --character-frame-image:none;
}

.character-frame-slot[data-frame-item="spring-flower"]::after{
  border-color:#f59bb7;
  box-shadow:0 0 0 2px rgba(149,211,160,.42),0 0 0 5px rgba(245,155,183,.18);
}

.character-frame-slot[data-frame-item="gold-star"]::after{
  border-color:#efc34f;
  box-shadow:0 0 0 2px rgba(255,225,124,.32),0 4px 10px rgba(173,123,13,.20);
}

.character-frame-slot[data-frame-item="jewel-blue"]::after{
  border-color:#62c8f2;
  box-shadow:0 0 0 2px rgba(96,126,239,.28),0 0 12px rgba(70,166,242,.38);
}

.character-frame-slot[data-frame-item="night-glow"]::after{
  border-color:#9b83e8;
  box-shadow:0 0 0 2px rgba(57,53,111,.45),0 0 13px rgba(129,102,224,.40);
}

.character-frame-slot[data-frame-item="mint-leaf"]::after{
  border-color:#68c9a4;
  box-shadow:0 0 0 2px rgba(165,229,199,.36),0 4px 10px rgba(53,145,111,.16);
}

@media (max-width:390px){
}

.initial-hidden{
  display:none;
}

/* =========================================================
   공통 UI — 단일 소유권 영역
   캐릭터 / 프로필 프레임 / 계급 / 닉네임 / 메인 타이틀 / 설정버튼 / 홈버튼
   페이지 CSS에서 이 내부 요소의 크기·모양을 다시 정의하지 않는다.
   ========================================================= */

.my-character{
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  flex:0 0 auto;
  cursor:pointer;
}

.brand-logo{
  display:block;
  object-fit:contain;
  object-position:left center;
}
.brand-logo-dark{display:none;}
:root[data-display-mode="dark"] .brand-title-pair .brand-logo:not(.brand-logo-dark){display:none;}
:root[data-display-mode="dark"] .brand-title-pair .brand-logo-dark{display:block;}
.brand-title-pair{display:flex;align-items:center;min-width:0;}

.app-header{
  --header-height:var(--device-header-height);
  --profile-left:var(--device-profile-home-left);
  --profile-width:var(--device-profile-home-width);
  --profile-shift-y:var(--device-profile-shift-y);
  --title-left:50%;
  --title-top:var(--device-header-control-top);
  --title-transform:translate(-50%,-50%);
  --settings-right:var(--device-settings-right);
  --settings-top:var(--device-header-control-top);
  position:relative;
  height:var(--header-height);
  min-height:var(--header-height);
  flex:0 0 var(--header-height);
  padding:2px 4px;
  overflow:visible;
}
.app-header--home{display:flex;align-items:center;justify-content:center;}
.app-header--study{
  --profile-left:var(--device-profile-study-left);
  --profile-width:var(--device-profile-study-width);
  --title-left:var(--device-title-study-left);
  --title-transform:translateY(-50%);
  display:block;
}
.app-profile-cluster{
  position:absolute;
  left:var(--profile-left);
  top:2px;
  bottom:2px;
  width:var(--profile-width);
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(var(--profile-shift-y));
  z-index:72;
}
.app-avatar-stack{
  width:100%;
  min-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.app-header .my-character{
  width:var(--device-profile-avatar);
  height:var(--device-profile-avatar);
  min-width:var(--device-profile-avatar);
  flex-basis:var(--device-profile-avatar);
  margin:0;
  align-self:center;
  box-shadow:0 4px 10px rgba(41,94,148,.14);
}
.app-nickname-row{
  position:relative;
  display:block;
  width:max-content;
  max-width:74px;
  min-height:19px;
  margin:1px auto 0;
  transform:translateY(3px);
}
.home-account-state{
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  margin-left:4px;
  padding:2px 5px;
  border-radius:999px;
  border:1px solid rgba(115,130,148,.22);
  background:rgba(255,255,255,.52);
  color:rgba(70,82,98,.72);
  font-size:7px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.02em;
  white-space:nowrap;
  pointer-events:none;
}
.home-account-state.is-linked{
  border-color:color-mix(in srgb,var(--theme-accent,var(--tone-6)) 32%, transparent);
  background:color-mix(in srgb,var(--theme-soft,var(--tone-2)) 88%, white);
  color:var(--theme-accent,var(--tone-6));
  font-size:8px;
  padding:2px 4px;
}
.app-nickname{
  display:block;
  max-width:none;
  border:0;
  background:transparent;
  padding:0 1px;
  margin:0;
  color:var(--theme-text,var(--tone-text));
  font-size:var(--device-nickname-font);
  line-height:var(--device-nickname-line);
  font-weight:1000;
  letter-spacing:-.035em;
  text-align:center;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}
.app-title-pair{
  width:var(--device-main-title-width);
  max-width:var(--device-main-title-width);
  height:var(--device-main-title-height);
  flex:0 0 var(--device-main-title-width);
  overflow:hidden;
}
.app-title-pair .brand-logo,
.app-title-pair .leveltest-logo{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
}
.app-main-title{
  position:absolute;
  left:var(--title-left);
  top:var(--title-top);
  transform:var(--title-transform);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:68;
}
.app-header--study .app-main-title{justify-content:flex-start;}

.app-settings-button{
  position:absolute;
  right:var(--settings-right);
  top:var(--settings-top);
  transform:translateY(-50%);
  width:var(--device-settings-size);
  height:var(--device-settings-size);
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  color:var(--theme-text,var(--tone-text));
  display:grid;
  place-items:center;
  font-size:0;
  z-index:74;
}
.app-settings-button::before{
  content:"";
  width:17px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;
}

.app-home-button{
  width:var(--device-home-size);
  height:var(--device-home-size);
  min-width:var(--device-home-size);
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--theme-accent,var(--tone-6));
  box-shadow:none;
  display:grid;
  place-items:center;
  touch-action:manipulation;
}
.app-home-button .app-home-svg{
  width:var(--device-home-icon-size);
  height:var(--device-home-icon-size);
  display:block;
  pointer-events:none;
}
.app-home-button:active{opacity:.68;}
.app-header--study > .app-home-button{
  position:absolute;
  left:0;
  top:var(--settings-top);
  transform:translateY(-50%);
  z-index:74;
}



/* v9.12.02 보석 계급 아이콘 */
/* v9.12.03 보석 계급 진행 팝업 */
.rank-progress-overlay[hidden]{display:none!important;}
.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;
}
:root[data-display-mode="dark"] .rank-progress-overlay{
  background:rgba(1,10,19,.54);
}
:root[data-display-mode="dark"] .rank-progress-sheet{
  background:#132c40;
  border-color:#315873;
}
:root[data-display-mode="dark"] .rank-progress-close,
:root[data-display-mode="dark"] .rank-progress-bar-wrap,
:root[data-display-mode="dark"] .rank-progress-item.active{
  background:#1b3a51;
}
:root[data-display-mode="dark"] .rank-progress-item b{
  background:#21445e;
  color:#eaf5ff;
}


/* v9.12.04 보석 계급 승급 축하 */
.rank-up-overlay[hidden]{display:none!important;}
.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}
}
:root[data-display-mode="dark"] .rank-up-overlay{background:rgba(1,9,18,.62);}
:root[data-display-mode="dark"] .rank-up-card{
  background:linear-gradient(180deg,#18354b,#102a3e);
  border-color:#355e7c;
}
:root[data-display-mode="dark"] .rank-up-card h3{color:#f3f8fc;}
:root[data-display-mode="dark"] .rank-up-card p{color:#b8ccdb;}
:root[data-display-mode="dark"] .rank-up-kicker{
  background:#20445e;
  color:#9ed6ff;
}




/* v9.12.49 계급 보석 단일 규정 */
.app-rank-icon{
  position:absolute;
  right:100%;
  left:auto;
  top:50%;
  transform:translateY(-50%);
  margin-right:4px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:var(--theme-accent,var(--tone-6));
  filter:drop-shadow(0 2px 3px rgba(20,45,70,.22));
}
.app-rank-icon .app-rank-gem{
  width:28px;
  height:28px;
  max-width:28px;
  max-height:28px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
  border:0;
  background:transparent;
}
.app-rank-icon > b{
  display:none!important;
}
.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-rank-gem,
img[data-rank-gem]{
  max-width:100px;
  max-height:100px;
  object-fit:contain;
  background:transparent;
  display:block;
  flex-shrink:0;
}