:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #000000;
  --color-text-muted: #333333;
  --color-border: #e6e2db;
  --color-accent: #4a5d73;
  --color-accent-hover: #3a4a5c;
  --color-kakao: #fee500;
  --color-kakao-text: #191600;
  --color-instagram: #e1306c;
  /* 로고 마크에서 뽑은 골드 색상 — 눈에 띄어야 하는 CTA에 사용 */
  --color-logo-gold: #d09c44;
  --color-logo-gold-hover: #b8842f;
  --radius: 14px;
  --max-width: 640px;
}

* {
  box-sizing: border-box;
}

/* 브라우저 기본값 때문에 button/input 등 폼 컨트롤은 body의 font-family를 자동으로 물려받지 않아서,
   메뉴 버튼처럼 <button>으로 만든 요소들에 전역으로 명시해줌 */
button,
input,
textarea,
select {
  font-family: inherit;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: 'Manrope', 'NanumSquare', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', 'Noto Sans', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

/* 가로 스크롤 방지는 body가 아니라 이 래퍼에서 처리 — body/html에 overflow-x:hidden을 두면
   사파리/크롬에서 .site-header의 position:sticky가 깨지는 알려진 문제가 있어서, 헤더와 형제 요소로 분리함.
   overflow-y를 명시하지 않으면 overflow-x:hidden만으로도 overflow-y가 자동으로 auto가 되어(스펙 동작)
   이 래퍼 자체가 스크롤 컨테이너가 돼버려서 window 스크롤이 먹통이 되므로 반드시 visible로 같이 지정함 */
.page-scroll-clip {
  overflow-x: hidden;
  overflow-y: visible;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* 스크롤을 내리면 헤더가 살짝 투명해지고 뒤 내용이 은은하게 비치도록 */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(230, 226, 219, 0.7);
  box-shadow: 0 2px 16px rgba(28, 26, 23, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__logo-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.site-header__logo {
  display: block;
  height: 36px;
  width: auto;
}

.site-header__logo-text {
  font-family: 'Manrope', 'NanumSquare', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #000;
  white-space: nowrap;
}

/* 모바일 기본값 — 메뉴는 햄버거 버튼을 눌러야 나타나는 드롭다운 카드 형태 */
.site-header__nav {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  position: absolute;
  top: calc(100% + 8px);
  right: 24px;
  min-width: 168px;
  margin: 0;
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(28, 26, 23, 0.14);
  z-index: 250;
}

.site-header__nav.is-open {
  display: flex;
}

.site-header__nav-link {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  text-align: left;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.site-header__nav-link:hover {
  color: var(--color-accent);
  background: var(--color-bg);
}

/* 모바일 상단 오른쪽 햄버거 메뉴 버튼(3줄 아이콘) */
.site-header__menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.site-header__menu-btn-line {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #000;
}

/* PC에서는 항상 가로로 펼쳐진 메뉴가 보여서 햄버거 버튼이 필요 없음 — 모바일 전용 규칙들 뒤에 와야
   같은 우선순위의 선택자끼리는 나중에 나온 규칙이 이기는 CSS 특성상 여기서 제대로 덮어써짐 */
@media (min-width: 768px) {
  .site-header__inner {
    max-width: none;
    padding: 18px 80px;
  }

  .site-header__menu-btn {
    display: none;
  }

  /* 모바일 전용 드롭다운 스타일(위치/배경/그림자 등)을 걷어내고 원래의 가로 나열 메뉴로 되돌림 */
  .site-header__nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 64px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .site-header__nav-link {
    width: auto;
    padding: 8px 0;
    font-size: 16px;
  }
}

.app {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 24px 40px;
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px 24px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.site-footer__logo {
  height: 26px;
  width: auto;
  margin-bottom: 12px;
}

.site-footer__info {
  margin-bottom: 14px;
}

.site-footer__info p {
  margin: 0 0 2px;
}

.site-footer__info a {
  color: inherit;
  text-decoration: none;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

.site-footer__social-link svg {
  width: 20px;
  height: 20px;
}

.site-footer__social-link:hover {
  color: var(--color-text);
}

.site-footer__disclaimer {
  margin: 0;
}

/* Landing */
.landing__title {
  font-size: 28px;
  line-height: 1.35;
  margin: 0 0 12px;
}

.landing__subtitle {
  color: var(--color-text-muted);
  margin: 0 0 32px;
  font-size: 15px;
}

/* 서비스 선택 화면 — 6개 서비스를 목록이 아니라 브랜드가 고객과 만나는 순서대로 이어진 흐름(전개도)으로 보여줌.
   모바일은 세로로 쌓이고(위→아래 화살표), PC는 가로로 펼쳐짐(왼쪽→오른쪽 화살표) */
.service-flow {
  margin: 0 0 40px;
}

.service-flow__row {
  display: flex;
  flex-direction: column;
}

.service-flow__node {
  display: flex;
  flex-direction: column;
}

.service-flow__card-wrap {
  position: relative;
}

.service-flow__card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 46px 16px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.service-flow__num {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-logo-gold-hover);
  font-variant-numeric: tabular-nums;
}

.service-flow__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.service-flow__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.service-flow__tag {
  font-size: 12px;
  color: var(--color-text-muted);
}

.service-flow__badge {
  margin-left: auto;
  flex-shrink: 0;
}

.service-flow__card.is-ready:hover {
  border-color: var(--color-accent);
  background: #eaf2fc;
}

.service-flow__card.is-soon {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.service-flow__connector {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  color: var(--color-border);
  font-size: 16px;
}


.service-list__info-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.service-list__info-btn:hover,
.service-list__info-btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: #eaf2fc;
}

.service-list__info-panel {
  margin: 8px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.service-list__info-concept {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.5;
}

.service-list__info-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.service-list__info-deliverables {
  margin: 0;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.6;
}

.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-border);
  color: var(--color-text-muted);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 14px 20px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--color-accent);
  color: #fff;
  width: 100%;
}

.btn--primary:hover {
  background: var(--color-accent-hover);
}

.btn--lg {
  padding: 16px 24px;
  font-size: 16px;
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  width: 100%;
  margin-top: 20px;
}

.btn--ghost:hover:not(:disabled) {
  color: var(--color-text);
}

.wizard__nav-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 36px;
}

.wizard__nav-row .btn--nav-small {
  justify-self: start;
}

.wizard__nav-row #back-btn {
  justify-self: center;
}

.wizard__nav-spacer {
  justify-self: end;
}

.wizard__disclaimer {
  margin: 28px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  opacity: 0.6;
}

.btn--nav {
  width: auto;
  margin-top: 0;
  padding: 10px 4px;
}

.btn--nav-small {
  font-size: 13px;
  color: var(--color-text-muted);
  opacity: 0.45;
}

.btn--nav-small:hover {
  opacity: 1;
}

/* "이전으로" — 실제 버튼처럼 보이도록 테두리를 주되, 색은 튀지 않게 무채색 톤으로 */
.btn--nav-outline {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  padding: 8px 18px;
  font-size: 14px;
}

.btn--nav-outline:hover:not(:disabled) {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.btn--outline {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  width: 100%;
}

.btn--kakao {
  background: var(--color-kakao);
  color: var(--color-kakao-text);
  width: 100%;
}

.btn--instagram {
  background: var(--color-instagram);
  color: #fff;
  width: 100%;
}

/* 모든 화면 우측 하단에 고정으로 떠 있는 카카오톡 문의 버튼 — 노란 원 + 말풍선(TALK) 아이콘 */
.kakao-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-kakao);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}

