/* member common (mobile-first) */
/* This stylesheet is for end-user (mypage) screens. Backoffice uses menu.css etc. */

body {line-height:1.5;}

.m-container{
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 14px 28px;
}

.m-title{
  font-size: 18px;
  font-weight: 700;
  margin: 12px 0 14px;
  padding-left: 10px;
  border-left: 6px solid var(--green);
}

.m-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.m-stack{ display: grid; gap: 12px; }

.m-kv{ display: grid; gap: 6px; }
.m-kv .m-card-title{ font-size: 14px; font-weight: 700; }
.m-kv .k{ font-size: 14px; font-weight: 700; border-top:1px solid #ddd; padding-top:10px; }
.m-kv .explanation{ font-size: 14px; }
.m-kv .v{ font-size: 17px; }

.m-hr{ height:1px; background: rgba(0,0,0,.08); margin: 12px 0; }

.m-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  border:1px solid var(--bdr_gray);
  background:var(--bg_gray);
  color:var(--txt_black);
  cursor:pointer;
  text-decoration:none;
  appearance:none;
}

.m-btn:disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  border:1px solid var(--bdr_gray);
  background:var(--bg_gray);
  color:var(--txt_gray);
  cursor:not-allowed;
  text-decoration:none;
  appearance:none;
}
.m-btn-caution{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  border:1px solid var(--bdr_gray);
  background: #fff6e8;
  color:#9a5b00;
  cursor:pointer;
  text-decoration:none;
  appearance:none;
}

.m-note{ font-size: 12px; opacity: .8; line-height: 1.6; }

.m-badge{
  display: inline-block;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  color: #ff0000;
  border: 1px solid #ff0000;
  background: #fff;
}

.member-header {
  display: flex;
  justify-content: center;
  background: #fff;
}

.member-logo {
  max-width: 150px;
  height: auto;
}