/* user/css/layouts.css
   ✅ 프레임/레이아웃 전용 (009 규칙)【turn36file1†L6-L13】
   - #app / #header / #middle / #left / #right / #footer 배치
   - PC max-width: 720, 모바일 100%
*/

:root{
  --header-h: 40px;
  --footer-h: 40px;

  --bg: #e6e6e6;
  --card: #ffffff;
  --border: #cfd6df;
  --text: #1a2433;
  --muted: #6b7a90;
  --radius: 12px;
  --gap: 10px;
}

html, body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans KR', sans-serif;
}

/* Frame (#app) : 모바일 100%, PC는 720 제한 */
#app{
  max-width: 720px;          /* 핵심: 720 넘지 않게 */
  margin: 12px auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,0.35);
  box-sizing: border-box;

  display:flex;
  flex-direction:column;

  /* 게임 화면은 기본 600 느낌 유지하되, 로그인 등 작은 페이지도 깨지지 않게 */
  min-height: 600px;
}

/* Header */
#header{
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.85);

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding: 0 10px;  /* ✅ #app에 padding 넣지 말고 여기서 */
  box-sizing:border-box;
}
 


/* HUD 기본 텍스트 */
#hudNameLv{ font-weight: 700; font-size: 13px; }
#hudCooldown{ font-size: 12px; color: var(--muted); margin-left: 10px; }

/* 헤더 버튼 공통 */
#header button,
#btnHudLogout, #btnHudHome{
  height: 26px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
}
#header button:hover{ background:#f3f4f6; }

/* ✅ 헤더 우측 네비 버튼을 '글자'처럼 보이게 (레이아웃 변화 없음) */
#header .header-nav .navLink{
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
}
#header .header-nav .navLink:hover{
  background: transparent;
  text-decoration: underline;
}
#header .header-nav .navLink:focus{
  outline: none;
}


/* Middle (full width like header/footer) */
#middle{
  min-height: 0;

  display:flex;
  gap: var(--gap);

  /* ✅ 좌우를 밀지 않게: full-bleed */
  padding: 0;
  box-sizing:border-box;

  overflow:hidden;
}


#left{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* pageMount gets inner padding instead */
#pageMount{
  flex: 1 1 auto;
  min-height: 0;
  overflow:hidden;

  /* ✅ 컨텐츠 여백은 여기로 */
  padding: var(--gap);
  box-sizing: border-box;
}



/* Right dock area */
#right{
  width: 320px;
  flex: 0 0 320px;
  min-width: 320px;
  min-height: 0;
  display:flex;
  flex-direction:column;
}
#dockMount{
  flex: 1 1 auto;
  min-height: 0;
}

/* Footer */
#footer{
  height: var(--footer-h);
  border-top: 1px solid var(--border);
  background: #f8fafc;
  display:flex;
  align-items:center;
  padding: 0 12px;
  box-sizing:border-box;
  color: var(--muted);
  font-size: 12px;
}

/* Card helper (레이아웃에서 공용 박스만) */
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-sizing:border-box;
}
.card.pad{ padding: 10px; }

/* ===== Responsive: 작은 화면에서는 도크를 아래로 ===== */
@media (max-width: 720px){
  
  #right{
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
  }
}




/* ===============================
   HEADER V2 - 2줄 HUD 구조
================================ */

#header{
  height:72px;
  padding:6px 12px;
  background:rgba(255,255,255,0.92);
  border-bottom:1px solid rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
}

/* 상단 영역 */
.header-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.header-left{
  display:flex;
  gap:6px;
  align-items:center;
  font-size:14px;
  font-weight:600;
}

.player-level{
  color:#3a7afe;
}

.player-name{
  color:#222;
}

/* 우측 HUD */
.header-right{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13px;
}

.hud-item{
  display:flex;
  align-items:center;
  gap:4px;
  font-weight:500;
}

.hud-icon{
  position:relative;
  cursor:pointer;
  font-size:18px;
  transition:transform 0.15s ease;
}

.hud-icon:hover{
  transform:translateY(-1px);
}

/* 알림 Dot */
.hud-icon.has-dot::after{
  content:"";
  position:absolute;
  top:-2px;
  right:-2px;
  width:7px;
  height:7px;
  background:#ff3b3b;
  border-radius:50%;
}

