/* oodot 계정 — 화면 껍데기.
   색·글자·부품은 전부 디자인 시스템에서 온다. 여기 있는 것은 배치뿐이다. */

/* [hidden] 은 반드시 이긴다 — 부품 쪽 display 에 덮여 화면에 남는 일이 있었다. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--od-bg-canvas);
  color: var(--od-text);
  min-height: 100dvh;
}

/* ── 로그인·가입·연결 — 문서 페이지(흰 바탕 + 공용 상단바·바닥) ─────────────
   회색 바탕은 로그인한 뒤의 앱 화면(내 계정·관리)만 쓴다. */
body.doc { background: var(--od-bg-page); display: flex; flex-direction: column; }
body.doc .auth { flex: 1; min-height: 0; padding: 0; justify-items: stretch; }
body.doc .auth__box { justify-self: center; max-width: calc(380px + var(--od-gutter) * 2); padding: clamp(2.5rem, 1rem + 6vh, 5rem) var(--od-gutter); box-sizing: border-box; }
body.doc .auth__head { text-align: left; }
body.doc .auth__title { font-size: var(--od-size-title-1); line-height: var(--od-leading-title-1); letter-spacing: var(--od-tracking-title-1); font-weight: var(--od-weight-bold); }
body.doc .auth__alt, body.doc .auth__legal { text-align: left; }

/* ── 로그인·가입처럼 가운데 한 장 ──────────────────────────────────────── */
.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  padding: var(--od-space-6) var(--od-space-5);
  box-sizing: border-box;
}
.auth__box {
  width: 100%;
  max-width: 380px;
  align-self: center;
  padding: var(--od-space-10) 0;
}
/* 로고와 제목은 가운데, 칸과 글은 왼쪽 — 눈이 위에서 한 번 멈추고 칸을 따라 내려간다 */
.auth__head { text-align: center; margin-bottom: var(--od-space-8); }
.auth__mark {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-bottom: var(--od-space-5);
}
.auth__mark img { display: block; width: 100%; height: 100%; }
.auth__title { margin: 0; }
.auth__sub { margin: var(--od-space-2) 0 0; word-break: keep-all; overflow-wrap: anywhere; }

.auth__fields { display: grid; gap: var(--od-space-5); }
/* 로그인 상태 유지 — 비밀번호 칸 바로 아래. 체크 칸 둘레로 누르는 범위는 부품이 44px 로 넓혀 둔다 */
.auth__keep { margin-top: calc(var(--od-space-1) * -1); }

/* '비밀번호' 이름표 오른쪽 끝에 '비밀번호 찾기' — 막힌 자리에서 바로 찾게 */
.auth__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--od-space-3);
}
.auth__inline-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--od-size-footnote);
  cursor: pointer;
  position: relative;
}
/* 글자는 작아도 누르는 자리는 44 — 보이는 크기는 그대로 두고 히트영역만 넓힌다 */
.auth__inline-link::before {
  content: "";
  position: absolute;
  inset: 50% -8px auto;
  height: 44px;
  transform: translateY(-50%);
}
.auth__inline-link:disabled { color: var(--od-text-tertiary); cursor: default; text-decoration: none; }

/* 비밀번호 칸·규칙 목록은 디자인 시스템 .od-password · .od-rules (2026-10-07 옮김) */

.auth__actions { margin-top: var(--od-space-6); }
.auth__actions .od-btn { width: 100%; }
/* 허용·취소처럼 두 개 — 위아래로 쌓는다 */
.auth__actions--pair { display: grid; gap: var(--od-space-3); }

/* 다른 화면으로 가는 한 줄 — '처음이신가요? 계정 만들기' */
.auth__alt {
  margin: var(--od-space-8) 0 0;
  text-align: center;
  font-size: var(--od-size-subhead);
  color: var(--od-text-secondary);
}
.auth__alt .od-link, .auth__alt .auth__inline-link { font-size: var(--od-size-subhead); }
.auth__err-link { font-weight: var(--od-weight-semibold); }
/* 가입 = 약관 동의 — 누르는 버튼 바로 아래에 한 줄 */
.auth__legal {
  margin: var(--od-space-3) 0 0;
  font-size: var(--od-size-caption);
  line-height: var(--od-leading-caption);
  color: var(--od-text-tertiary);
  text-align: center;
  word-break: keep-all;
}
.auth__legal .od-link { color: var(--od-text-secondary); text-decoration: underline; text-underline-offset: 2px; }

