/* =========================================================
   MEMBER UI – condensed (scope: .xm)
   ========================================================= */
.xm{
  --ott-blue:#163bba;
  --blue:#163bba;
  --red:#ff6600;
  --bg:#fff;
  --card:#fff;
  --text:#1c1c1e;
  --sub:rgba(60,60,67,.72);
  --sep:rgba(60,60,67,.16);
  --radius:16px;
  --radius-input:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow-soft:0 2px 10px rgba(0,0,0,.04);
  --focus-border: rgba(22,59,186,.45);
  --focus-ring: rgba(22,59,186,.12);
  --danger:#ff3b30;
  --cta-height:54px;
}

/* 배경/기본 */
body{ background: var(--bg); color: var(--text); }

/* page */
.mi{
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 16px 28px;
}

/* title */
.mi__title{
  margin: 2px 0 14px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* message */
.mi__msg{
  margin: 10px 0 14px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--sep);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.mi__msg p{ margin:0; font-size:14px; color:var(--sub); }

/* section card */
.mi__section{
  background: var(--card);
  border: 1px solid var(--sep);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 12px 0;
}

/* profile header */
.mi__profile{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 18px 16px;
  background: linear-gradient(180deg, rgba(0,122,255,.10), rgba(0,122,255,0));
}
.mi__avatar{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  flex: 0 0 auto;
}
.mi__who{
  min-width: 0;
}
.mi__who h2{
  margin:0;
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mi__who p{
  margin:4px 0 0;
  font-size:13px;
  color: var(--sub);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* rows */
.mi__rows{ padding: 6px 0; }
.mi__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--sep);
}
.mi__row:first-child{ border-top:0; }

.mi__label{
  font-size: 14px;
  color: var(--sub);
  flex: 0 0 auto;
  padding-top: 1px;
}
.mi__value{
  font-size: 15px;
  color: var(--text);
  text-align: right;
  min-width: 0;
  flex: 1 1 auto;
  word-break: break-word;
}
.mi__empty{ color: rgba(60,60,67,.45); }

/* long group list: make it scroll or wrap nicely */
.mi__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.mi__chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,122,255,.10);
  color: #0b57d0;
  border: 1px solid rgba(0,122,255,.18);
}

/* buttons */
.mi__actions{
  display:grid;
  gap:10px;
  margin-top: 14px;
}
.mi__btn{
  display:block;
  width:100%;
  text-align:center;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--sep);
  background: var(--card);
  color: var(--blue);
  font-weight: 700;
  font-size: 16px;
  text-decoration:none;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.mi__btn--primary{
  background: var(--blue);
  border-color: transparent;
  color: #fff;
}
.mi__btn--danger{
  background: var(--red);
  border-color: transparent;
  color: #fff;
}

/* mobile */
@media (max-width:420px){
  .mi{ padding: 14px 12px 22px; }
  .mi__profile{ padding: 16px 14px; }
  .mi__row{ padding: 12px 14px; }
}

/* XE 기본 btn / btn-group 완전 무력화 */
.mi__actions{
  width: 100%;
}