.kakao-float:hover {
  transform: translateY(-2px);
}

.kakao-float__bubble {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 24px;
  border-radius: 8px;
  background: var(--color-kakao-text);
  color: var(--color-kakao);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.kakao-float__bubble::after {
  content: '';
  position: absolute;
  left: 8px;
  bottom: -5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 2px solid transparent;
  border-top: 6px solid var(--color-kakao-text);
}

/* Wizard */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-accent);
  transition: width 0.25s ease;
}

.wizard__service-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 8px;
}

.wizard__category-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.wizard__category-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.wizard__category-chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 700;
}

.wizard__step-count {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 28px;
}

.wizard__title {
  font-size: 22px;
  margin: 0 0 8px;
  line-height: 1.4;
}

/* 위저드 질문 화면 전용 — 다른 화면(포트폴리오/결과 등)의 wizard__title은 그대로 두고 질문 제목만 더 크게 */
.wizard__title--question {
  font-size: 27px;
}

.wizard__description {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 0 0 24px;
}

/* 질문 화면(제목+설명) 바로 다음에 오는 선택지/입력란과의 간격을 다른 wizard__description 쓰임(포트폴리오 소개 등)보다
   더 넉넉하게 벌려서, 설명 글이 선택지와 붙어 보이지 않도록 함 */
.wizard__title--question + .wizard__description {
  margin-bottom: 44px;
}

/* 질문 설명 아래 "기본 포함 항목" — 세로로 길게 나열하면 스크롤이 길어져서, 한 줄에 여러 개씩 감싸지는 작은 태그 형태로 압축 */
.wizard__included-label {
  margin: -12px 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
}

.wizard__included-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wizard__included-list li {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  padding: 5px 10px 5px 22px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  position: relative;
}

.wizard__included-list li::before {
  content: '✓';
  position: absolute;
  left: 9px;
  font-size: 11px;
  color: var(--color-accent);
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.option-card {
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.option-card:hover {
  border-color: var(--color-accent);
  background: #eaf2fc;
}

.option-card:active {
  transform: scale(0.99);
}

.option-card.is-selected {
  border-color: var(--color-accent);
  background: #eaf2fc;
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.option-grid--stacked {
  grid-template-columns: 1fr;
}

/* 한 화면에 선택 그룹 여러 개(연령/성별 등)와 자유 입력을 함께 보여줄 때 사용 (예: 타겟 고객층) */
.group-block {
  margin-bottom: 22px;
}

.group-block__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.group-block__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* 타겟 고객층의 연령/성별 버튼은 크기를 통일해서 열을 맞춰 보여줌(기본 알약형 칩과 다르게 grid 셀에 꽉 채움) */
.group-block__options .option-card--chip {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.group-block__textarea {
  min-height: 120px;
}

.option-card--chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-size: 14px;
  border-radius: 999px;
  width: auto;
}

.option-grid--icons {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* 선택지가 많은 질문(분위기 등)을 촘촘한 알약 태그로 감싸서 스크롤 길이를 줄이는 모드 */
.option-grid--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* "직접 작성"/"상담 후 결정"처럼 태그 무리와 분리해서 보여주는 큼직한 버튼 줄 */
.chip-grid__big-row {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.option-card--chip-big {
  width: 100%;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 600;
}

.option-card--icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: center;
  padding: 14px 6px;
}

.option-card--icon .option-card__label {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}

.option-card--icon-textonly {
  justify-content: center;
  min-height: 100px;
}

/* "필요 없어요"/"잘 모르겠어요"처럼 아이콘 없는 옵션이 연달아 있으면 한 줄에 나란히 배치 */
.option-card__textonly-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}

.option-card__textonly-row .option-card--icon-textonly {
  flex: 1;
  min-height: 64px;
}

.option-card__textonly-row .option-card__label {
  white-space: normal;
}

.option-card__icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.option-card__icon-wrap svg {
  width: 22px;
  height: 22px;
}

.option-card--icon.is-selected .option-card__icon-wrap {
  background: var(--color-accent);
  color: #fff;
}

.option-card--detailed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
}

.option-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.option-card__label {
  font-size: 16px;
  font-weight: 700;
}

.option-card__sublabel {
  font-weight: 400;
  font-size: 13px;
  color: var(--color-text-muted);
  opacity: 0.75;
}

.option-card__color-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-swatches {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  flex-shrink: 0;
}

.color-dot {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.option-card__detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.option-card__features {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
}

.option-card__recommend {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.option-card__detail strong {
  color: var(--color-text);
  font-weight: 600;
  margin-right: 4px;
}

#next-btn {
  margin-bottom: 10px;
}

.wizard .form-field {
  margin-bottom: 20px;
}

/* Result */
.result__eyebrow {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 4px;
}

.result__price {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 20px;
}

.result__notes {
  background: #eaf2fc;
  border: 1px solid #c9dcf5;
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--color-accent-hover);
  margin-bottom: 24px;
}

.result__notes p {
  margin: 0;
}

.result__notes p + p {
  margin-top: 4px;
}

.result__notes-list {
  margin: 8px 0 0;
  padding: 0 0 0 18px;
}

.result__notes-list li {
  margin-top: 4px;
}

/* 견적 결과에서 아직 의뢰할 준비가 안 된 방문자가 이메일만 남기고 갈 수 있게 하는 카드 */
.lead-capture {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  padding: 16px 18px;
  margin-bottom: 24px;
}

.lead-capture__title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
}

.lead-capture__desc {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.lead-capture__form {
  display: flex;
  gap: 8px;
}

.lead-capture__form .form-input {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  padding: 10px 12px;
}

.lead-capture__form .btn {
  width: auto;
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: 13.5px;
}

.lead-capture__status {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
  min-height: 1em;
}

.lead-capture__status--success {
  color: #2f7d4f;
  font-weight: 600;
}

.lead-capture__status--error {
  color: #c0392b;
}

@media (max-width: 420px) {
  .lead-capture__form {
    flex-direction: column;
  }
  .lead-capture__form .btn {
    width: 100%;
  }
}

/* 무료 디자인 진단 — 마지막 질문 후 결과가 뜨기 전 잠깐 보여주는 로딩 화면 */
.diagnosis-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 55vh;
  text-align: center;
}

.diagnosis-loading__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-logo-gold);
  border-radius: 50%;
  animation: diagnosis-spin 0.8s linear infinite;
}

