/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.tiptap-editor__input {
  display: none;
}

.tiptap-editor {
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

.tiptap-editor:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgb(219 234 254);
}

/* 검증에 실패한 본문 — 숨은 textarea에 서버가 aria-invalid를 붙인다
   (config/initializers/form_field_errors.rb). 이 파일은 Tailwind 레이어 밖이라
   tailwind/application.css에 두면 위 .tiptap-editor 규칙에 진다. 포커스가 와도 유지한다. */
.admin-main .tiptap-editor:has(> textarea[aria-invalid="true"]),
.admin-main .tiptap-editor:has(> textarea[aria-invalid="true"]):focus-within {
  border-color: var(--color-admin-danger);
}

.site-body .tiptap-editor:has(> textarea[aria-invalid="true"]),
.site-body .tiptap-editor:has(> textarea[aria-invalid="true"]):focus-within {
  border-color: var(--color-site-danger);
}

.tiptap-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.25rem 0.375rem;
}

.tiptap-editor__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: #475569;
  padding: 0.25rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

/* 아이콘 버튼(링크·정렬·색 등)은 글자 버튼과 같은 높이로 선다 — svg 16px + 위아래 여백. */
.tiptap-editor__button svg { display: block; }

.tiptap-editor__button.is-active {
  background: #dbeafe;
  color: #1d4ed8;
}

.tiptap-editor__button:hover {
  background: #f1f5f9;
  color: #475569;
}

.tiptap-editor__button.is-active:hover {
  background: #dbeafe;
  color: #1d4ed8;
}

.tiptap-editor__separator {
  width: 1px;
  height: 1rem;
  margin: 0 0.25rem;
  background: #e2e8f0;
}

.tiptap-editor__surface {
  position: relative;
  background: #fff;
}

.tiptap-editor__surface.is-dragging-image::after {
  position: absolute;
  inset: 0.5rem;
  display: grid;
  place-items: center;
  border: 2px dashed #3b82f6;
  border-radius: 0.375rem;
  background: rgb(239 246 255 / 0.92);
  color: #1d4ed8;
  font-size: 0.875rem;
  font-weight: 700;
  content: "이미지를 놓아 업로드";
  pointer-events: none;
  z-index: 10;
}

.tiptap-editor__content {
  box-sizing: border-box;
  min-height: 10rem;
  padding: 0.75rem;
  outline: none;
  color: #0f172a;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.tiptap-editor__content > :first-child {
  margin-top: 0;
}

.tiptap-editor__content > :last-child {
  margin-bottom: 0;
}

.tiptap-editor__upload {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-top: 1px solid #e2e8f0;
  padding: 0.5rem 0.75rem;
  color: #475569;
  font-size: 0.75rem;
}

.tiptap-editor__upload[hidden] {
  display: none;
}

.tiptap-editor__upload progress {
  width: 8rem;
  accent-color: #2563eb;
}

.tiptap-editor__upload.is-error {
  color: #b91c1c;
}

/* 지금 고른 것(이미지·표)에만 쓰는 버튼 묶음. 커서가 그 자리에 있을 때만 보인다. */
.tiptap-editor__node-controls {
  display: inline-flex;
  gap: 0.125rem;
  align-items: center;
  padding-left: 0.25rem;
  border-left: 1px solid #e2e8f0;
}

.tiptap-editor__node-controls[hidden] {
  display: none;
}

.tiptap-editor__node-controls-label {
  margin: 0 0.25rem;
  color: #64748b;
  font-size: 0.6875rem;
  font-weight: 700;
}

/* 고른 이미지의 사진 설명을 적는 칸. 버튼과 같은 높이로 툴바 한 줄에 들어간다. */
.tiptap-editor__node-input {
  width: 14rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  padding: 0.2rem 0.375rem;
  font-size: 0.75rem;
  line-height: 1.2;
  color: #334155;
  background: #fff;
}

.tiptap-editor__node-input:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px #dbeafe;
}

/* 가림 지점(hr[data-cut]) — 쓰는 동안 점선과 글자로 보인다. 실린 글에서는 서버가 이 자리에서
   본문을 가르므로 선 자체는 나가지 않는다. */
