/* ========================================
   mypage.css — 마이페이지 = **계정 설정**

   규칙은 prd-redesign.md. 이 파일이 지키는 것:
     · 이중 중첩 금지 — 회색 상자(.profile-card) 안에 필드를 넣지 않는다.
       섹션 제목 + 줄만으로 구조가 선다 (공급사 표와 같은 방식).
     · 오렌지는 액센트. 링크·수정 버튼에만.
     · 하드코딩 색 금지 — 옛 보라(#4f46e5)·쿨그레이(#f3f4f6)가 남아 있던 곳이다.
   ======================================== */

/* ────────────── 섹션 ──────────────
   🔴 1열이다. 계정 설정은 위에서 아래로 읽는 목록이라 2열로 놓으면
   눈이 좌우로 튀고, 좁은 화면에서 어차피 1열이 된다. */
/* 🔴 폭은 좁히되 **가운데로 몰지 않는다.** max-width 만 줄이면 바깥 컨테이너의
   margin:auto 가 본문을 화면 한가운데로 보내, 좌측 라인이 어긋난다
   (css/common.css 의 :root — 페이지를 옮길 때 '미세하게 튀던' 원인).
   컨테이너 폭은 껍데기(.tool-main)가 정하고 **안쪽 읽기 폭만** 720 으로 제한한다. */
.mypage-container > .page-head {
  max-width: 720px;
}

/* 🔴 **한 블록이다.** 예전엔 .mypage-section 규칙이 두 번 있었다(폭 / 여백).
      나중 것만 이기는데 둘 다 살아 있어 읽는 사람이 어느 쪽이 진짜인지 헷갈렸다.
   🔴 아래 여백이 위보다 크다. 위아래가 같으면 경계선이 **어느 단락 것인지**
      애매해져 다음 섹션 제목이 앞 선에 붙어 보인다. 선은 위 단락의 마감이다. */
.mypage-section {
  max-width: 720px;
  padding-bottom: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
  border-bottom: 1px solid var(--ink-200);
}

.mypage-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* 🔴 **묶는 것은 묶이는 것보다 약해 보여야 한다** — 사이드바 그룹 라벨과 같은 처방
   (prd-redesign.md §3 "위계").
   제목이 12px 인데 행 제목이 14px/600 이라, 작은 쪽이 머리글이 아니라
   **흐린 곁다리**로 읽히고 단락 경계가 사라져 있었다.

   🔴 **자간+여백만으로는 부족했다** (2026-09-05 실측). 사이드바에서 통한 처방을
      그대로 옮겼는데 여기선 약했다 — 사이드바 항목은 아이콘+짧은 이름이라 가볍지만,
      마이페이지 행은 **제목+설명 두 줄**이라 시각적 무게가 훨씬 크기 때문이다.
   → **좌측 오렌지 규칙선**을 더한다. 설명 페이지 소제목에 이미 쓰는 방식이라
      사이트 안에서 같은 말을 한다. 🔴 크기는 여전히 안 키운다 — 키우면 페이지
      제목(h1)과 경쟁하고, 규칙선은 **폭을 안 먹으면서** 단락 시작을 말한다. */
.mypage-section-title {
  margin: 0 0 var(--spacing-sm);
  padding-left: var(--spacing-sm);
  border-left: 3px solid var(--brand-500);
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ink-700);
}

/* 🔴 상자가 아니다. 배경·테두리를 주지 않는다 (이중 중첩 금지). */
.mypage-body {
  display: block;
}

/* ────────────── 접이식 (API 설정) ──────────────
   details/summary 를 쓴다 — 열림 상태 관리와 키보드 접근성을 브라우저가 준다. */
/* 🔴 API 설정 머리글은 **접기 버튼도 겸한다.** 위 .mypage-section-title 의
   좌측 규칙선을 그대로 두면 삼각형 마커와 규칙선이 나란히 붙어 두 줄로 읽힌다
   → 여기서만 규칙선을 걷고, 단락 시작은 삼각형이 말한다.
   🔴 padding 을 통째로 다시 쓰면 위 padding-left 를 덮으므로 의도적으로 0 을 적는다. */
.mypage-fold-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  list-style: none;
  padding: var(--spacing-xs) 0;
  padding-left: 0;
  border-left: none;
  user-select: none;
}

.mypage-fold-summary::-webkit-details-marker { display: none; }

/* 삼각형은 직접 그린다 — 기본 마커는 브라우저마다 크기·색이 다르다 */
.mypage-fold-summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid var(--ink-400);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--transition-fast);
}

