/* 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);
  }
}


.initial-hidden{
  display:none;
}

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

.brand-logo{
  display:block;
  object-fit:contain;
  object-position:left center;
}
.brand-logo-dark{position:absolute;inset:0;opacity:0;pointer-events:none;}
.brand-title-pair{position:relative;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:14.5px;
  --profile-width:var(--device-profile-home-width);
  --title-left:50%;
  --title-transform:translate(-50%,-50%);
  display:block;
}
.app-header--settings{
  /* 설정화면 상단헤더: 연습화면과 동일 좌표 */
  --profile-left:14.5px;
  --profile-width:var(--device-profile-home-width);
  --title-left:50%;
  --title-transform:translate(-50%,-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{
  position:relative;
  width:100%;
  min-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.app-nickname-row{
  display:block;
  width:74px;
  max-width:none;
  min-height:19px;
}
.app-nickname{
  max-width:none;
  overflow:visible;
  text-overflow:clip;
  display:block;
  border:0;
  background:transparent;
  padding:0 1px;
  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;
}
.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:center;}

.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-header--study > .app-home-button{
  position:absolute;
  top:31px;
  left:0;
  margin-left:-15px;
  transform:translateY(-50%);
}
.app-header--settings > .app-home-button{
  position:absolute;
  top:31px;
  left:0;
  margin-left:-15px;
  transform:translateY(-50%);
}

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




/* 학습메이트 실전확인 프로필 배지 */
.mate-practical-badge{
  position:absolute;
  right:-4px;
  top:1px;
  z-index:8;
  min-width:30px;
  height:30px;
  padding:0 7px;
  border:2px solid rgba(255,255,255,.95);
  border-radius:999px;
  background:var(--tone-2);
  box-shadow:0 4px 12px rgba(38,113,166,.18);
  color:var(--tone-6);
  font-size:16px;
  line-height:26px;
  font-weight:900;
  cursor:pointer;
}
.mate-practical-badge[hidden]{display:none}

/* 홈 계급은 실제 화면 왼쪽 벽에서 최소 5px 안전 여백을 확보한다.
   홈 닉네임은 계급 아이콘 오른쪽에서 5px 간격을 둔다. 연습 화면 계급 배치는 건드리지 않는다. */
.app-header--home .app-nickname-row{
  position:relative;
  width:var(--profile-width);
  max-width:none;
  min-height:19px;
  margin:1px auto 0;
  transform:translateY(3px);
}
.app-header--home .app-rank-icon{
  left:calc(5px - var(--device-screen-inline) - var(--profile-left));
  right:auto;
  top:calc(50% - 9px);
}
.app-header--home .app-nickname{
  position:absolute;
  left:calc(46px - var(--device-screen-inline) - var(--profile-left));
  width:max-content;
  padding:0;
  margin:0;
  text-align:left;
}

/* 보석 계급 아이콘 */
/* hidden 속성이 초기 렌더에서 display:grid에 덮이지 않도록 명시한다. */
.app-rank-icon[hidden]{display:none;}

/* 계급 보석 단일 규정 */
.app-rank-icon{
  position:absolute;
  right:calc(100% - 10px);
  left:auto;
  top:calc(50% - 5px);
  transform:translateY(-50%);
  margin-right:6px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  overflow:visible;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.86);
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.82) 0%,rgba(232,244,255,.68) 42%,rgba(180,214,244,.46) 100%);
  box-shadow:
    0 3px 8px rgba(39,91,143,.16),
    inset 0 1px 0 rgba(255,255,255,.92);
  color:var(--theme-accent,var(--tone-6));
  filter:drop-shadow(0 2px 3px rgba(20,45,70,.16));
}
.app-rank-icon .app-rank-gem{
  width:32px;
  height:32px;
  max-width:32px;
  max-height:32px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
  border:0;
  background:transparent;
  filter:drop-shadow(0 2px 3px rgba(29,89,149,.22));
}
.app-rank-icon > b{
  display:none;
}
.community-rank-gem,
img[data-rank-gem]{
  max-width:100px;
  max-height:100px;
  object-fit:contain;
  background:transparent;
  display:block;
  flex-shrink:0;
}


/* Character size only: no position/translate rules */
.my-character{
  display:block;
  width:53px;
  height:53px;
  max-width:53px;
  max-height:53px;
  object-fit:cover;
}


/* Basic character ring only — no position shift */
.character-frame-slot{
  --character-frame-ring:var(--tone-5);
  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);
  border-radius:50%;
}

.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[data-frame-item="basic-ring"]{
  --character-frame-ring:var(--tone-5);
}
.character-frame-slot[data-frame-item="spring-flower"]{--character-frame-ring:#f59bb7}
.character-frame-slot[data-frame-item="spring-flower"]::after{box-shadow:0 0 0 3px #95d3a066,0 0 0 6px #f59bb72e}
.character-frame-slot[data-frame-item="gold-star"]{--character-frame-ring:#efc34f}
.character-frame-slot[data-frame-item="gold-star"]::after{box-shadow:0 0 0 3px #ffe17c66,0 4px 11px #ad7b0d38}
.character-frame-slot[data-frame-item="jewel-blue"]{--character-frame-ring:#62c8f2}
.character-frame-slot[data-frame-item="jewel-blue"]::after{box-shadow:0 0 0 3px #607eef55,0 0 12px #46a6f288}
.character-frame-slot[data-frame-item="night-glow"]{--character-frame-ring:#9b83e8}
.character-frame-slot[data-frame-item="night-glow"]::after{box-shadow:0 0 0 3px #39356f66,0 0 15px #8166e077}
.character-frame-slot[data-frame-item="mint-leaf"]{--character-frame-ring:#68c9a4}
.character-frame-slot[data-frame-item="mint-leaf"]::after{box-shadow:0 0 0 3px #a5e5c766,0 4px 10px #35916f38}

/* Home character left safe space only */
.app-header--home .app-avatar-stack > .character-frame-slot{
  margin-left:23px;
}

/* 연습화면 계급/닉네임 위치 */
.app-header--study .app-rank-icon{
  top:41px;
  right:calc(100% - 21px);
  transform:none;
}
.app-header--study .app-nickname{
  position:absolute;
  left:21px;
  top:57px;
  margin:0;
}

/* 설정화면도 연습화면과 동일한 계급/닉네임 좌표 사용 */
.app-header--settings .app-rank-icon{
  top:41px;
  right:calc(100% - 21px);
  transform:none;
}
.app-header--settings .app-nickname{
  position:absolute;
  left:21px;
  top:57px;
  margin:0;
}