.mi__actions .btn,
.mi__actions .mi__btn{
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* btn-group 영향 제거 */
.mi__actions.btn-group,
.mi__actions .btn-group{
  display: block !important;
}

/* 혹시 남아있는 float 제거 */
.mi__actions .btn{
  float: none !important;
}




/* (member 쪽에서만) 타이틀/설명/메시지 */
.xm h1{
  max-width:560px; margin:28px auto 12px; padding:0 16px;
  font-size:26px; font-weight:800; letter-spacing:-0.02em;
}
.xm h1 + p{
  max-width:560px; margin:0 auto 14px; padding:0 16px;
  color:var(--sub); font-size:14px; line-height:1.45;
}
.xm .message{
  max-width:560px; margin:10px auto 12px; padding:12px 14px;
  background:var(--card); border:1px solid var(--sep);
  border-radius:14px; box-shadow:var(--shadow-soft);
}
.xm .message p{ margin:0; color:var(--sub); font-size:14px; line-height:1.4; }

/* ✅ 공통: member 폼 카드 (대부분의 member 페이지가 이걸로 커버됨)
   - 특정 form id/action을 길게 나열하지 말고 .xm 안의 form을 기본으로 잡고,
     예외 폼만 아래에서 제외/덮어쓰기 */
.xm form{
  max-width:560px;
  margin:12px auto 0;
  padding:16px;
  background:var(--card);
  border:1px solid var(--sep);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ✅ 공통 인풋류 */
.xm form :is(input[type="text"], input[type="email"], input[type="password"], select, textarea){
  width:100%;
  box-sizing:border-box;
  padding:14px;
  border-radius:var(--radius-input);
  border:1px solid var(--sep);
  background:#fff;
  font-size:16px;
  outline:none;
  margin:8px 0 12px;
}
.xm form :is(input[type="text"], input[type="email"], input[type="password"], select, textarea):focus{
  border-color:var(--focus-border);
  box-shadow:0 0 0 4px var(--focus-ring);
}
.xm form :is(input[readonly], input[disabled], textarea[readonly], textarea[disabled]){
  background:rgba(242,242,247,.9);
  color:var(--sub);
}

/* ✅ 공통 submit 버튼 */
.xm form :is(button[type="submit"], input[type="submit"]){
  display:block !important;
  width:100% !important;
  height:var(--cta-height) !important;
  padding:0 16px !important;
  border:0 !important;
  border-radius:var(--radius) !important;
  background:var(--ott-blue) !important;
  color:#fff !important;
  font-size:17px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  line-height:var(--cta-height) !important; /* 글씨 세로중앙 */
}

/* ✅ btnArea / float 충돌 제거 + 버튼 그룹 세로 스택 */
.xm .btnArea, .xm .btn-group{ float:none !important; }
.xm .btnArea{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; margin-top:14px !important; }
.xm .btnArea :is(a, button, input){ float:none !important; width:100% !important; box-sizing:border-box !important; }

/* ✅ 취소/보조 버튼(링크) 공통 */
.xm .btnArea a,
.xm form a.btn-cancel{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:50px !important;
  padding:0 16px !important;
  border-radius:var(--radius) !important;
  border:1px solid var(--sep) !important;
  background:#fff !important;
  color:var(--ott-blue) !important;
  font-size:16px !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

/* Rechecked Password: procMemberModifyInfoBefore 폼만 레이아웃 보정 */
.xm form:has(> input[type="hidden"][name="act"][value="procMemberModifyInfoBefore"]) .input-append{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}
.xm form:has(> input[type="hidden"][name="act"][value="procMemberModifyInfoBefore"]) input[readonly]{
  margin-bottom:12px !important;
}

.xm form[action*="procMemberLeave"] :is(button[type="submit"], input[type="submit"]){
  background:var(--danger) !important;
}

.xm form :is(input[type="file"]){
  width:100% !important;
  box-sizing:border-box !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  border:1px solid var(--sep) !important;
  background:#fff !important;
  font-size:14px !important;
  color:var(--sub) !important;
}
.xm form input[type="file"]::file-selector-button,
.xm form input[type="file"]::-webkit-file-upload-button{
  height:36px;
  padding:0 12px;
  margin-right:10px;
  border:1px solid var(--sep);
  border-radius:12px;
  background:rgba(22,59,186,.10);
  color:var(--ott-blue);
  font-weight:800;
  cursor:pointer;
}

.xm form :is(.help, .desc, small){
  display:block !important;
  margin:8px 0 12px !important;
  font-size:13px !important;
  line-height:1.45 !important;
  color:var(--sub) !important;
}

/* 라디오/체크 옵션을 카드처럼 */
.xm form label:has(input[type="radio"]),
.xm form label:has(input[type="checkbox"]),
.xm form input[type="radio"] + label,
.xm form input[type="checkbox"] + label{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 12px !important;
  margin:8px 0 !important;
  border:1px solid var(--sep) !important;
  border-radius:14px !important;
  background:#fff !important;
  cursor:pointer !important;
  user-select:none !important;
}

.xm form input[type="radio"],
.xm form input[type="checkbox"]{
  transform:scale(1.15) !important;
  margin:0 !important;
}

.xm form label:has(input[type="radio"]:checked),
.xm form label:has(input[type="checkbox"]:checked),
.xm form input[type="radio"]:checked + label,
.xm form input[type="checkbox"]:checked + label{
  border-color: rgba(22,59,186,.30) !important;
  background: rgba(22,59,186,.08) !important;
}

/* =========================================================
   Login actions (회원가입 | ID/PW 찾기) – map .login-actions
   ========================================================= */

.xm .login-actions{
  max-width: 560px;
  margin: 18px auto 0;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 14px;
}

.xm .login-actions a{
  color: var(--ott-blue);
  font-weight: 700;
  text-decoration: none;
  position: relative;
}

/* 구분선 */
.xm .login-actions a + a:before{
  content:"";
  position:absolute;
  left:-9px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:12px;
  background: rgba(60,60,67,.30);
}