.mypage-fold[open] > .mypage-fold-summary::before {
  transform: rotate(90deg);
}

/* 접힌 채로도 "넣었는지" 를 알린다 — 값은 절대 안 보여준다. */
.mypage-fold-hint {
  font-size: var(--font-2xs);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-400);
}

.mypage-fold-hint.is-warn {
  color: var(--brand-600);
}

/* ────────────── 줄 (도구 요약 · 결제코드 · 결제 확인) ────────────── */
.mypage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-200);
  color: inherit;
  text-decoration: none;
}

.mypage-row:last-child {
  border-bottom: none;
}

/* 진열로 가는 통로 — 줄 전체가 링크다 */
.mypage-row-link {
  transition: background var(--transition-fast);
  margin: 0 calc(var(--spacing-sm) * -1);
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
  border-radius: var(--radius-md);
}

.mypage-row-link:hover {
  background: var(--ink-50);
}

.mypage-row-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* 🔴 ink-900 이 아니다. 섹션 제목과의 경쟁을 한 단계 줄인다 — 행이 가장 진하면
   머리글이 이길 방법이 없다. 읽기에는 800 으로 충분하다. */
.mypage-row-title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--ink-800);
}

.mypage-row-sub {
  font-size: var(--font-xs);
  line-height: var(--line-base);
  color: var(--ink-500);
}

.mypage-row-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.mypage-row-go {
  flex-shrink: 0;
  font-size: var(--font-xl);
  line-height: 1;
  color: var(--ink-400);
}

.mypage-row-link:hover .mypage-row-go {
  color: var(--brand-600);
}

/* ────────────── 필드 (계정 · API) ────────────── */
/* ────────────── 계정 필드 — 2열 ──────────────
   🔴 **값이 짧은 항목을 1열로 늘어놓으면 우측이 통째로 빈다.** 등급(배지)·아이디·
      닉네임·가입일은 전부 한 줌짜리 값인데, space-between 이 라벨과 값을 화면 양 끝으로
      밀어붙여 **눈이 좌우로 멀리 튀었다.** 값을 라벨 옆에 붙이는 것만으로는 부족하다 —
      그러면 간격이 우측 여백으로 옮겨갈 뿐이다.
   → 두 칸으로 짝지어 **빈 오른쪽에 다음 항목**이 오게 한다. 4줄이 2줄이 되어
      모달도 짧아진다. */
#profileInfo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-2xl);
}

/* 🔴 space-between 을 걷었다. 그것이 라벨과 값을 **양 끝으로 밀어붙여** 눈이
   좌우로 튀게 만든 원인이다. 이제 라벨 다음에 값이 바로 온다. */
.profile-field {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-200);
  gap: var(--spacing-md);
}

/* 값이 span 하나뿐인 행(아이디·가입일·등급 배지)도 라벨 옆에 붙는다. */
.profile-field > span,
.profile-field > .role-badge {
  margin-right: auto;
}

/* 🔴 마지막 **두** 칸의 선을 지운다 — 1열일 때의 :last-child 만으로는 2열에서
   왼쪽 칸 선이 남아 한쪽만 밑줄이 그어진 것처럼 어긋난다. */
.profile-field:last-child,
.profile-field:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

/* 좁아지면 1열로 — 두 칸을 억지로 유지하면 값이 라벨과 겹친다. */
@media (max-width: 560px) {
  #profileInfo {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .profile-field:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--ink-200);
  }
}

/* 🔴 `min-width:100px` 을 걷었다. 1열 시절엔 라벨 폭을 맞춰 값이 세로로 정렬되게
   하는 장치였는데, 2열에서는 **좁은 칸 안에서까지 라벨이 100px 을 차지해**
   값을 오른쪽 끝으로 또 밀어냈다 — 2열로 줄인 간격이 칸 안에서 되살아난다.
   이제 라벨은 제 글자만큼만 차지하고, 값은 그 옆에 붙는다. */
.profile-field > label {
  font-weight: 500;
  color: var(--ink-500);
  font-size: var(--font-sm);
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.profile-field > span {
  color: var(--ink-900);
  font-size: var(--font-sm);
}

/* 필드 값 + 버튼 영역
   🔴 flex-end 가 아니라 flex-start — 값을 라벨 옆에 붙인다. [수정] 버튼은
   `.edit-btn` 이 margin-left:auto 로 혼자 오른쪽 끝에 남는다(아래). */
.field-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-start;
}

.field-value span {
  color: var(--ink-900);
  font-size: var(--font-sm);
}

