/* =========================================================
   계정 화면 (Views/Account/*.cshtml)

   로그인, 회원가입, 아이디 찾기, 비밀번호 재설정, 그리고 결과 안내 화면들이
   같은 껍데기를 씁니다. 17개 화면이 각자 다르게 생기면 안 되는 자리입니다.

   배치만 둡니다. 색·반경·서체·컴포넌트 모양은 components.css 의 몫입니다.
   ========================================================= */

.page-account {
  display: flex;
  justify-content: center;
  padding: var(--pd-space-12) var(--pd-space-4) var(--pd-space-20);
}

/* 카드 폭. 안내 화면은 좁게, 회원가입은 두 단이라 넓게 쓴다. */
.page-account__card {
  width: 100%;
  max-width: 460px;
  padding: var(--pd-space-8);
}
/* 회원가입. 두 단이던 동안 900px 이었습니다. 한 단(라벨 148 + 입력 420)이
   되어 그만큼 필요하지 않습니다 — 넓게 두면 약관 상자와 가입 단추만 늘어납니다. */
.page-account__card--wide { max-width: 720px; }

/* 머리: 뒤로가기, 아이콘, 제목, 설명 */
.page-account__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-space-3);
  text-align: center;
  margin-bottom: var(--pd-space-6);
}
.page-account__head--start { align-items: flex-start; text-align: start; }
.page-account__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pd-surface-muted);
  color: var(--pd-text-muted);
}
.page-account__icon .pd-icon { width: var(--pd-icon-lg); height: var(--pd-icon-lg); }
.page-account__icon[data-tone="accent"] { background: var(--pd-accent-subtle); color: var(--pd-accent-on-subtle); }
.page-account__icon[data-tone="success"] { background: var(--pd-success-subtle); color: var(--pd-success-on-subtle); }
.page-account__icon[data-tone="danger"] { background: var(--pd-danger-subtle); color: var(--pd-danger-on-subtle); }
.page-account__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--pd-text-secondary);
  word-break: keep-all;
}
.page-account__desc strong { color: var(--pd-text); font-weight: var(--pd-weight-semibold); }

/*
   뒤로가기는 제목의 첫 글자와 같은 x 에 선다.

   ghost 단추라 배경이 보이지 않을 뿐, 좌우 여백(12px)은 그대로 있습니다. 그래서
   그냥 볼 때는 화살표가 제목보다 12px 안으로 들어가 어긋나 보였습니다. 여백을
   지우는 대신 그만큼 **왼쪽으로 빼냅니다** — 누를 자리와 hover 배경은 지금 크기를
   지키면서 글자만 제자리에 섭니다.
*/
.page-account__back {
  align-self: flex-start;
  margin-inline-start: calc(var(--pd-space-3) * -1);
  /* 제목과 붙어 있던 것을 띄웁니다(줄 간격 12 + 8 = 20px). */
  margin-bottom: var(--pd-space-2);
}

.page-account__body { display: flex; flex-direction: column; gap: var(--pd-space-5); }

/* 발끝: 버튼은 카드 폭을 채운다. 계정 화면은 할 일이 하나뿐이다. */
.page-account__foot {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-2);
  margin-top: var(--pd-space-6);
}

/* ---------------------------------------------------------
   로그인 — 한 줄로 세운 화면 (카드 없음)

   좌우 두 단에 880px 흰 카드였습니다. 왼쪽 절반이 로고와 한 줄뿐이라 늘 비어
   보였고, 카드는 여러 덩어리가 놓인 화면에서 "여기까지가 한 덩어리"라고 알리는
   장치인데 이 화면에는 덩어리가 하나뿐이었습니다. 둘 다 걷었습니다.
   --------------------------------------------------------- */

/*
   헤더와 푸터 사이 세로 가운데에 둡니다.

   main 은 .wrap(min-height: 100dvh)의 남는 높이를 모두 받습니다(flex: 1 0 auto).
   그 main 을 flex 로 두고 칸에 `margin-block: auto` 를 주면 가운데에 섭니다.

   align-items: center 를 쓰지 않은 이유 — 화면이 칸보다 낮으면 flex 의 가운데
   정렬은 위로 넘친 부분을 스크롤로 볼 수 없게 만듭니다. auto 여백은 넘칠 때
   저절로 0 이 되어 그런 일이 없습니다.
*/
main:has(> .page-account--login) { display: flex; }
.page-account--login {
  flex: 1 1 auto;
  /* 가운데 정렬이므로 위아래 여백을 같게 둡니다(원래는 48 / 80). */
  padding-block: var(--pd-space-10);
}
.page-account--login > .page-account__panel { margin-block: auto; }