@keyframes diagnosis-spin {
  to {
    transform: rotate(360deg);
  }
}

.diagnosis-loading__text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .diagnosis-loading__spinner {
    animation: none;
  }
}

/* 무료 디자인 진단 결과 화면 */
.diagnosis-result__steps {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.diagnosis-result__step {
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.diagnosis-result__step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.diagnosis-result__num {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--color-logo-gold-hover);
}

.diagnosis-result__step-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}

.diagnosis-result__step-desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.diagnosis-result__notneeded {
  margin: 8px 0 32px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.diagnosis-result__notneeded-label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.diagnosis-result__notneeded-list {
  margin: 0 0 10px;
  padding: 0 0 0 18px;
  font-size: 14px;
}

.diagnosis-result__notneeded-list li {
  margin-bottom: 4px;
}

.diagnosis-result__notneeded-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.diagnosis-result__summary {
  margin: 8px 0 32px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.diagnosis-result__summary-label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.diagnosis-result__summary .summary-list {
  margin: 0;
}

.diagnosis-result__cta {
  margin: 0 0 16px;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  text-align: center;
}

.diagnosis-result__cta--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.diagnosis-result__cta--primary .diagnosis-result__cta-label,
.diagnosis-result__cta--primary .diagnosis-result__cta-question {
  color: #fff;
}

.diagnosis-result__cta-label {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.diagnosis-result__cta-question {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}

.diagnosis-result__cta .btn {
  width: auto;
  padding: 14px 24px;
}

/* 견적내기를 끝까지 마친 사람이 의뢰하기를 누르기 전 이탈하지 않도록 보여주는 10% 할인 쿠폰 */
.coupon {
  position: relative;
  border: 1.5px dashed #c98a2c;
  border-radius: var(--radius);
  background: #fdf6e9;
  padding: 18px 20px;
  margin-bottom: 16px;
  overflow: hidden;
}

.coupon::before,
.coupon::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background: var(--color-bg);
  border-radius: 50%;
  transform: translateY(-50%);
}

.coupon::before {
  left: -8px;
}

.coupon::after {
  right: -8px;
}

.coupon__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: #c98a2c;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.coupon__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}

.coupon__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.coupon__price {
  font-size: 15px;
  font-weight: 700;
  color: #a3661a;
  margin: 0 0 4px;
}

.coupon__code {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}

.coupon__code strong {
  color: var(--color-text);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.04em;
}

.coupon-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #a3661a;
  background: #fdf6e9;
  border: 1px solid #eddab0;
  border-radius: 999px;
  padding: 4px 10px;
  margin: 0 0 20px;
}

.breakdown {
  margin-bottom: 24px;
}

.breakdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.breakdown-list__item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}

.breakdown-list__label {
  color: var(--color-text-muted);
  flex: 1;
}

.breakdown-list__price {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.breakdown__note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 8px 0 0;
}

.breakdown-summary {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.breakdown-summary__item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.breakdown-summary__item--total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.summary-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.summary-list__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.summary-list__q {
  color: var(--color-text-muted);
  font-size: 12px;
}

.summary-list__a {
  font-weight: 600;
  font-size: 13px;
}

/* 예상 견적 화면의 선택 내역 — 실제 견적서처럼 카드 안에 표로 정리 */
.quote-sheet {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 18px 20px 4px;
  margin-bottom: 24px;
}

.quote-sheet__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--color-text);
}

.quote-sheet__service {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 2px;
}

.quote-sheet__title {
  font-size: 14px;
  font-weight: 700;
}