.field-value-full {
  flex: 1;
}

/* 인라인 input */
.field-input {
  padding: 6px 10px;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  background: var(--bg-surface);
  color: var(--ink-900);
  transition: border-color var(--transition-fast);
  width: 100%;
}

.field-input:focus {
  outline: none;
  border-color: var(--ink-900);
  box-shadow: 0 0 0 2px rgba(20, 19, 15, 0.08);
}

/* 저장 성공 — 상태색을 쓴다(하드코딩 #28a745 였다) */
.field-input.field-saved {
  border-color: var(--success-color);
  box-shadow: 0 0 0 2px rgba(63, 143, 107, 0.15);
}

/* 닉네임 필드 input */
#nicknameInput {
  max-width: 160px;
}

/* 수정/변경 텍스트 버튼 — 오렌지는 여기 같은 보조 액션에 쓴다 */
/* 🔴 값은 라벨 옆에 붙지만 [수정] 은 **오른쪽 끝**에 남는다 — 누르는 것이라
   값과 나란히 두면 어디까지가 값이고 어디부터가 버튼인지 흐려진다. */
.edit-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--brand-600);
  font-size: var(--font-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.edit-btn:hover {
  background: var(--brand-50);
}

/* ========================================
   PIN 변경 폼
   ======================================== */
.pin-change-form {
  padding: 16px 0 8px;
  border-top: 1px solid var(--ink-200);
}

.pin-change-row {
  display: flex;
  gap: 12px;
}

.pin-change-field {
  flex: 1;
}

.pin-change-field label {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 500;
}

.pin-change-field .pin-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 16px;
  text-align: center;
  letter-spacing: 6px;
  font-weight: 600;
  background: var(--bg-surface);
  color: var(--text-primary);
}

.pin-change-field .pin-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.1);
}

.pin-change-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.pin-change-actions .btn-sm {
  padding: 6px 16px;
  font-size: var(--font-xs);
  border-radius: var(--radius-md);
}

/* ========================================
   API 노트
   ======================================== */
.api-note {
  font-size: var(--font-xs);
  color: var(--text-muted);
  padding: 8px 0 12px;
}

.api-note a {
  color: var(--brand-600);
}

/* ── API 설정 — 입력칸 옆 [API 발급] · ! 툴팁 · 접기 ──
   🔴 안내문을 아래 문단으로 늘어놓지 않는다. 발급처는 입력칸 «옆»에,
      설명은 ! 툴팁에 넣어 화면이 세로로 길어지지 않게 한다. */

/* 입력칸 + 오른쪽 링크. 🔴 폭을 px 로 고정하지 않는다(모바일에서 넘친다) */
.field-with-action {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* 🔴 입력칸을 조금 줄인다 — 키는 길어도 끝까지 볼 일이 없고,
   옆에 링크가 앉을 자리를 내준다. */
.field-with-action .field-input {
  flex: 1;
  min-width: 0;        /* flex 자식이 내용 때문에 안 줄어드는 것을 막는다 */
}

.field-issue {
  flex: none;
  font-size: var(--font-xs);
  color: var(--brand-600);
  white-space: nowrap;
  text-decoration: none;
}

.field-issue:hover { text-decoration: underline; }

/* ! 툴팁 — 브라우저 기본 title 을 쓴다(JS 툴팁 없음) */
.field-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  border-radius: var(--radius-full);
  background: var(--ink-200);
  color: var(--ink-700);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
}

.field-tip:hover,
.field-tip:focus-visible {
  background: var(--brand-600);
  color: #fff;
  outline: none;
}

/* 추가 API Key — 접기 */
.api-fold {
  margin-top: var(--spacing-sm);
  padding: 0 var(--spacing-md);
  background: var(--ink-50);
  border-radius: var(--radius-md);
  border: 1px dashed var(--ink-300);
}

.api-fold-summary {
  padding: 10px 0;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.api-fold-summary::-webkit-details-marker { display: none; }

/* 🔴 펼침 표시를 직접 그린다 — list-style 을 지웠으므로 안 넣으면
   «눌러서 펼치는 것»인지 알 수 없다. */
.api-fold-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: var(--spacing-xs);
  transition: transform var(--transition-fast);
}

.api-fold[open] > .api-fold-summary::before { transform: rotate(90deg); }

.api-fold-count {
  margin-left: var(--spacing-xs);
  font-weight: 500;
  color: var(--ink-500);
}

/* 검색광고처럼 «묶음»으로 보여야 하는 블록 */
.api-group {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--ink-50);
  border-radius: var(--radius-md);
  border: 1px dashed var(--ink-300);
}