.auth__foot {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--od-space-2) var(--od-space-4);
  justify-content: center;
  padding-top: var(--od-space-8);
  font-size: var(--od-size-caption);
}
.auth__foot a { color: var(--od-text-tertiary); text-decoration: none; }
.auth__foot a:hover { color: var(--od-text-secondary); text-decoration: underline; text-underline-offset: 3px; }

/* 소셜 로그인 — '또는' 으로 이메일과 나눈다. 버튼은 흰 버튼, 색은 로고에만 */
/* '또는' 구분선은 디자인 시스템 .od-or */
.auth__social-list { display: grid; gap: var(--od-space-2); }
.auth__social-list .od-btn { width: 100%; gap: var(--od-space-2); text-decoration: none; }
.auth__social-list .od-btn svg, .social-icon svg { display: block; flex: none; }
.auth__social .od-error:not(:empty) { margin-top: var(--od-space-3); }
.social-icon { display: inline-flex; vertical-align: -3px; margin-right: var(--od-space-2); }

/* 여섯 자리 코드 */
.code-input {
  font-family: var(--od-font-mono);
  font-size: var(--od-size-title-3);
  letter-spacing: 8px;
  /* 자간은 글자 뒤에 붙어서 마지막 숫자 뒤에도 8px 이 남는다 — 앞에도 같은 만큼 두어야 가운데에 온다 */
  text-indent: 8px;
  text-align: center;
}

/* ── 로그인한 뒤의 화면(내 계정·관리) ──────────────────────────────────── */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--od-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--od-space-3);
  height: 56px;
  padding: 0 var(--od-space-5);
  border-bottom: 1px solid var(--od-border);
  /* 반투명 흐림 상단바는 Apple 수치 그대로라 뺐다 — 불투명 흰 면 + 선 하나 */
  background: var(--od-bg);
}
.topbar__mark { display: flex; width: 22px; height: 22px; }
.topbar__mark img { width: 100%; height: 100%; }
.topbar__name {
  font-size: var(--od-size-subhead);
  font-weight: var(--od-weight-semibold);
  letter-spacing: -0.02em;
}
.topbar__spacer { flex: 1; }
/* 누가 로그인해 있나 — 넓은 화면에서만. 좁은 화면은 개요 머리가 같은 말을 한다 */
.topbar__me {
  display: inline-flex;
  align-items: center;
  gap: var(--od-space-2);
  padding-right: var(--od-space-2);
  font-size: var(--od-size-subhead);
  color: var(--od-text-secondary);
}
.topbar__me .od-avatar { width: 26px; height: 26px; font-size: var(--od-size-caption); }
.topbar__me-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899px) { .topbar__me { display: none; } }

.page {
  flex: 1;
  width: 100%;
  max-width: var(--od-container-sm);
  margin: 0 auto;
  padding: var(--od-space-10) var(--od-space-5) var(--od-space-20);
  box-sizing: border-box;
}
.section { margin-top: var(--od-space-10); }
.section__head {
  display: flex;
  align-items: baseline;
  gap: var(--od-space-3);
  margin-bottom: var(--od-space-4);
}
.section__head h2 { margin: 0; }
.section__head .push { margin-left: auto; }
.section__count { font-size: var(--od-size-subhead); color: var(--od-text-tertiary); font-variant-numeric: tabular-nums; }
.section__head p { margin: 0; }