/* EXP / ORB 영역 */
.header-bars{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.bar{
  position:relative;
  height:8px;
  border-radius:6px;
  background:rgba(0,0,0,0.08);
  overflow:hidden;
}

.bar-fill{
  height:100%;
}

/* EXP */
.exp-bar .bar-fill{
  width:72%;
  background:linear-gradient(90deg,#3a7afe,#6aa9ff);
}

/* ORB */
.orb-bar .bar-fill{
  width:35%;
  background:linear-gradient(90deg,#8e44ff,#c084ff);
}

.bar-text{
  position:absolute;
  right:6px;
  top:-14px;
  font-size:10px;
  color:#666;
}


/* Frame (#app) : 컨테이너 역할만 */
#app{
  
  max-width: 720px;
  margin: 12px auto;

  /* ✅ 큰 테두리/라운드 제거 */
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;

  display:flex;
  flex-direction:column;

  /* ✅ 헤더/메인/푸터 사이 간격을 만들 “바깥 여백” */
  padding: var(--gap);
  box-sizing: border-box;

  min-height: 600px;
}

/* ✅ 섹션을 카드처럼: 헤더/메인/푸터 공통 */
#header, #middle, #footer{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-sizing: border-box;
}

/* ✅ 헤더-메인-푸터 사이 간격 */
#header{ margin-bottom: var(--gap); }
#middle{ margin-bottom: var(--gap); }

/* middle 내부는 카드 안쪽 여백이 필요하면 여기서 */
#middle{
  padding: var(--gap);
  overflow: hidden; /* 필요시만. 내부 스크롤/깨짐 있으면 제거 */
}

/* ✅ 로그인(data-auth="0")에서는 pageMount의 “추가 카드 선” 제거 */
#app[data-auth="0"] #pageMount{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;   /* 로그인 폼이 너무 붙으면 10px 정도로 조절 */
}

/* =========================================================
   FINAL OVERRIDES (layout authority)
   목적:
   - #app은 컨테이너(테두리 없음)
   - #header/#middle/#footer는 각각 카드
   - 로그인(data-auth="0")은 pageMount 추가 카드선 제거
========================================================= */

/* 1) #app: 바깥 컨테이너로만 사용 (큰 테두리/라운드 제거) */
#app{
  max-width: 720px;
  margin: 12px auto;

  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;

  display: flex;
  flex-direction: column;

  padding: var(--gap);
  box-sizing: border-box;
  min-height: 600px;
}

/* 2) 섹션(헤더/메인/푸터)은 각각 카드처럼 */
#header, #middle, #footer{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-sizing: border-box;
}

/* 3) 헤더-메인-푸터 간격 통일 */
#header{ margin-bottom: 12px; }
#middle{ margin-bottom: 12px; }

/* middle 내부 여백 */
#middle{
  padding: var(--gap);
}

/* 4) 로그인 상태(data-auth="0"): pageMount의 "추가 카드선(이중보더)" 제거 */
#app[data-auth="0"] #pageMount{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

#app[data-auth="0"] #middle{
  min-height: 420px;
}


#footer{
  height: var(--footer-h);
  padding: 0 12px;
  display: flex;
  align-items: center;
  flex: 0 0 var(--footer-h);
}

/* ===============================
   로그인 화면 전용 카드 스타일
   pageMount 자체가 아니라
   내부 첫 컨텐츠 래퍼에만 적용
================================ */

/* 로그인 상태일 때만 */
#app[data-auth="0"] #pageMount > div{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

#footer{
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  flex: 0 0 40px;
}

/* ===== 헤더 텍스트 네비 (로그인 후) ===== */
.header-line{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.header-nav{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.cooldown-text{
  color: var(--muted);
  font-size:13px;
}

.sep{
  color: var(--muted);
  opacity:0.8;
}

.navLink{
  appearance:none;
  background:none;
  border:none;
  padding:0;
  margin:0;
  font: inherit;
  font-size:13px;
  color: var(--text);
  cursor:pointer;
}

.navLink:hover{
  text-decoration:underline;
}

.navLink:active{
  transform: translateY(1px);
}


/* ===== FINAL FOOTER TEXT ALIGN (login/index + app 공통, no layout change) ===== */
#footer .footer-inner{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

#footer .footer-right{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

#footer a{
  text-decoration:none;
  color:inherit;
}

#footer a:hover{
  text-decoration:underline;
}