.quote-sheet__date {
  font-size: 12px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.quote-sheet .summary-table {
  margin: 0;
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 13px;
}

.summary-table th,
.summary-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.summary-table th {
  width: 40%;
  color: var(--color-text-muted);
  font-weight: 500;
}

.summary-table td {
  font-weight: 600;
  word-break: break-word;
}

.summary-table__group th {
  padding: 14px 12px 6px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
}

.summary-table__group:first-child th {
  padding-top: 10px;
}

.summary-list__group {
  padding: 14px 0 4px;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
}

.summary-table__total th,
.summary-table__total td {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
  border-top: 2px solid var(--color-text);
  border-bottom: none;
}

.result__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

#request-btn {
  margin: 4px 0 20px;
}

/* Portfolio */
/* 모바일에서도 화면 좌우 끝까지 꽉 차게(풀블리드) — PC는 아래 min-width:768px에서 40px 패딩으로 다시 확보 */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin: 24px 0 32px;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.portfolio-card {
  position: relative;
  display: block;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.1s ease;
}

.portfolio-card:active {
  transform: scale(0.99);
}

/* 썸네일이 자동으로 옆으로 슬라이드 전환되는 동안 삐져나가는 부분을 가려주는 틀 — 비율은 여기서 관리 */
.portfolio-card__thumb-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg);
}

.portfolio-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.2s ease, transform 0.6s ease;
}

/* 모바일은 오버가 없어서(탭 시 hover가 잠깐 걸려있는 등) 오버레이/블러 자체를 안 씀 — PC(min-width:768px)에서만 활성화 */
.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 16px;
  text-align: left;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.portfolio-card__overlay-title {
  font-size: 14px;
  font-weight: 700;
}

.portfolio-card__overlay-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.portfolio-card__service {
  padding: 10px 12px 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.portfolio-card__title {
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.portfolio-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 12px 12px;
}

.portfolio-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-bg);
  font-size: 11px;
  color: var(--color-text);
}

.portfolio-tag__label {
  color: var(--color-text-muted);
}

/* 메인페이지 — 상단 히어로 이미지 + 견적 시작 안내(서비스 리스트) + 대표 포트폴리오(2개씩, 간격 없음) + 미니 프로세스 미리보기 */
/* .home-top 안에는 .home-hero 하나만 있고, 그 안에서 화면 전체(100vw)로 꽉 차게(fullbleed) 처리함 —
   .home-top 자체에 너비/패딩을 따로 주면 그 안에서 다시 계산되는 .home-hero의 fullbleed 계산과 겹쳐서
   틀어지므로(왼쪽으로 쏠려 보이는 버그였음), .home-top은 PC에서도 별도 레이아웃을 주지 않음 */
.home-top {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 48px;
}

/* 모바일: 화면 좌우/위 여백 없이 꽉 채워서 보여줌 (.app의 상단 패딩 48px을 상쇄) */
/* 히어로 영상 원본 사이즈(1080x1440 = 3:4)와 같은 비율로, 모바일 화면 한 번에 들어오는 세로 크기 유지.
   PC는 아래 미디어 쿼리에서 가로 100%+화면 높이 기준으로 다시 잡음(좌우가 잘려도 괜찮음, object-fit:cover) */
.home-hero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: -48px 0 0 calc(50% - 50vw);
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}

.home-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 히어로 자리에 유튜브 영상(16:9)을 3:4 세로 비율 컨테이너에 꽉 채워서(object-fit:cover와 같은 효과) 보여주기 —
   iframe은 object-fit이 안정적으로 적용되지 않아서, 높이를 100%로 맞추고 그 비율(16:9)에 맞는 폭(237%)으로
   오버사이즈한 뒤 가운데 정렬해 좌우를 자연스럽게 잘라내는 방식으로 직접 계산함(모바일 .home-hero의 aspect-ratio:3/4 기준).
   PC는 아래 미디어 쿼리에서 화면 비율 기준으로 다시 계산함.
   pointer-events:none으로 클릭이 항상 .home-hero 자체(견적 페이지 이동)로 전달되게 함 — 재생바 등 조작 UI 자체가 없음(controls=0) */
.home-hero__yt-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-hero__yt-wrap iframe {
  position: absolute;
  top: 0;
  left: 50%;
  width: 237%;
  height: 100%;
  border: 0;
  transform: translateX(-50%);
}

/* 히어로 영상이 한 번 끝날 때마다 잠깐 보여주는 클릭 유도 버튼 */
.home-hero__end-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.home-hero__end-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.home-hero__end-cta-btn {
  width: auto;
  padding: 16px 28px;
  font-size: 16px;
}

@media (min-width: 768px) {
  /* PC: 화면 가로 전체(100%)로 채우고, 세로는 화면 높이 기준으로 잡음(원본이 세로 영상이라 좌우가 크게
     잘리지만 의도된 동작 — object-fit:cover). 예전처럼 420px로 좁게 고정해서 좌우가 비는 것을 없앰 */
  .home-hero {
    width: 100vw;
    max-width: 100vw;
    aspect-ratio: auto;
    height: 90vh;
    height: 90dvh;
    flex: none;
    margin: -48px 0 0 calc(50% - 50vw);
  }

  /* 예전엔 동영상을 200~237%로 확대(줌)해서 좌우 검은 여백을 가렸지만, PC 화면 폭이 원본 1920px보다
     넓어지면 그만큼 원본보다 더 크게 늘어나 화질이 흐려 보이는 문제가 있었음(특히 클로즈업 장면).
     화질을 우선해 확대를 없애고 기본 object-fit:cover(.home-hero__img)로 되돌림 — 화면이 넓을 땐
     세로 기준으로 자연스럽게 크롭됨. 대신 영상 안에 좁게(3:4) 찍힌 장면에서는 좌우 검은 여백이
     그대로 보일 수 있음(화질과 여백 사이의 트레이드오프, 화질 쪽을 선택함). */

  /* 유튜브 iframe도 PC 화면(100vw x 100vh) 기준으로 다시 계산 — 화면 비율이 얼마든 항상 꽉 채우도록
     가로 기준(width:100vw + height:56.25vw)과 세로 기준(min-width:177.78vh + min-height:100vh)을 모두 줌 */
  .home-hero__yt-wrap iframe {
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    transform: translate(-50%, -50%);
  }
}