/* 한 줄에 '무엇' 과 '바꾸기' */
.field-row {
  display: flex;
  align-items: center;
  gap: var(--od-space-4);
  padding: var(--od-space-4) var(--od-space-5);
}
.field-row + .field-row { border-top: 1px solid var(--od-border-subtle); }
#adminTools > .field-row, #socialRows > .field-row { border-top: 1px solid var(--od-border-subtle); }
.field-row__main { flex: 1; min-width: 0; }
.field-row__label {
  font-size: var(--od-size-caption);
  color: var(--od-text-tertiary);
}
.field-row__value {
  margin-top: 2px;
  font-size: var(--od-size-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  display: flex;
  align-items: center;
  gap: var(--od-space-4);
  padding: var(--od-space-4) var(--od-space-5);
}
.item + .item { border-top: 1px solid var(--od-border-subtle); }
.item__main { flex: 1; min-width: 0; }
.item__title { font-size: var(--od-size-body); }
.item__desc {
  margin-top: 2px;
  font-size: var(--od-size-caption);
  color: var(--od-text-tertiary);
  word-break: keep-all; overflow-wrap: anywhere; /* 한글이 낱말 가운데서 끊기지 않게 — 긴 이메일은 아무 데서나 */
}

.danger-zone { margin-top: var(--od-space-16); }

@media (max-width: 600px) {
  .page { padding-top: var(--od-space-8); }
  .field-row, .item { padding-left: var(--od-space-4); padding-right: var(--od-space-4); }
}

/* ── 내 계정 ────────────────────────────────────────────────────────────────
   좁은 화면: 상단바 + 구역을 모두 한 줄로 쌓는다.
   넓은 화면(900 이상): 왼쪽 판(로고·나·메뉴) + 오른쪽에 같은 구역들을 한 페이지로.
   ★ 오른쪽 카드는 폭을 고정한다(--acct-w). 화면이 넓다고 정보까지 늘리면 휴대폰 화면을
     잡아 늘린 것처럼 된다(2026-09-25 지적). 넓은 화면의 남는 자리는 왼쪽 판과 여백이 갖는다. */
.acct { flex: 1; width: 100%; box-sizing: border-box; }
.acct__main { min-width: 0; padding: var(--od-space-8) var(--od-space-5) var(--od-space-20); }
.side { display: none; }

.pane { scroll-margin-top: 72px; }
/* 구역 사이 간격은 .cols 의 gap 이 맡는다 */
.cols { display: flex; flex-direction: column; gap: var(--od-space-10); margin-top: var(--od-space-10); }
.cols .pane--danger { margin-top: var(--od-space-6); }
.pane__head {
  display: flex;
  align-items: baseline;
  gap: var(--od-space-3);
  margin-bottom: var(--od-space-3);
}
.pane__head .push { margin-left: auto; }
.pane__title {
  margin: 0;
  font-size: var(--od-size-headline);
  line-height: var(--od-leading-title-3);
  font-weight: var(--od-weight-semibold);
}
.pane .section { margin-top: var(--od-space-5); }
.pane__head + .section { margin-top: 0; }
.section__title {
  margin: 0;
  font-size: var(--od-size-footnote);
  font-weight: var(--od-weight-semibold);
  color: var(--od-text-secondary);
}
.section .section__head { margin-bottom: var(--od-space-2); }
.section__note { margin-top: var(--od-space-2); }

/* 누구 — 좁은 화면의 머리 */
.who { display: flex; align-items: center; gap: var(--od-space-4); }
.who__avatar.od-avatar {
  width: 56px;
  height: 56px;
  background: var(--od-gray-900);
  color: var(--od-text-on-accent);
  font-size: var(--od-size-title-3);
  font-weight: var(--od-weight-semibold);
}
.who__main { min-width: 0; }
.who__name {
  margin: 0;
  font-size: var(--od-size-title-2);
  line-height: var(--od-leading-title-2);
  letter-spacing: var(--od-tracking-title-2);
  font-weight: var(--od-weight-semibold);
  overflow-wrap: anywhere;
}
.who__meta { margin: 2px 0 0; font-size: var(--od-size-subhead); color: var(--od-text-secondary); overflow-wrap: anywhere; }
.who__dot { margin: 0 6px; color: var(--od-text-tertiary); }

/* 프로필 사진 — 아바타 안에 사진이 들어가면 꽉 채워 자른다 */
.od-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.od-avatar:has(img) { background: var(--od-bg-sunken); }
.photo-avatar.od-avatar {
  width: 40px;
  height: 40px;
  margin-top: var(--od-space-1);
  font-size: var(--od-size-subhead);
  font-weight: var(--od-weight-semibold);
}
.photo-avatar[data-busy="true"] { opacity: .5; }

@media (min-width: 900px) {
  /* 상단바는 로그아웃만 남겨 오른쪽 위에 띄운다 — 로고·나는 왼쪽 판이 갖는다 */
  .shell--acct .topbar {
    position: absolute;
    top: var(--od-space-4);
    right: var(--od-space-5);
    height: auto;
    padding: 0;
    border: 0;
    background: none;
  }
  .shell--acct .topbar > :not(#logout) { display: none; }

  .acct {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    position: relative;
  }
  /* 왼쪽 판의 흰 면과 경계선은 페이지 바닥까지 — 판 자체는 화면에 붙어 움직이므로 면은 따로 그린다 */
  .acct::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 280px;
    border-right: 1px solid var(--od-border);
    background: var(--od-bg);
    box-sizing: border-box;
  }
  .acct__main { padding: var(--od-space-16) var(--od-space-10) var(--od-space-20); }
  .pane--who { display: none; }
  .pane { scroll-margin-top: var(--od-space-10); }
  /* 카드는 720 을 넘지 않는다 — 넓은 화면의 남는 자리는 왼쪽 판과 여백이 갖는다.
     560 으로 좁혀 보니 바깥 여백만 늘었고, 두 열은 쓰지 말라고 했다(2026-09-25). */
  .cols { margin: 0 auto; max-width: 720px; gap: var(--od-space-10); }

  .side {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100dvh;
    padding: var(--od-space-5) var(--od-space-4) var(--od-space-6);
    box-sizing: border-box;
    overflow-y: auto;
  }
  .side__brand {
    display: flex;
    align-items: center;
    gap: var(--od-space-3);
    height: 24px;
    padding: 0 var(--od-space-1);
    color: var(--od-text);
    text-decoration: none;
    font-size: var(--od-size-subhead);
    font-weight: var(--od-weight-semibold);
    letter-spacing: -0.02em;
  }
  .side__brand img { width: 22px; height: 22px; }

  /* 사진은 왼쪽 판에 두지 않는다(2026-09-26) — 이름·이메일만, 메뉴 글자와 같은 줄에 맞춘다 */
  .side__me { padding: var(--od-space-8) var(--od-space-3) var(--od-space-5); margin-bottom: var(--od-space-3); border-bottom: 1px solid var(--od-border); }
  .side__name { font-size: var(--od-size-title-3); font-weight: var(--od-weight-semibold); line-height: 1.3; overflow-wrap: anywhere; }
  .side__email { margin-top: var(--od-space-1); font-size: var(--od-size-footnote); color: var(--od-text-secondary); overflow-wrap: anywhere; }

  .side__item {
    display: flex;
    align-items: center;
    gap: var(--od-space-3);
    height: 40px;
    padding: 0 var(--od-space-3);
    border-radius: var(--od-radius-md);
    font-size: var(--od-size-subhead);
    color: var(--od-text-secondary);
    text-decoration: none;
  }
  .side__item svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .side__item:hover { background: var(--od-bg-hover); color: var(--od-text); }
  .side__item:focus-visible { outline: 2px solid var(--od-focus); outline-offset: -2px; }
  .side__item[aria-current] { background: var(--od-bg-selected); color: var(--od-text); font-weight: var(--od-weight-semibold); }
  .side__item--danger, .side__item--danger:hover, .side__item--danger[aria-current] { color: var(--od-text-danger); }
  .side__sep { height: 1px; margin: var(--od-space-3); background: var(--od-border); }
  .side__bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: var(--od-space-6); }
  .side__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--od-space-1) var(--od-space-3);
    margin-top: var(--od-space-3);
    padding: var(--od-space-4) var(--od-space-3) 0;
    border-top: 1px solid var(--od-border);
    font-size: var(--od-size-caption);
  }
  .side__foot a { color: var(--od-text-tertiary); text-decoration: none; }
  .side__foot a:hover { color: var(--od-text-secondary); text-decoration: underline; text-underline-offset: 3px; }
  .side__foot a.is-privacy { color: var(--od-text-secondary); font-weight: var(--od-weight-semibold); }

  /* 한 줄 = 이름표 칸 | 값 | 버튼. 휴대폰처럼 이름표 위·값 아래로 쌓지 않는다 */
  .acct .field-row { min-height: 56px; padding: var(--od-space-2) var(--od-space-5); box-sizing: border-box; }
  .acct .field-row__main { display: flex; align-items: center; gap: var(--od-space-4); }
  .acct .field-row__label {
    flex: none;
    width: 112px;
    font-size: var(--od-size-subhead);
    color: var(--od-text-secondary);
  }
  .acct .field-row__value { margin-top: 0; min-width: 0; font-size: var(--od-size-subhead); }
  .acct .photo-avatar.od-avatar { margin-top: 0; }
  .acct .field-row__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct .item { min-height: 56px; padding: var(--od-space-2) var(--od-space-5); box-sizing: border-box; }
  .acct .item__main { display: flex; align-items: baseline; gap: var(--od-space-3); }
  .acct .item__title { flex: none; max-width: 60%; font-size: var(--od-size-subhead); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct .item__desc { margin-top: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}


/* 되돌릴 수 없는 버튼 — 되돌릴 수 있는 이웃(권한·정지)과 모양도 자리도 떨어뜨린다.
   .od-text-danger 는 .od-btn 의 글자색에 진다(순서가 앞이라). 그래서 버튼 변수로 준다. */
.btn-destroy { --_fg: var(--od-text-danger); margin-left: var(--od-space-3); }
.btn-destroy:hover:not(:disabled) { --_bg: var(--od-danger-subtle); }