/* ============================================================
   Editorial Monochrome — Bookstable 디자인 시스템
   ------------------------------------------------------------
   액센트 컬러 없음. 면 분할은 여백과 1px 선으로만 한다.
   그림자 / 보더박스 / 라운드 코너를 쓰지 않는다.
   ============================================================ */

:root {
  /* ── 컬러 (모노크롬 전용) ── */
  --paper: #F3F3F2;   /* 배경 — 순백 금지, 아주 옅은 웜 그레이 */
  --ink: #111111;     /* 주요 텍스트 / 숫자 */
  --muted: #666666;   /* 보조 설명 — 본문에 쓸 수 있는 가장 밝은 회색 (4.5:1 확보) */
  --faint: #8A8A8A;   /* 각주 전용. 본문에 쓰지 말 것 */
  --rule: #DCDCDC;    /* 구분선 */
  --glyph: #E2E2E2;   /* 라인아트 아이콘. 장식 전용이라 대비 기준에서 제외 */
  --label: #555555;   /* 섹션 라벨 */

  /* ── 레이아웃 ── */
  --shell: 1040px;
  --gutter: 40px;
  --aside: 18%;

  /* ── 타이포그래피 ── */
  --font-display: 'Playfair Display', 'Bodoni Moda', Georgia, serif;
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================
   1. 골격 — 최대 폭 1040px, 중앙 정렬
   ============================================================ */

.ed-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 섹션: 좌측 라벨 컬럼(18%) + 우측 콘텐츠 컬럼(82%) */
.ed-section {
  display: grid;
  grid-template-columns: var(--aside) 1fr;
  column-gap: 48px;
  padding-top: 56px;
}

/* 섹션 간격은 100px 이상 — 여백이 곧 그룹 구분이다 */
.ed-section + .ed-section {
  margin-top: 100px;
}

.ed-section__aside {
  position: sticky;
  top: 40px;
  align-self: start;
}

.ed-section__body {
  min-width: 0; /* 그리드 자식이 콘텐츠 폭에 밀려 넘치는 것을 막는다 */
}

/* ── 섹션 구분선: 좌우 여백을 살짝 남기고 긋는다 ── */
.ed-divider {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0 12px;
}

/* ============================================================
   2. 타이포그래피
   ============================================================ */

/* 영문 대제목 — 하이컨트라스트 세리프, 대문자, 자간 넓게 */
.ed-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 7.2vw, 76px);
  line-height: 1.04;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.ed-display--sm {
  font-size: clamp(30px, 5vw, 48px);
}