/* ── 02 이렇게 진행돼요 — 견적 위저드 전체 흐름을 4단계로 요약한 세로 스텝 리스트 ── */
/* ── 03 어디서부터 시작할지 선택해주세요 — 무료 디자인 진단 vs 예상 견적 확인, 두 가지 시작점을 카드로 안내 ── */
.home-start {
  margin: 56px 0;
}

.home-start__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.home-start__card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 28px 24px;
  overflow: hidden;
}

.home-start__card-title {
  margin: 0 0 12px;
  padding-right: 60px;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.35;
}

.home-start__card-desc {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.home-start__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.home-start__card-tag {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 10.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.home-start__card-btn {
  width: auto;
  padding: 14px 22px;
  background: var(--color-accent);
  color: #fff;
}

.home-start__card-btn:hover {
  background: var(--color-accent-hover);
}

.home-start__card-badge {
  position: absolute;
  top: 24px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}

.home-start__card-badge--question {
  background: rgba(208, 156, 68, 0.16);
  color: var(--color-logo-gold-hover);
}

.home-start__card-badge--won {
  background: #000;
  color: var(--color-logo-gold);
}

.home-works-heading {
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 16px calc(50% - 50vw);
  padding: 24px 24px 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.home-works-heading__title {
  font-size: 20px;
  font-weight: 700;
}

.home-works-heading__all {
  width: auto;
  padding: 8px 4px;
  flex-shrink: 0;
}

.portfolio-grid.portfolio-grid--home {
  gap: 0;
  margin-bottom: 64px;
}

/* ── 06 What We Do ── */
.home-whatwedo {
  margin: 56px 0;
}

.home-whatwedo__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.home-whatwedo__card {
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.home-whatwedo__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.home-whatwedo__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-whatwedo__list li {
  padding: 7px 0;
  border-top: 1px solid var(--color-border);
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.home-whatwedo__list li:first-child {
  border-top: none;
}

/* PC: 히어로/Selected Works/Final CTA와 가로 폭·좌우 여백(80px)을 전부 통일 —
   .app의 640px 제한 안에 갇혀있던 섹션들(CTA Split/What We Do)을
   전부 같은 방식(뷰포트 전체 + 좌우 80px)으로 풀블리드시켜서, 어느 섹션이든 좌우 끝선이 항상 같은 위치에 오도록 맞춤 */
@media (min-width: 768px) {
  .home-start,
  .home-whatwedo {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 80px;
  }

  .column-grid.column-grid--home {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 80px;
  }

  .home-start__cards {
    grid-template-columns: 1fr 1fr;
  }

  .home-start__card {
    padding: 36px 40px;
  }

  .home-start__card-title {
    font-size: 30px;
    padding-right: 70px;
  }

  .home-start__card-badge {
    top: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .home-works-heading {
    padding: 32px 80px 0;
  }

  .home-works-heading__title {
    font-size: 26px;
  }

  /* PC: 처음 3줄(6개)은 2개씩, 그 이후부터는 4개씩 — 4열 그리드에서 앞 6개만 2칸씩 차지하게 해서 2개씩처럼 보이게 함 */
  .portfolio-grid.portfolio-grid--home {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-bottom: 96px;
    padding: 0 80px;
  }

  .portfolio-grid.portfolio-grid--home .portfolio-card:nth-child(-n+6) {
    grid-column: span 2;
  }

  .home-whatwedo__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* PC: .app의 640px 제한을 뚫고, 메인페이지(.home-top)와 동일한 폭(뷰포트 전체 + 좌우 80px)으로 맞춤 */
@media (min-width: 768px) {
  .how-we-work {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 80px;
  }
}

/* Column(카드뉴스형 연재 콘텐츠) 썸네일 그리드 — 포트폴리오 카드와 달리 호버 오버레이가 아니라
   썸네일 아래에 제목·인트로가 항상 보이는 형태. 메인페이지 미리보기/Column 목록 페이지가 함께 씀.
   모바일 2개씩, PC 4개씩 */
.column-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
  margin: 24px 0 32px;
}

.column-grid-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.column-grid-card__thumb-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.column-grid-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.column-grid-card:hover .column-grid-card__thumb {
  transform: scale(1.04);
}

.column-grid-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
  text-align: left;
}

.column-grid-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
  text-align: left;
}

@media (min-width: 768px) {
  .column-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 24px;
  }

  .column-grid-card__title {
    font-size: 15.5px;
  }
}

/* Column 상세 — 히어로 이미지 아래로 카드(이미지+소제목+본문)를 세로로 큼직하게 나열 */
.column-detail {
  padding: 32px 0 60px;
}

.column-detail__eyebrow {
  text-align: center;
}

.column-detail__hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 24px;
}

.column-detail__title {
  font-size: 28px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px;
  text-align: center;
}

/* 제목 포함 전체 내용(인트로/카드/다른 컬럼 목록)을 전부 가운데 정렬 */
.column-detail__excerpt {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

.column-detail__divider {
  height: 1px;
  background: var(--color-border);
  margin: 32px 0;
}

.column-detail__cards {
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: center;
}

.column-detail__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.column-detail__card-img {
  width: 100%;
  border-radius: 0;
  display: block;
}

.column-detail__card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.column-detail__card-body {
  font-size: 14.5px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
}

/* 자유 서식 본문 — 관리자가 사진을 원하는 위치에 넣고 글자 굵기/크기를 바꿔가며 쓴 그대로 렌더링 */
.column-detail__richbody {
  text-align: center;
  font-size: 14.5px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.column-detail__richbody img {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  margin: 24px auto;
}

.column-detail__richbody h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin: 32px 0 14px;
}

.column-detail__richbody p {
  margin: 0 0 20px;
  white-space: pre-wrap;
}

.column-detail__richbody a {
  color: var(--color-accent);
  text-decoration: underline;
}

.column-detail__richbody > *:first-child {
  margin-top: 0;
}

.column-detail__richbody > *:last-child {
  margin-bottom: 0;
}

.column-detail__other {
  text-align: center;
  margin-bottom: 8px;
}

.column-detail__other-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}

/* 다른 컬럼 썸네일 캐러셀 — 모바일 2개/PC 4개씩 보이고, 카드가 뷰포트 폭에 딱 맞게 스냅되며 넘어감 */
.column-detail__other-carousel {
  display: flex;
  align-items: center;
  gap: 8px;
}

.column-detail__other-track {
  display: flex;
  gap: 12px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  text-align: left;
}

.column-detail__other-track::-webkit-scrollbar {
  display: none;
}

.column-detail__other-card {
  scroll-snap-align: start;
  flex: 0 0 calc(50% - 6px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.column-detail__other-card-thumb-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  background: var(--color-bg);
}

.column-detail__other-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.column-detail__other-card:hover .column-detail__other-card-thumb {
  transform: scale(1.04);
}

.column-detail__other-card--noimage .column-detail__other-card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 12px;
  border-radius: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-align: center;
}

.column-detail__other-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
  text-align: left;
}

.column-detail__other-card:hover .column-detail__other-card-title {
  color: var(--color-accent);
}

.column-detail__other-card-preview {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
}

/* 화살표 버튼은 PC 전용(모바일은 직접 스와이프) */
.column-detail__other-arrow {
  display: none;
}

@media (min-width: 768px) {
  .column-detail {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: 80px;
    padding-right: 80px;
  }

  .column-detail__card-img {
    max-width: 700px;
    margin: 0 auto;
  }

  .column-detail__richbody img {
    max-width: 700px;
  }

  .column-detail__other-card {
    flex: 0 0 calc(25% - 9px);
  }

  .column-detail__other-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }

  .column-detail__other-arrow:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .column-detail__other-arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }
}