.page-account__panel {
  width: 100%;
  /* 입력칸 하나가 편히 읽히는 폭. 이보다 넓으면 글자가 가운데에서 흩어집니다. */
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-6);
}

/* 이 화면만 폼 간격을 좁힙니다. .page-account__body 는 아이디 찾기·비밀번호
   재설정 등 8개 화면이 함께 쓰는 이름이라 전역으로 좁힐 수 없습니다. */
.page-account--login .page-account__body { gap: var(--pd-space-3); }

/* 선 사이에 글자를 놓는 구분선. 위는 아이디/비밀번호로 들어가는 길,
   아래는 다른 계정으로 들어가는 길이라 둘을 갈라 둡니다. */
.page-account__or {
  display: flex;
  align-items: center;
  gap: var(--pd-space-3);
  font-size: 12px;
  color: var(--pd-text-muted);
}
.page-account__or::before,
.page-account__or::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background-color: var(--pd-border);
}
/* 구분선과 그 아래 로고 셋은 한 덩어리입니다. 칸의 기본 간격(24px)을 그만큼
   당겨 12px 로 붙여, 선이 아래를 가리키는 것으로 읽히게 합니다. */
.page-account__or { margin-bottom: calc(var(--pd-space-3) * -1); }

/* 가입 안내. 로그인과 같은 무게로 보이지 않게 글자 링크로 둡니다. */
.page-account__signup {
  text-align: center;
  font-size: 14px;
  color: var(--pd-text-secondary);
}
.page-account__signup a {
  margin-inline-start: var(--pd-space-1);
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-accent-on-subtle);
  text-decoration: underline;
}

.page-account__welcome {
  font-size: 15px;
  font-weight: var(--pd-weight-medium);
  color: var(--pd-text-secondary);
}

.page-account__brand { text-align: center; }
/* 로고는 300x193 이라 폭으로 재는 편이 맞습니다(높이로 재면 폭이 딸려옵니다).
   옛 판이 154px 였는데, 그건 좌우 두 단에서 왼쪽 절반을 혼자 채울 때의 크기입니다.
   세로 한 줄이 되어 440px 칸의 머리로 앉으니 그만큼 클 이유가 없습니다 — 110px. */
.page-account__brand img { width: 110px; height: auto; margin: 0 auto var(--pd-space-4); }
.page-account__brand p { font-size: 14px; color: var(--pd-text-secondary); }

/* 로그인 보조 줄: 자동 로그인과 찾기 링크 */
.page-account__aux {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-space-3);
  flex-wrap: wrap;
  font-size: 13px;
}
.page-account__aux-links { display: flex; gap: var(--pd-space-4); }
.page-account__aux-links a { color: var(--pd-text-muted); text-decoration: underline; }
.page-account__aux-links a:hover { color: var(--pd-text); }

/* 외부 로그인 버튼의 모양은 providers.css 에 있습니다. 홈 첫 화면도 같은
   버튼을 쓰기 때문에 한쪽 페이지 CSS 에 둘 수 없습니다. 로그인 화면은 그 위에
   .page-account__or 구분선만 얹습니다. */

/* ---------------------------------------------------------
   회원가입 — 한 단, 라벨은 입력 왼쪽

   한동안 두 단(필수 | 선택)이었습니다. 왼쪽을 채우다 오른쪽으로 눈이
   건너가야 해서 어디까지 했는지 놓치기 쉬웠고, 필수와 선택이 같은 무게로
   보였습니다. 선택은 아래로 내렸습니다.

   ── 디자인 시스템과 어긋나는 점 ──────────────────────────
   components.css 는 "레이블은 항상 입력 위에 둔다"고 적어 두었습니다. 짧은
   폼에서는 그게 맞습니다 — 눈이 위에서 아래로만 움직입니다. 그런데 이 화면은
   칸이 14개인 **입력 작업**이라, 라벨이 위에 있으면 한 줄이 89px(라벨 21 +
   여백 8 + 입력 40 + 줄간격 20)이 되어 화면 두 장을 넘깁니다. 왼쪽에 두면
   56px 입니다.

   그래서 시스템에 변형을 추가하지 않고 **이 화면 안에서만** 눕힙니다.
   다른 화면이 따라 하려면 그때 시스템에 올릴지 정하면 됩니다.
   --------------------------------------------------------- */