.api-group-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.api-group-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* 좁아지면 상태문구가 아래로 내려간다 */
  gap: var(--spacing-sm);
  padding-top: 10px;
}

.api-group-actions .api-note { padding: 0; }

/* ========================================
   등급 배지
   ======================================== */
.role-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 600;
}

.role-badge.supplier {
  background: rgba(63, 143, 107, 0.12);
  color: var(--success-color);
}

.role-badge.admin {
  background: var(--ink-900);
  color: var(--text-inverse);
}

.role-badge.general {
  background: var(--gray-100);
  color: var(--text-secondary);
}

/* ========================================
   모바일 대응
   ======================================== */
@media (max-width: 480px) {
  .pin-change-row {
    flex-direction: column;
    gap: 8px;
  }

  /* 🔴 세로로 쌓지 않는다. 라벨이 `min-width:100px` 이고 값이 오른쪽 끝에 붙던
     시절엔 좁은 폭에서 값이 눌려 세로가 유일한 답이었다. 이제 라벨은 제 글자만큼만
     차지하고 값이 그 옆에 붙으므로 **한 줄로 충분하다** — 세로로 쌓으면 항목 수만큼
     화면이 두 배로 길어진다(실측: 4항목이 8줄이 됐다). */
  .field-value {
    justify-content: flex-start;
  }

  .field-value-full {
    width: 100%;
  }

  /* 🔴 좁은 폭에선 입력칸이 우선이다 — 링크를 아래로 내리지 않고 옆에 두되,
     입력칸이 먼저 줄어들게 한다(min-width:0 이 이미 걸려 있다).
     링크는 짧은 말이라 한 줄을 안 넘긴다. */
  .field-with-action {
    gap: var(--spacing-xs);
  }

  .field-issue {
    font-size: 11px;
  }

  #nicknameInput {
    max-width: 100%;
  }

  /* 결제코드처럼 값이 긴 줄은 세로로 — 가로로 두면 코드가 잘린다 */
  .mypage-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .mypage-row-actions {
    justify-content: flex-end;
  }

  /* 진열 통로만은 가로를 유지한다 — 화살표가 제목 아래로 내려가면 링크로 안 읽힌다 */
  .mypage-row-link {
    flex-direction: row;
    align-items: center;
  }
}

/* ========================================
   인증 방법 카드 (구글 + ESM ID 통합)
   ======================================== */
.auth-method-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-200);
  gap: 12px;
}

.auth-method-row:last-child {
  border-bottom: none;
}

.auth-method-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.auth-method-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gray-100);
  font-weight: 700;
  font-size: 0.85em;
  color: var(--text-primary);
}

.auth-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

/* 구글 브랜드 블루 — 남의 브랜드색이라 우리 팔레트로 바꾸지 않는다 (유일한 예외) */
.auth-icon-google { color: #4285F4; }
.auth-icon-esm { font-size: 0.7em; }

.auth-method-text {
  flex: 1;
  min-width: 0;
}

.auth-method-title {
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.auth-method-detail {
  font-size: 0.85em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-method-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.auth-status-badge {
  font-size: 0.78em;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--text-muted);
}

.auth-status-badge.connected {
  background: rgba(63, 143, 107, 0.12);
  color: var(--success-color);
}

.esm-register-form {
  padding: 12px 0 4px;
  border-top: 1px dashed var(--gray-200);
  margin-top: 4px;
}

.esm-register-form .esm-input-group {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.esm-register-form .esm-input-group input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}

/* ESM 등록 폼 (ESM ID + PIN + 등록 버튼 가로 배치) */
.esm-register-fields {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
}
.esm-register-fields input[type="text"] {
  flex: 2;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}
.esm-register-fields input[type="password"] {
  flex: 1;
  min-width: 80px;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  text-align: center;
  letter-spacing: 0.4em;
}
.esm-register-fields .btn {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .esm-register-fields {
    flex-wrap: wrap;
  }
  .esm-register-fields input[type="text"] {
    flex: 1 0 100%;
  }
}

.upgrade-status {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 0.85em;
}
.upgrade-status.success {
  background: rgba(63, 143, 107, 0.12);
  color: var(--success-color);
}
.upgrade-status.error {
  background: rgba(194, 69, 60, 0.12);
  color: var(--error-color);
}

@media (max-width: 768px) {
  .auth-method-row {
    flex-direction: column;
    align-items: stretch;
  }
  .auth-method-actions {
    justify-content: flex-end;
  }
}