/* Ask Us — 방문자 자유 질문 게시판 */
.askus {
  padding: 32px 0 60px;
}

/* PC: 목록(표) 페이지만 메인페이지 풀블리드 섹션들과 동일하게 화면 전체 너비 + 좌우 80px로 맞춤 —
   상세 페이지(.askus-detail)는 글 읽기 화면이라 폭을 넓히지 않고 원래 좁은 폭 그대로 둠 */
@media (min-width: 768px) {
  .askus-list {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: 80px;
    padding-right: 80px;
  }
}

.askus-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 20px 0 32px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.askus-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.askus-status {
  margin: 4px 0 0;
  font-size: 13px;
}

.askus-status--error {
  color: #c0392b;
}

.askus-hero {
  margin: 0 0 24px;
}

.askus-hero__title {
  font-size: 34px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 12px;
}

.askus-hero__subtitle {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.askus-table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
  border-top: 1px solid var(--color-text);
}

.askus-list-footer {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 20px;
}

.askus-write-toggle {
  width: auto;
}

.askus-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.askus-table thead th {
  text-align: left;
  font-weight: 700;
  color: var(--color-text-muted);
  padding: 12px 0 12px 20px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.askus-table thead th.askus-table__col-title {
  padding-left: 10px;
}

/* 글쓴이/작성시간/조회수는 서로 바짝 붙어서 오른쪽 끝에 모여 보이도록 폭을 내용에 맞춰 줄이고 오른쪽 정렬 */
.askus-table__col-author,
.askus-table__col-time,
.askus-table__col-views {
  width: 1%;
  text-align: right;
}

.askus-table__row {
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}

.askus-table__row:hover {
  background: var(--color-surface);
}

.askus-table__row td {
  padding: 14px 0 14px 20px;
  vertical-align: middle;
}

.askus-table td.askus-table__col-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  color: var(--color-text);
  font-weight: 600;
}

.askus-table td.askus-table__col-views {
  padding-right: 10px;
}

.askus-table__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

.askus-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.askus-table__reply-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-accent);
}

.askus-badge-new {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e8543f;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.askus-table__col-author,
.askus-table__col-time,
.askus-table__col-views {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.askus-table__empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 32px 0;
}

.askus-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 0 40px;
  flex-wrap: wrap;
}

.askus-pagination__num,
.askus-pagination__arrow {
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-muted);
}

.askus-pagination__num.is-active {
  color: var(--color-text);
  font-weight: 800;
}

.askus-pagination__arrow {
  color: var(--color-text);
  font-size: 16px;
}

.askus-pagination__arrow:disabled {
  color: var(--color-border);
  cursor: default;
}

/* 목록 하단 "견적 내러 가기"/"무료 디자인 진단"은 위 요소들과 확실히 구분되도록 여백을 더 두고, 화면 크기와 무관하게 항상 가운데로 모아서 배치 */
.askus-cta-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.askus-cta-row .btn {
  width: auto;
  flex: 0 1 auto;
  min-width: 140px;
}

/* PC에서는 좌우 여백(80px)이 넓어서 내용 크기 기준으로 적당히만(약 50% 정도) 커지게 제한 */
@media (min-width: 768px) {
  .askus-cta-row .btn {
    max-width: 210px;
  }
}

.askus-lock-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 13.5px;
}

.askus-lock-notice p {
  margin: 0;
}

.askus-detail__meta {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
}

.askus-detail__contact {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: -8px 0 20px;
}

.askus-detail__body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 28px;
  white-space: pre-wrap;
}

.askus-detail__waiting {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 28px;
}

.askus-reply {
  margin: 0 0 28px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.askus-reply__label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
}

.askus-reply__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text);
  white-space: pre-wrap;
}

.askus-detail__actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.badge--answered {
  background: var(--color-accent);
  color: #fff;
}