/* 한글에는 대문자가 없다. 사용자가 입력한 한글 제목에는 이 수식자를 붙인다. */
.ed-display--ko {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* 섹션 라벨 — 영문 대문자 산세리프 */
.ed-label {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0;
}

/* 좌측 컬럼의 큰 라인아트 아이콘 — 외곽선만, 채움 없음 */
.ed-glyph {
  display: block;
  width: 88px;
  height: 88px;
  margin-top: 28px;
  fill: none;
  stroke: var(--glyph);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 리드 문장 */
.ed-lead {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin: 20px 0 0;
  max-width: 46em;
}

/* 각 섹션 마지막의 우측 정렬 각주 */
.ed-note {
  margin: 28px 0 0;
  text-align: right;
  font-size: 11px;
  line-height: 1.6;
  color: var(--faint);
}

/* 값·수치 (우측 정렬) */
.ed-figure {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ed-figure__unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 4px;
}

/* ============================================================
   3. 메뉴판 행 — 카드가 아니라 한 줄짜리 항목
   [항목명] [설명] ......................... [값 · 우측 정렬]
   ============================================================ */

.ed-rows {
  display: block;
}

.ed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name  value"
    "desc  value";
  column-gap: 40px;
  padding: 14px 0;            /* 행 사이 28px */
  align-items: start;
  text-decoration: none;
  color: inherit;
  position: relative;
}

/* 행 사이 얇은 선. 마지막 행 아래에는 긋지 않는다 */
.ed-row + .ed-row {
  border-top: 1px solid var(--rule);
}

a.ed-row,
.ed-row--clickable {
  cursor: pointer;
}

/* 상호작용 가능한 행은 배경이 아니라 좌측 표시선으로 알린다 */
a.ed-row:hover .ed-row__name,
.ed-row--clickable:hover .ed-row__name {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ed-row__name {
  grid-area: name;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
}

.ed-row__desc {
  grid-area: desc;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 4px 0 0;
  /* 설명은 2줄까지만 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ed-row__value {
  grid-area: value;
  align-self: center;
  text-align: right;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ed-row__value--sm {
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
}

/* 행 안의 부가 표시 (소장 / eBook / 노트 수). 색이 아니라 대문자 + 얇은 선으로 구분 */
.ed-mark {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 2px 8px;
  margin-right: 6px;
  white-space: nowrap;
}

.ed-mark--strong {
  color: var(--ink);
  border-color: var(--ink);
}

/* 행 왼쪽의 작은 표지 썸네일 */
.ed-row--media {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-areas:
    "cover name  value"
    "cover desc  value";
  column-gap: 20px;
}

.ed-row__cover {
  grid-area: cover;
  width: 48px;
  height: 68px;
  object-fit: cover;
  align-self: center;
  background: var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ed-row__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   4. 버튼 — 모노크롬, 대문자 라벨, 라운드 0~2px
   ============================================================ */

.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.ed-btn:hover { opacity: 0.82; }

.ed-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.ed-btn[disabled] { opacity: 0.4; cursor: default; }

.ed-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.ed-btn--quiet {
  background: transparent;
  color: var(--muted);
  border-color: var(--rule);
}

.ed-btn--quiet:hover { color: var(--ink); border-color: var(--ink); opacity: 1; }

.ed-btn--sm {
  padding: 8px 14px;
  font-size: 11px;
}

/* ============================================================
   5. 폼 컨트롤 — 박스가 아니라 밑줄

   화면마다 클래스가 다르다(.ed-field / .form-group / .form-styled /
   모달 안의 개별 규칙). 한 곳에 모아 두지 않으면 계속 어긋나므로
   여기가 유일한 출처다. 다른 파일에서는 폭·배치만 정하고 생김새는 건드리지 않는다.

   밑줄 색이 --rule(#DCDCDC)이 아니라 --muted(#666)인 이유:
   WCAG는 입력칸 같은 UI 요소에 3:1 이상의 명암비를 요구한다. #DCDCDC는
   배경과 1.15:1이라 저시력 사용자에게 칸이 어디 있는지 안 보인다.
   --rule은 장식용 구분선에만 쓴다.
   ============================================================ */

.ed-field,
.form-group { margin-bottom: 26px; }

.ed-field label,
.form-group label,
.form-styled label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ── 입력칸 공통 ── */
.ed-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-styled input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ed-field select,
.form-group select,
.form-styled select,
.ed-field textarea,
.form-group textarea,
.form-styled textarea,
.ed-input {
  width: 100%;
  padding: 11px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;   /* 16px 미만이면 iOS Safari가 칸을 누를 때 화면을 확대한다 */
  line-height: 1.5;
  color: var(--ink);
  outline: none;
  /* 밑줄을 border가 아니라 그림자로 그린다. 굵어져도 칸 높이가 안 변해
     글자가 1px 튀지 않는다. */
  box-shadow: inset 0 -1px 0 var(--muted);
  transition: box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

.ed-field input::placeholder,
.ed-field textarea::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder,
.form-styled input::placeholder,
.form-styled textarea::placeholder,
.ed-input::placeholder { color: var(--faint); }

/* 만질 수 있다는 걸 밑줄이 진해지며 알린다 */
.ed-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.form-styled input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.ed-field select:hover,
.form-group select:hover,
.form-styled select:hover,
.ed-field textarea:hover,
.form-group textarea:hover,
.form-styled textarea:hover,
.ed-input:hover { box-shadow: inset 0 -1px 0 var(--ink); }

.ed-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.form-styled input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.ed-field select:focus,
.form-group select:focus,
.form-styled select:focus,
.ed-field textarea:focus,
.form-group textarea:focus,
.form-styled textarea:focus,
.ed-input:focus { box-shadow: inset 0 -2px 0 var(--ink); }

.ed-field input:disabled,
.form-group input:disabled,
.form-styled input:disabled,
.ed-field select:disabled,
.form-group select:disabled,
.form-styled select:disabled {
  color: var(--faint);
  box-shadow: inset 0 -1px 0 var(--rule);
  cursor: default;
}

.ed-field textarea,
.form-group textarea,
.form-styled textarea {
  min-height: 92px;
  line-height: 1.8;
  font-size: 15px;
  resize: vertical;
}

/* ── 셀렉트 ──
   네이티브 화살표는 OS마다 생김새가 제각각이라 화면 톤을 깬다.
   지우고 같은 선 굵기의 얇은 화살표를 직접 그린다. */
.ed-field select,
.form-group select,
.form-styled select,
.ed-select {
  padding-right: 28px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 9 12 16 19 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 14px;
  text-overflow: ellipsis;
}

/* 셀렉트 안의 목록은 브라우저가 그리므로 배경색을 맞춰 준다 */
.ed-field select option,
.form-group select option,
.form-styled select option { background: var(--paper); color: var(--ink); }

/* ── 날짜칸 ──
   달력 아이콘이 기본값이면 파란 계열이라 모노크롬이 깨진다. 눌러야 뜨는
   버튼이므로 3:1을 지킬 만큼만 흐리게 한다. */
.ed-field input[type="date"],
.form-group input[type="date"],
.form-styled input[type="date"] { cursor: pointer; }

.ed-field input[type="date"]::-webkit-calendar-picker-indicator,
.form-group input[type="date"]::-webkit-calendar-picker-indicator,
.form-styled input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s;
  filter: grayscale(1);
}

.ed-field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.form-group input[type="date"]:hover::-webkit-calendar-picker-indicator,
.form-styled input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* 숫자칸의 위아래 화살표는 실수로 눌리기 쉽고 모양도 튄다. 감춘다. */
.ed-field input[type="number"],
.form-group input[type="number"],
.form-styled input[type="number"] { -moz-appearance: textfield; }

.ed-field input[type="number"]::-webkit-outer-spin-button,
.ed-field input[type="number"]::-webkit-inner-spin-button,
.form-group input[type="number"]::-webkit-outer-spin-button,
.form-group input[type="number"]::-webkit-inner-spin-button,
.form-styled input[type="number"]::-webkit-outer-spin-button,
.form-styled input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── 체크박스 ──
   네모 자체를 직접 그린다. accent-color만으로는 크기·테두리가 OS마다 달라진다. */
.form-check { display: flex; align-items: center; gap: 12px; }

.form-check input[type="checkbox"],
.ed-check {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid var(--muted);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}

.form-check input[type="checkbox"]:hover,
.ed-check:hover { border-color: var(--ink); }

.form-check input[type="checkbox"]:checked,
.ed-check:checked { background: var(--ink); border-color: var(--ink); }

/* 체크 표시는 흰 선 두 개로 직접 긋는다 */
.form-check input[type="checkbox"]:checked::after,
.ed-check:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--paper);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.form-check input[type="checkbox"]:focus-visible,
.ed-check:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.form-check label,
.form-styled .form-check label {
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}

/* ── 오류 ── */
.ed-error,
.form-error,
.field-error {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
  margin-top: 8px;
}

/* 색만으로 오류를 알리지 않는다 — 앞에 표식을 붙인다 */
.ed-error:not(:empty)::before,
.form-error:not(:empty)::before,
.field-error:not(:empty)::before { content: '※ '; }

/* 값이 틀린 칸은 밑줄을 굵게 해서 색 없이도 눈에 띈다 */
.ed-field input.input-error,
.form-group input.input-error,
.form-styled input.input-error { box-shadow: inset 0 -2px 0 var(--ink); }

/* ============================================================
   5-1. 인증 화면 (로그인 / 회원가입)
   카드 없이, 좁은 한 단으로 세운다.
   ============================================================ */

.ed-auth {
  max-width: 400px;
  margin: 0 auto;
  padding: 88px var(--gutter) 112px;
}

.ed-auth__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.ed-auth__sub {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin: 14px 0 48px;
}

.ed-auth__submit {
  width: 100%;
  margin-top: 12px;
}

.ed-auth__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.ed-auth__divider::before,
.ed-auth__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* 구글 버튼은 우리 색이 아니라 제공사 규정을 따른다 — 흰 바탕에 원색 로고 */
.ed-auth__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 24px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.ed-auth__google:hover { background: #F7F7F7; }

.ed-auth__footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--muted);
}

/* 링크는 색이 아니라 밑줄로 알린다 */
.ed-auth__footer a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 폼 전체에 걸린 오류 */
.ed-alert {
  border: 1px solid var(--ink);
  border-left-width: 4px;
  padding: 12px 16px;
  margin-bottom: 28px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}

/* 입력값이 틀린 칸은 밑줄을 두껍게 해서 색 없이도 눈에 띈다 */
.ed-field input.input-error,
.form-group input.input-error {
  border-bottom-width: 2px;
  padding-bottom: 9px;
}

/* 비밀번호 일치 여부 — 색 대신 표식으로 구분한다 */
.password-match { font-size: 12px; margin-top: 8px; color: var(--muted); }
.password-match.match { color: var(--ink); }
.password-match.match::before { content: '✓ '; font-weight: 700; }
.password-match.no-match { color: var(--ink); font-weight: 500; }
.password-match.no-match::before { content: '※ '; }

/* ============================================================
   6. 상태 표시
   ============================================================ */

.ed-empty {
  padding: 72px 0;
  text-align: center;
}

.ed-empty__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 10px;
}

.ed-empty p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 24px;
}

.ed-loading {
  padding: 56px 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   7. 반응형 — 768px 이하
   좌측 라벨 컬럼을 콘텐츠 위로 올리고,
   값은 항목명 아래 좌측 정렬로 바꾼다.
   ============================================================ */

@media (max-width: 768px) {
  :root { --gutter: 20px; }

  .ed-section {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding-top: 40px;
  }

  .ed-section + .ed-section { margin-top: 72px; }

  .ed-section__aside {
    position: static;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
  }

  .ed-glyph { width: 40px; height: 40px; margin-top: 0; }

  .ed-label { font-size: 20px; }

  .ed-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "desc"
      "value";
    column-gap: 0;
    padding: 18px 0;
  }

  .ed-row--media {
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "cover name"
      "cover desc"
      "value value";
    column-gap: 16px;
  }

  .ed-row__name { font-size: 19px; }

  .ed-row__value {
    text-align: left;
    align-self: start;
    font-size: 24px;
    margin-top: 10px;
  }

  .ed-row__value--sm { font-size: 13px; margin-top: 8px; }

  .ed-note { text-align: left; }
}