/* 전자48 하위 페이지용 부품. 색·글자·간격은 모두 tokens.css 값을 쓴다. */

/* ---------- 페이지 머리 ---------- */
.page-head {
  padding-block: var(--space-xl);
  background: var(--color-paper-2);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}
.crumbs { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.4; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.crumbs span[aria-hidden] { margin-inline: var(--space-xs); }
.page-head__title {
  margin-top: var(--space-sm);
  font-size: clamp(1.75rem, 2.2vw + 1.1rem, 2.75rem);
  line-height: var(--lh-heading);
}
.page-head .lede { max-width: var(--measure); }
.page-head__meta { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- 구역 ---------- */
.section { padding-block: var(--space-2xl); }
.section--tint { background: var(--color-paper-2); }
.section--rule { border-top: var(--rule-hair) solid var(--color-rule); }
.section .lede { max-width: var(--measure); }
.section__body { margin-top: var(--space-lg); }
.text p { max-width: var(--measure); color: var(--color-ink-2); }
.text p + p { margin-top: var(--space-md); }

.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }

/* 옆에 붙는 안내 상자 */
.aside {
  padding: var(--space-lg);
  background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
}
.aside + .aside { margin-top: var(--space-md); }
.aside h2, .aside h3 { font-size: var(--text-md); line-height: var(--lh-heading); letter-spacing: -0.01em; }
.aside p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.aside .facts { margin-top: var(--space-md); }
.aside .facts li { font-weight: 400; }
.aside__actions { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }

/* 두 칸짜리 줄 목록 (매입가 요소, 사업자 정보) */
.ways--two .ways__row dd { grid-column: auto; }

/* ---------- 자주 묻는 질문 ---------- */
.faq { border-top: 2px solid var(--color-ink); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--size-control);
  padding-block: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--color-accent); font-size: var(--text-lg); font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--color-accent); }
.faq details p { max-width: var(--measure); padding-bottom: var(--space-md); color: var(--color-ink-2); }
.faq-group + .faq-group { margin-top: var(--space-2xl); }
.faq-group h2 { font-size: var(--text-lg); line-height: var(--lh-heading); margin-bottom: var(--space-sm); }

/* ---------- 가이드 목록 (제목 + 한 줄 요약) ---------- */
.reads { border-top: 2px solid var(--color-ink); }
.reads a {
  display: block;
  padding-block: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-decoration: none;
}
.reads strong { display: block; font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; line-height: 1.5; }
.reads span { display: block; max-width: var(--measure); margin-top: var(--space-2xs); color: var(--color-ink-2); }
.reads small { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.reads a:hover strong { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- 작은 링크 묶음 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-xl);
  padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.chips a:hover { border-color: var(--color-ink-2); color: var(--color-accent); }

/* ---------- 사진 타일 (매입 품목) ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 7rem;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  text-decoration: none;
}
.tile strong { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; line-height: 1.4; }
.tile span { margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; }
.tile:hover { border-color: var(--color-ink-2); }
.tile:hover strong { color: var(--color-accent); }
.tile--wide { grid-column: 1 / -1; }
.tile--photo { min-height: 13rem; padding: 0; border: 0; background: var(--color-ink); }
.tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--photo .tile__text {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-2xl) var(--space-md) var(--space-md);
  background: linear-gradient(transparent, oklch(21% 0.035 262 / 0.85));
}
.tile--photo strong, .tile--photo:hover strong { color: var(--color-accent-ink); }
.tile--photo span { color: oklch(96% 0.010 250 / 0.9); }

/* ---------- 본문 글 ---------- */
.prose { max-width: var(--measure); margin-inline: auto; font-size: var(--text-md); line-height: 1.85; color: var(--color-ink-2); }
.prose h2 { margin-top: var(--space-2xl); color: var(--color-ink); font-size: var(--text-xl); line-height: var(--lh-heading); }
.prose h3 { margin-top: var(--space-xl); color: var(--color-ink); font-size: var(--text-lg); line-height: var(--lh-heading); }
.prose p, .prose ul, .prose ol, .prose table { margin-top: var(--space-md); }
.prose ul { list-style: disc; padding-left: var(--space-lg); }
.prose ol { list-style: decimal; padding-left: var(--space-lg); }
.prose li + li { margin-top: var(--space-xs); }
.prose strong { color: var(--color-ink); }
.prose a { color: var(--color-accent); font-weight: 600; text-underline-offset: 0.2em; }
.prose a:hover { color: var(--color-accent-strong); }
.prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; border-top: 2px solid var(--color-ink); font-size: var(--text-base); }
.prose th, .prose td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: top; }
.prose th { color: var(--color-ink); font-weight: 700; white-space: nowrap; }
.prose code { padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius-sm); background: var(--color-paper-3); color: var(--color-ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.9em; }
.summary {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--color-accent);
  background: var(--color-paper-2);
}
.summary strong { display: block; color: var(--color-accent); font-size: var(--text-sm); }
.summary p { margin-top: var(--space-2xs); color: var(--color-ink); font-weight: 500; }

.note {
  max-width: var(--measure);
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-mark);
  background: var(--color-surface);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ---------- 견적 문의 폼 ---------- */
.form { margin-top: 0; }
.form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.field__help { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.field__help a { color: var(--color-accent); font-weight: 600; text-underline-offset: 0.2em; white-space: nowrap; }
textarea.field__control { height: auto; min-height: 6rem; padding-block: var(--space-sm); line-height: 1.6; resize: vertical; }
select.field__control { cursor: pointer; }
.form__preview {
  min-height: 7rem;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  white-space: pre-wrap;
  line-height: 1.7;
}
.form__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); align-items: center; }
.form__copied { color: var(--color-accent); font-size: var(--text-sm); font-weight: 700; }

.map iframe { display: block; width: 100%; height: 26rem; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); }

.art { max-width: 24rem; margin-inline: auto; }

@media (min-width: 40rem) {
  .ways--two .ways__row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
  .form__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__actions { display: flex; flex-wrap: wrap; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
  .tile--wide { grid-column: span 2; }
  .tile--photo { min-height: 16rem; }
}

@media (min-width: 60rem) {
  .page-head { padding-block: var(--space-2xl) var(--space-xl); }
  .section { padding-block: var(--space-3xl); }
  .cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
  .cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .cols--side { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .ways--two .ways__row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
  .art { max-width: none; margin-inline: 0; }
}