.page-account__groups {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-8);
}

/* 줄 사이는 12px. 라벨이 옆으로 갔으니 줄과 줄을 가르는 것은 여백뿐이라,
   너무 좁히면 어느 라벨이 어느 입력의 것인지 흐려집니다. */
.page-account__group { display: flex; flex-direction: column; gap: var(--pd-space-3); }

/*
   선은 제목 아래가 아니라 **묶음 사이**에 둡니다.

   두 단이던 동안에는 제목 아래 선이 각 단의 머리처럼 읽혔습니다. 한 단이 되니
   같은 선이 제목과 첫 칸 사이를 갈라, 제목이 위 묶음에 딸린 것처럼 보였습니다.
   묶음이 위아래로 놓이면 갈라야 하는 자리는 묶음과 묶음 사이입니다.
*/
.page-account__group-title {
  font-size: 15px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
  /* 제목과 첫 칸 사이는 칸끼리(12px)보다 넓어야 묶음의 머리로 읽힙니다. */
  margin-bottom: var(--pd-space-2);
}

.page-account__group + .page-account__group {
  padding-top: var(--pd-space-8);
  border-top: 1px solid var(--pd-border);
}
/* 묶음 제목 바로 아래 붙는 한 줄. 제목과 한 덩어리로 보이게 위 여백을 당깁니다. */
.page-account__group-desc {
  margin-top: calc(var(--pd-space-2) * -1);
  font-size: 13px;
  color: var(--pd-text-muted);
}

/* 라벨을 왼쪽 칸에, 나머지(입력 · 안내 · 오류)를 오른쪽 칸에 둡니다.
   라벨은 첫 줄에 못박고 세로 가운데 정렬해서, 아래에 안내문이 붙어도
   입력칸과 눈높이가 맞습니다. */
.page-account__group .pd-field {
  display: grid;
  grid-template-columns: 148px minmax(0, 420px);
  column-gap: var(--pd-space-4);
  row-gap: var(--pd-space-1);
  align-items: start;
}
.page-account__group .pd-field > .pd-field__label {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  /* 라벨이 길어 두 줄이 되면 입력칸을 밀지 않고 그 안에서 접힙니다. */
  word-break: keep-all;
}
.page-account__group .pd-field > *:not(.pd-field__label) { grid-column: 2; }

/* 필수 표시. 라벨 뒤에 별표를 붙인다. */
.page-account__required::after {
  content: "*";
  color: var(--pd-danger);
  margin-inline-start: 2px;
}

/* 사업자등록번호처럼 칸을 나눠 받는 입력 */
.page-account__parts { display: flex; align-items: center; gap: var(--pd-space-2); }
.page-account__parts .pd-input { text-align: center; }
.page-account__parts-sep { color: var(--pd-text-placeholder); }
input.page-account__part--3 { width: 84px; }
input.page-account__part--2 { width: 68px; }
input.page-account__part--5 { width: 110px; }

/* 주소 줄과 파일 선택 줄. 내정보 화면과 같은 모양이다. */
.page-account__row { display: flex; gap: var(--pd-space-2); align-items: center; flex-wrap: wrap; }
.page-account__row .pd-input { flex: 1 1 200px; min-width: 0; }
.page-account__row .pd-btn { flex: 0 0 auto; }

/* 약관 동의 */
.page-account__agreements {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
  padding: var(--pd-space-4);
  background: var(--pd-surface-sunken);
  border-radius: var(--pd-radius-md);
}
.page-account__note {
  font-size: 12px;
  color: var(--pd-text-muted);
  text-align: center;
  margin-top: var(--pd-space-3);
}

@media (max-width: 768px) {
  .page-account { padding: var(--pd-space-6) var(--pd-space-4) var(--pd-space-12); }
  .page-account__card { padding: var(--pd-space-6); }
  /* 로고는 옛 판과 같게 한 급 작게. */
  .page-account__brand img { width: 80px; margin-bottom: var(--pd-space-4); }

  /* 라벨을 다시 위로 올립니다. 148px 를 라벨에 내주면 남는 폭으로는
     이메일 주소가 다 보이지 않습니다. */
  .page-account__group .pd-field {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--pd-space-2);
  }
  .page-account__group .pd-field > .pd-field__label { grid-column: 1; align-self: start; }
  .page-account__group .pd-field > *:not(.pd-field__label) { grid-column: 1; }
}