.tiptap-editor__content hr[data-cut] {
  position: relative;
  margin: 1.25em 0;
  border: 0;
  border-top: 2px dashed #A23B5C;
  overflow: visible;
}

.tiptap-editor__content hr[data-cut]::after {
  content: "여기까지 비로그인에게 보입니다 · 아래는 회원만";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 10px;
  border-radius: 100px;
  background: #F5E8EC;
  color: #72213D;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.tiptap-editor__content hr[data-cut].ProseMirror-selectednode {
  border-top-color: #1d4ed8;
}

/* 표의 칸을 여러 개 끌어 고른 표시. prosemirror-tables가 붙이는 클래스이고,
   쓰는 동안에만 있다 — 실린 글에는 나오지 않는다(서식은 .rich-text가 준다). */
.tiptap-editor__content .selectedCell {
  background: rgb(219 234 254 / 0.7);
}

.tiptap-image {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 0;
}

.tiptap-image[data-align="left"] { margin-right: auto; margin-left: 0; }
.tiptap-image[data-align="center"] { margin-right: auto; margin-left: auto; }
.tiptap-image[data-align="right"] { margin-right: 0; margin-left: auto; }

.tiptap-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* 쓰는 동안 보이는 사진 설명 — 실린 글의 figcaption과 같은 자리·같은 톤. */
.tiptap-image__caption { margin-top: 0.5rem; text-align: center; font-size: 0.8125rem; color: #8B8588; }
.tiptap-image__caption[hidden] { display: none; }

.tiptap-image.is-selected {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.tiptap-image__handle {
  position: absolute;
  display: none;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid #fff;
  border-radius: 9999px;
  background: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
}

.tiptap-image.is-selected .tiptap-image__handle { display: block; }
.tiptap-image__handle--nw { top: -0.375rem; left: -0.375rem; cursor: nwse-resize; }
.tiptap-image__handle--ne { top: -0.375rem; right: -0.375rem; cursor: nesw-resize; }
.tiptap-image__handle--sw { bottom: -0.375rem; left: -0.375rem; cursor: nesw-resize; }
.tiptap-image__handle--se { right: -0.375rem; bottom: -0.375rem; cursor: nwse-resize; }

/* 저장된 본문에서도 프리셋과 정렬을 그대로 재현한다. 사용자 지정 크기는 안전한
   HTML width 속성이 담당하며 max-width로 본문 밖 넘침을 막는다. */
/* 직접 맞춘 크기(width 속성)가 있으면 프리셋을 적용하지 않는다 — CSS width는
   HTML width 속성을 이기므로, 둘이 함께 붙으면 맞춰 둔 크기가 무시된다. */
img[data-size="small"]:not([width]) { width: 25%; }
img[data-size="medium"]:not([width]) { width: 50%; }
img[data-size="large"]:not([width]) { width: 75%; }
img[data-size="full"]:not([width]) { width: 100%; }
img[data-align="left"] { display: block; margin-right: auto; margin-left: 0; }
img[data-align="center"] { display: block; margin-right: auto; margin-left: auto; }
img[data-align="right"] { display: block; margin-right: 0; margin-left: auto; }

/* 설명이 붙은 사진은 figure가 크기·정렬을 갖는다(RichTextFigure) — 설명이 사진과 같은 폭에 선다. */
.rich-text__figure { display: block; margin: 0; }
.rich-text__figure[data-size="small"]:not([width]) { width: 25%; }
.rich-text__figure[data-size="medium"]:not([width]) { width: 50%; }
.rich-text__figure[data-size="large"]:not([width]) { width: 75%; }
.rich-text__figure[data-size="full"]:not([width]) { width: 100%; }
.rich-text__figure[data-align="left"] { margin-right: auto; margin-left: 0; }
.rich-text__figure[data-align="center"] { margin-right: auto; margin-left: auto; }
.rich-text__figure[data-align="right"] { margin-right: 0; margin-left: auto; }
.rich-text__figure > img { display: block; width: 100%; }
/* 후기의 접힌 본문(docs/review.md §4.1)은 사진을 본문 안에서 숨기고 아래 썸네일 줄로 보인다 — 위 사진
   규칙과 같은 층(레이어 밖)에 두어야 이긴다. 펼치면(is-clamped가 떨어지면) 제자리에 나온다. */
.site-review__text.is-clamped .rich-text__figure,
.site-review__text.is-clamped img { display: none; }
img[width] { height: auto; max-width: 100%; }

/* 사진 묶음(RichTextGallery · 2026-10-12) — 여러 장을 한꺼번에 넣고 고른 콜라주·슬라이드. 줄 나누기와
   비율(grid-template-columns · aspect-ratio · --gallery-ratio)은 서버가 사진 비율로 셈해 붙인다.
   편집기 미리보기(.tiptap-gallery)도 같은 클래스를 써서 쓰는 동안의 모양이 실린 모양과 같다.
   레이어 밖에 두는 것은 글 화면의 본문 사진 규칙(.site-article__body .rich-text img — 그림자·위아래 여백)을
   이겨야 해서다. 칸 안의 사진은 칸이 모양을 정한다. */
.rich-text__gallery { position: relative; display: block; margin: 1.4em 0; container-type: inline-size; }
.rich-text__gallery-item { position: relative; overflow: hidden; border-radius: 6px; background: #F7F7F8; }
.rich-text .rich-text__gallery-item img,
.rich-text__gallery-item img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* 콜라주 — 한 줄의 칸 너비가 사진 비율에 비례해 사진들이 같은 높이로 선다. 틈만큼은 잘라(cover) 맞춘다. */
.rich-text__gallery--collage,
.tiptap-gallery__rows { display: flex; flex-direction: column; gap: 4px; }
.rich-text__gallery-row { display: grid; gap: 4px; }
/* 칸 크기는 줄 비율만 정한다 — 사진이 흐름 안에 있으면 제 높이로 줄을 밀어 늘려 줄 비율이 무너진다. */
.rich-text__gallery--collage .rich-text__gallery-item img { position: absolute; inset: 0; object-fit: cover; }

/* 슬라이드 — 높이는 하나(본문 너비의 88% ÷ 대표 비율, 데스크톱 560px · 화면 높이 60%까지), 너비는
   사진마다 제 비율대로. 대표 비율의 사진이 본문의 88%를 채워 다음 장이 끝에 걸쳐 보인다. 그보다 넓은
   사진도 88%까지만 쓰고 넘치는 좌우를 잘라(cover) 칸을 채운다 — 줄여 넣으면(contain) 위아래에 회색 띠가
   생겼다(2026-10-13 사용자 결정). */
.rich-text__gallery--slide { --gallery-height: min(calc(88cqi / var(--gallery-ratio, 1.5)), 560px, 60svh); }
.rich-text__gallery-track {
  display: flex;
  gap: 8px;
  height: var(--gallery-height);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rich-text__gallery-track::-webkit-scrollbar { display: none; }
.rich-text__gallery--slide .rich-text__gallery-item { flex: none; height: 100%; max-width: 88cqi; scroll-snap-align: start; }
.rich-text__gallery--slide .rich-text__gallery-item img { object-fit: cover; }

/* 진행 막대와 넘기는 단추는 rich-text-slider 컨트롤러가 붙인다(스크립트가 없는 메일에는 없다). */
.rich-text__gallery-progress { position: relative; width: min(60%, 320px); height: 3px; margin: 14px auto 0; overflow: hidden; border-radius: 9999px; background: #E8E5E6; }
.rich-text__gallery-progress > span { position: absolute; top: 0; height: 100%; border-radius: 9999px; background: #222124; transition: left 0.15s ease-out; }
.rich-text__gallery-nav {
  position: absolute;
  top: calc(var(--gallery-height) / 2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #E8E5E6;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.94);
  color: #222124;
  box-shadow: 0 4px 12px rgb(34 33 36 / 0.12);
  cursor: pointer;
  transform: translateY(-50%);
}
.rich-text__gallery-nav--previous { left: 8px; }
.rich-text__gallery-nav--next { right: 8px; }
.rich-text__gallery-nav[hidden] { display: none; }
/* 손가락으로 넘기는 화면에서는 단추가 사진을 가리기만 한다. */
@media (hover: none) { .rich-text__gallery-nav { display: none; } }

/* 후기의 접힌 본문은 묶음도 숨긴다 — 사진은 아래 썸네일 줄이 보인다(위 낱장 사진 규칙과 같다). */
.site-review__text.is-clamped .rich-text__gallery { display: none; }

/* 편집기 안의 묶음 — 모양 이름표, 고르면 칸마다 「앞으로」「빼기」 단추. */
.tiptap-gallery { margin: 1rem 0; line-height: normal; }
.tiptap-gallery.is-selected { outline: 2px solid #3b82f6; outline-offset: 2px; }
.tiptap-gallery__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  background: rgb(15 23 42 / 0.65);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  pointer-events: none;
}
.tiptap-gallery__item-controls { position: absolute; top: 6px; right: 6px; display: none; gap: 4px; }
.tiptap-gallery.is-selected .tiptap-gallery__item-controls { display: flex; }
.tiptap-gallery__item-button {
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 9999px;
  background: rgb(15 23 42 / 0.7);
  color: #fff;
  font-size: 0.6875rem;
  line-height: 1;
  cursor: pointer;
}
.tiptap-gallery__item-button:hover { background: #2563eb; }

/* 사진 첨부 방식 대화상자 — 두 장 이상 고르면 뜬다. 보기 그림은 사진 대신 칸으로 그린다. */
/* 가운데 자리는 margin: auto가 잡는다 — Tailwind의 기본 서식(preflight)이 dialog의 margin을 0으로 돌려 왼쪽 위에 붙는다. */
.tiptap-gallery-dialog {
  margin: auto;
  width: 30rem;
  max-width: calc(100vw - 2rem);
  border: 0;
  border-radius: 1rem;
  padding: 0;
  box-shadow: 0 24px 48px -12px rgb(15 23 42 / 0.35);
}
.tiptap-gallery-dialog::backdrop { background: rgb(15 23 42 / 0.4); }
.tiptap-gallery-dialog__panel { position: relative; padding: 1.75rem 1.5rem 1.5rem; text-align: center; }
.tiptap-gallery-dialog__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #475569;
  font-size: 1rem;
  cursor: pointer;
}
.tiptap-gallery-dialog__close:hover { background: #f1f5f9; }
.tiptap-gallery-dialog__title { margin: 0; color: #0f172a; font-size: 1.125rem; font-weight: 700; }
.tiptap-gallery-dialog__description { margin: 0.375rem 0 0; color: #64748b; font-size: 0.8125rem; }
.tiptap-gallery-dialog__count { color: #334155; font-weight: 600; }
.tiptap-gallery-dialog__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1.25rem; }
.tiptap-gallery-dialog__option {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  color: #0f172a;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.tiptap-gallery-dialog__sample {
  display: grid;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  padding: 0.625rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tiptap-gallery-dialog__option:hover .tiptap-gallery-dialog__sample,
.tiptap-gallery-dialog__option:focus-visible .tiptap-gallery-dialog__sample { border-color: #3b82f6; box-shadow: 0 0 0 2px #dbeafe; }
.tiptap-gallery-dialog__option:focus-visible { outline: none; }
.tiptap-gallery-dialog__sample i { border-radius: 2px; background: #cbd5e1; }
.tiptap-gallery-dialog__sample--single { grid-template-rows: 1fr 1fr; }
.tiptap-gallery-dialog__sample--single i:nth-child(3) { display: none; }
.tiptap-gallery-dialog__sample--collage { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.tiptap-gallery-dialog__sample--collage i:first-child { grid-row: span 2; }
.tiptap-gallery-dialog__sample--slide { grid-template-columns: 0.35fr 1.5fr 0.35fr; grid-template-rows: 1fr 3px; align-items: center; row-gap: 10px; }
.tiptap-gallery-dialog__sample--slide i { height: 55%; align-self: center; }
.tiptap-gallery-dialog__sample--slide::after { content: ""; grid-column: 1 / -1; height: 3px; border-radius: 9999px; background: linear-gradient(to right, #334155 35%, #e2e8f0 35%); }