/* PC/태블릿에서는 포트폴리오 그리드만 화면 전체 너비로 펼쳐서 핀터레스트 스타일 매스너리로 표시 (견적서/랜딩 등 다른 화면은 --max-width 그대로 유지) */
@media (min-width: 768px) {
  .portfolio-grid {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }

  .portfolio-card {
    display: block;
    width: 100%;
    margin: 0;
  }

  .portfolio-card__thumb-wrap {
    aspect-ratio: 5 / 4;
  }

  .portfolio-card__overlay {
    display: flex;
  }

  .portfolio-card:hover .portfolio-card__thumb {
    filter: blur(8px);
  }

  .portfolio-card:hover .portfolio-card__overlay {
    opacity: 1;
  }

  /* 상단 제목 영역도 그리드와 같은 왼쪽 선에서 시작하도록 동일하게 풀블리드 처리 */
  .portfolio__heading {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 40px;
    text-align: left;
  }
}

/* 모바일: 썸네일 → 설명(제목/태그/텍스트) → 상세 이미지 갤러리 순으로 쌓임.
   맨 위 썸네일이 헤더 바로 아래에 빈틈없이 붙도록 .app의 상단 패딩 48px을 상쇄함 */
.portfolio-detail__layout {
  display: flex;
  flex-direction: column;
  margin-top: -48px;
}

/* 포트폴리오 이미지가 모두 끝난 뒤, 푸터 바로 위에 보여주는 견적내기 버튼 — 다른 버튼들과 같은 기본(파랑) 색상
   order:5 — 모바일에서 .portfolio-detail__right-col이 display:contents라 그 자식들(정보=2, 클라이언트 이미지=4)이
   이 버튼과 같은 flex 컨테이너에 나란히 놓이는데, 이 값이 없으면 기본값 0이 되어 맨 앞으로 밀려남 */
.portfolio-detail__estimate-btn {
  width: 100%;
  margin-top: 32px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  order: 5;
}

.portfolio-detail__estimate-btn:hover {
  background: var(--color-accent-hover);
}

/* 목록으로 돌아가는 원형 아이콘 버튼 — 왼쪽 정렬, 맨 아래(견적내기 버튼 다음)에 위치 */
.portfolio-detail__back-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 20px 0 0 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.portfolio-detail__back-circle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.portfolio-detail__back-circle svg {
  width: 20px;
  height: 20px;
}

/* 모바일에서는 화면 끝까지 꽉 차게(풀블리드), PC에서는 카드처럼 모서리를 둥글게 */
.portfolio-detail__thumb,
.portfolio-detail__image {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  display: block;
}

.portfolio-detail__thumb {
  order: 1;
}

/* 갤러리에 파일 대신 유튜브 영상을 넣었을 때 — 유튜브 표준 비율(16:9)로 고정된 박스 안에 꽉 채워서 재생 */
.portfolio-detail__yt-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.portfolio-detail__yt-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 스크롤로 화면에 들어오면 아래에서 위로 살짝 올라오며 페이드인 */
.scroll-reveal {
  opacity: 0;
  transform: translateY(90px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.portfolio-detail__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--gallery-gap-mobile, 0px);
  margin: 16px 0 0;
  order: 3;
}

/* 모바일에서는 그냥 사라지고, 안에 있는 설명/클라이언트 이미지가 각자 order로 독립적으로 배치됨.
   PC에서는 이 래퍼 자체가 grid-area:info가 되어 설명+클라이언트 이미지가 오른쪽 컬럼 안에서 자연스럽게 쌓임 —
   그래야 왼쪽 갤러리(썸네일/상세 이미지)가 아무리 길어도 그 높이에 밀려 내려가지 않음 */
.portfolio-detail__right-col {
  display: contents;
}

.portfolio-detail__info {
  margin-top: 14px;
  order: 2;
}

/* 클라이언트 요청 이미지 — 모바일에서는 썸네일/설명/상세 갤러리가 모두 끝난 맨 하단에, 마지막 이미지와 50px 간격을 두고 위치 */
.portfolio-detail__client-images {
  margin: 50px 0 0;
  order: 4;
}

.portfolio-detail__client-images-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
}

.portfolio-detail__client-images-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portfolio-detail__client-image {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
  display: block;
  cursor: pointer;
}

/* 카드 그리드용 여백(portfolio-card__service/tags의 좌우 12px 패딩)은 상세 페이지에서는 불필요 —
   제목(wizard__title)과 왼쪽 선을 맞추기 위해 제거 */
.portfolio-detail__info .portfolio-card__service {
  padding-left: 0;
  padding-right: 0;
}

/* 서비스 종류 — 업종/고객사 태그 아래, 항목마다 한 줄씩 왼쪽 정렬 */
.portfolio-detail__services {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 12px;
}

.portfolio-detail__services .portfolio-card__service {
  padding: 0;
}

.portfolio-detail__info .portfolio-card__tags {
  padding-left: 0;
  padding-right: 0;
}

/* 태그 배지 자체의 좌우 padding(8px)과 배경 때문에 "업종" 텍스트가 제목보다 오른쪽에서 시작해 보이던 문제 — 배지 스타일을 없애고 텍스트만 남김 */
.portfolio-detail__info .portfolio-tag {
  padding: 0;
  background: none;
  border-radius: 0;
}

.portfolio-detail__description {
  white-space: pre-wrap;
  margin-top: 12px;
  margin-bottom: 0;
  color: #000;
}

