/* Webflow export(style.css) 위에 얹는 Django 전용 스타일 */

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 5em; }
a:focus-visible, .file-drop:focus-within, .hamburger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── 카테고리 탭 / 페이지네이션 (div → a) ───────────────── */
a.text-block-18, a.text-block-21 {
  color: var(--maintxt);
  text-decoration: none;
  transition: border-color .2s, color .2s, background-color .2s;
}
a.text-block-18:hover, a.text-block-21:not(.current):hover {
  border-color: var(--primary);
  color: var(--primary);
}
a.text-block-18.current, a.text-block-21.current { color: var(--white); }
a.text-block-21._1:hover, a.text-block-21._2:hover, a.text-block-21._3:hover { color: var(--maintxt); }
.text-block-21.is-disabled { opacity: .35; pointer-events: none; }

/* ── 작업사례 카드 ───────────────────────────────────── */
.casetitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case .casetitle { transition: color .2s; }
.case:hover .casetitle { color: var(--primary); }
.case .thumbnail-image { transition: transform .4s ease; }
.case:hover .thumbnail-image { transform: scale(1.04); }
.empty-state {
  grid-column: 1 / -1;
  padding: 5em 0;
  color: var(--subtxt);
  text-align: center;
  font-size: 1.1em;
}

/* ── 상세 헤더 ───────────────────────────────────────── */
.case-head { width: 100%; }
.case-head .text-block-33 { text-decoration: none; }
.case-title { margin: 0; word-break: keep-all; text-wrap: balance; }

/* ── 리치텍스트 본문 (TinyMCE 출력 + 에디터 iframe 공용) ─── */
.case-content {
  width: 100%;
  max-width: 760px;
  color: var(--maintxt);
  font-size: 1.1em;
  line-height: 1.85;
  letter-spacing: -.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.case-content > :first-child { margin-top: 0; }
.case-content > :last-child { margin-bottom: 0; }
.case-content p, .case-content ul, .case-content ol { margin: 0 0 1.15em; }
.case-content h2, .case-content h3, .case-content h4 {
  color: var(--maintxt);
  font-weight: 800;
  letter-spacing: -.04em;
}
.case-content h2 { margin: 2.2em 0 .7em; font-size: 1.6em; line-height: 1.35; }
.case-content h3 { margin: 1.9em 0 .6em; font-size: 1.3em; line-height: 1.4; }
.case-content h4 { margin: 1.6em 0 .5em; font-size: 1.1em; line-height: 1.45; font-weight: 600; }
.case-content ul, .case-content ol { padding-left: 1.4em; }
.case-content li + li { margin-top: .4em; }
.case-content li::marker { color: var(--primary); }
.case-content a { color: var(--primary); text-decoration: underline; text-underline-offset: .2em; }
.case-content strong { font-weight: 800; }
.case-content img { max-width: 100%; height: auto; border-radius: 1em; vertical-align: middle; }
.case-content p > img:only-child { display: block; margin: 2em auto; }
.case-content figure { margin: 2em 0; }
.case-content figure.image { display: table; margin-left: auto; margin-right: auto; }
.case-content figcaption {
  display: table-caption;
  caption-side: bottom;
  margin-top: .75em;
  color: var(--subtxt);
  font-size: .85em;
  line-height: 1.5;
  text-align: center;
}
.case-content blockquote {
  margin: 2em 0;
  padding: 1.25em 1.5em;
  border-left: 3px solid var(--primary);
  border-radius: 0 1em 1em 0;
  background-color: var(--background);
  color: var(--maintxt);
  font-size: 1em;
  line-height: 1.75;
}
.case-content hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--line); }
.case-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .95em;
}
.case-content th, .case-content td { padding: .6em .9em; border: 1px solid var(--placeholder); }
.case-content th { background-color: var(--background); font-weight: 600; }

/* ── 이전/목록/다음 ──────────────────────────────────── */
.post-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1em;
  width: 100%;
}
.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: .5em;
  min-width: 0;
  padding: 1.25em 1.5em;
  border: 1px solid var(--line);
  border-radius: 1em;
  color: var(--maintxt);
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
a.post-nav-item:hover { border-color: var(--primary); background-color: #2799ff08; }
.post-nav-item.next { text-align: right; }
.post-nav-item.is-empty { color: var(--placeholder); }
.post-nav-label { color: var(--subtxt); font-size: .85em; line-height: 1; }
.post-nav-title {
  overflow: hidden;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.post-nav .link-2 { align-self: center; }

/* ── 상담 CTA ───────────────────────────────────────── */
.case-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
  width: 100%;
  padding: 2.5em;
  border-radius: 1.5em;
  background-color: var(--background);
}
.case-cta-title { margin: 0 0 .4em; font-size: 1.5em; font-weight: 800; line-height: 1.35; letter-spacing: -.04em; }
.case-cta-desc { color: var(--subtxt); font-size: 1em; line-height: 1.6; }
.case-cta-actions { display: flex; flex-shrink: 0; gap: .5em; }
.btn-pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 3em;
  padding: 0 1.5em;
  border: 1px solid var(--primary);
  border-radius: 20em;
  background-color: var(--primary);
  color: var(--white);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s;
}
.btn-pill:hover { opacity: .85; }
.btn-pill.outline { background-color: var(--white); color: var(--primary); }

.related-head { margin-bottom: 2.5em; }

/* ── 문의 폼 ────────────────────────────────────────── */
.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field-error { color: #e5484d; font-size: .8em; line-height: 1.4; }
.form-message.w-form-done, .form-message.w-form-fail {
  display: block;
  margin: 0 0 2em;
  padding: 1.1em 1.25em;
  border-radius: .75em;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}
.form-message.w-form-done { background-color: #2799ff14; color: var(--primary); }
.form-message.w-form-fail { background-color: #e5484d14; color: #d13438; }
.file-drop { position: relative; cursor: pointer; transition: border-color .2s, background-color .2s; }
.file-drop.is-dragover { border-color: var(--primary); background-color: #2799ff0d; }
.file-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* 날짜 미선택 시 다른 입력칸 placeholder와 같은 톤 */
.text-field-3[type="date"]:invalid { color: var(--placeholder); }
.privacy-link { color: var(--primary); text-decoration: underline; }
.footer-tel { color: inherit; text-decoration: none; }

@media screen and (max-width: 767px) {
  .text-block-31.case-title { font-size: 2.25em; }
  .post-nav { grid-template-columns: 1fr 1fr; }
  .post-nav .link-2 { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .post-nav-item { padding: 1em; }
  .case-cta { flex-direction: column; align-items: flex-start; padding: 2em 1.5em; }
  .case-cta-actions { width: 100%; }
  .case-cta-actions .btn-pill { flex: 1; }
}

/* div → 시맨틱 태그로 바꾼 곳 기본 margin 제거 */
h2.text-block-15, .case-cta-desc, .empty-state { margin: 0; }
.empty-state { padding: 5em 0; }