/* PC/태블릿: 왼쪽 컬럼에 대표+상세 이미지가 전부 쌓이고, 오른쪽 컬럼에 설명 전체가 나란히 이어짐 */
@media (min-width: 768px) {
  /* .app의 640px 제한을 뚫고 뷰포트 전체로 펼친 뒤, 안쪽 콘텐츠는 1240px에서 다시 중앙 정렬 */
  .portfolio-detail {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 40px;
  }

  .portfolio-detail__layout {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 모바일에서만 꽉 채우고, PC에서는 버튼이 콘텐츠 너비만큼 길게 늘어나지 않도록 적당한 너비로 고정하고
     전체 폭이 아니라 왼쪽 이미지 컬럼(grid-area: estimatebtn) 안에서만 가운데 정렬 */
  .portfolio-detail__estimate-btn {
    grid-area: estimatebtn;
    display: flex;
    width: 340px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .portfolio-detail__layout {
    display: grid;
    grid-template-columns: 8fr 2fr;
    grid-template-areas: 'thumb info' 'gallery info' 'estimatebtn .';
    align-items: start;
    gap: 16px 25px;
  }

  .portfolio-detail__thumb,
  .portfolio-detail__image {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }

  .portfolio-detail__thumb {
    grid-area: thumb;
  }

  /* 설명 + 클라이언트 요청 이미지를 하나로 묶어 오른쪽 컬럼(grid-area:info)에 배치 —
     왼쪽 갤러리 높이와 무관하게 이 컬럼 안에서만 자연스럽게 세로로 쌓임 */
  .portfolio-detail__right-col {
    display: block;
    grid-area: info;
  }

  .portfolio-detail__info {
    margin-top: 0;
  }

  .portfolio-detail__gallery {
    grid-area: gallery;
    margin-top: 0;
    gap: var(--gallery-gap-desktop, 40px);
  }

  /* PC: 설명 바로 하단에서 20px 떨어져 위치, 폭도 설명과 동일하게 맞춤(같은 컬럼 안에 있으므로 자동으로 일치) */
  .portfolio-detail__client-images {
    margin-top: 20px;
  }

  .portfolio-detail__client-image {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Column 상세 하단 버튼 두 개를 감싸는 행 — 모바일은 세로로 쌓고, PC(768px~)에서는 좌우로 나란히 배치 */
.column-detail__cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

/* Column 상세 하단 버튼 — 포트폴리오 상세와 같은 스타일(.portfolio-detail__estimate-btn)을 그대로 재사용하되,
   포트폴리오 쪽 크기에는 영향을 주지 않도록 이 클래스가 붙은 컬럼 전용 버튼만 크기를 절반으로 줄임.
   .portfolio-detail__estimate-btn의 margin-top/width는 이제 부모 .column-detail__cta-row가 담당하므로 여기서 0으로 되돌림 */
.column-detail__cta-btn {
  display: flex;
  width: 50%;
  margin: 0;
}

/* "무료 디자인 진단" 버튼만 색 채우기 없이 테두리(라인)만 있는 스타일로 오버라이드 */
.column-detail__cta-btn--outline {
  background: none;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.column-detail__cta-btn--outline:hover {
  background: var(--color-accent);
  color: #fff;
}

@media (min-width: 768px) {
  .column-detail__cta-row {
    flex-direction: row;
    justify-content: center;
  }

  .column-detail__cta-btn {
    width: 170px;
  }
}

/* 클라이언트 요청 이미지 클릭 시 배경이 어두워지며 크게 보여주는 팝업 — 배경 클릭 시 닫힘 */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.image-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
}

/* Request form */
.request-form form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0 16px;
}

/* 의뢰 접수 완료 화면에서 선택 사항으로 보여주는 FTP 정보 추가 전달 폼 */
.ftp-followup {
  margin: 28px 0;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.ftp-followup__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
}

.ftp-followup form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.ftp-followup__status {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.form-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.form-input,
.form-textarea {
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-textarea {
  resize: vertical;
  min-height: 90px;
}

.repeatable-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.repeatable-field__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.repeatable-field__row .form-input {
  flex: 1;
}

.repeatable-field__remove {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.repeatable-field__remove:hover {
  border-color: var(--color-accent-hover);
  color: var(--color-accent-hover);
}

/* 위저드 텍스트 입력 질문(예: 경쟁 브랜드 링크)에 이미지를 붙여넣었을 때(Ctrl+V) 보여주는 미리보기 —
   :not([hidden])로 감싸지 않으면 이 규칙의 display:flex가 [hidden] 기본 규칙(display:none)보다
   우선 적용돼서 hidden 속성을 줘도 계속 보이는 문제가 생김 */
.paste-image-preview:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.paste-image-preview__img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

.paste-image-preview__remove {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12.5px;
  padding: 6px 14px;
  cursor: pointer;
}

.paste-image-preview__remove:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--add-field {
  align-self: flex-start;
  width: auto;
  margin-top: 8px;
  padding: 8px 16px;
  font-size: 13px;
}

.status-error {
  color: var(--color-accent-hover) !important;
}

/* index.html(랜딩/의뢰 완료)과 consult.html(상담 추가 질문지)은 css/admin.css를 불러오지 않아서,
   같은 이름의 안내 문구 클래스를 여기에도 둠 — admin.css의 .admin-error와 스타일을 동일하게 맞춤 */
.admin-error {
  color: var(--color-accent-hover);
  font-size: 13px;
  margin-top: 12px;
}

@media (min-width: 480px) {
  .landing__title {
    font-size: 32px;
  }
}

/* AI 견적 진단 — 서비스 선택 화면 상단에 항상 보이는 입력 영역(팝업 없이 같은 자리에서 입력→결과) */
.ai-diagnose-inline {
  padding: 18px;
  margin-bottom: 20px;
  border: 1.5px dashed var(--color-accent);
  border-radius: var(--radius);
  background: #eaf1fc;
}

.ai-diagnose-inline__label {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent-hover);
}

.ai-diagnose-inline__hint {
  font-weight: 500;
  opacity: 0.75;
}

.ai-diagnose-inline .form-field {
  margin-bottom: 12px;
}

.ai-diagnose-inline .btn {
  width: auto;
}

.ai-diagnose-inline__result {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #c9dcf5;
}

.ai-result__title {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px;
}

.ai-result__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 20px;
}

.ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.ai-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.ai-tag--industry {
  background: #eaf1fc;
  border-color: #c9dcf5;
  color: var(--color-accent-hover);
}

/* AI 진단이 문장만으로 확신하지 못할 때(예: "배너") 직접 골라달라고 보여주는 확인 질문 카드 */
.ai-question {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.ai-question__title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
}

.ai-question__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-question .option-card {
  width: 100%;
  text-align: left;
}