/* ==========================================================================
   Service page — 다우오피스 브랜드스토리 레퍼런스 기반 클론
   (원본 디자인 토큰 보존: radius, shadow, typography, spacing)
   accent 컬러만 webpio primary(#2459E5)로 치환
   ========================================================================== */

:root {
  --svc-primary:        #2459E5;
  --svc-primary-hover:  #1A45C0;
  --svc-accent-mint:    #00C3E0;
  --svc-accent-purple:  #C271F3;
  --svc-accent-green:   #0AC943;
  --svc-text:           #333333;
  --svc-text-soft:      #6B6B6B;
  --svc-text-muted:     #9C9FA3;
  --svc-surface-light:  #F5F6F8;
  --svc-border:         #DEDEE2;
  --svc-border-light:   #EFF0F2;
}

/* 공통 컨테이너 */
.svc-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 섹션 래퍼 */
.svc-section {
  padding: 110px 0;
}
.svc-section--gray { background: var(--svc-surface-light); }

/* 섹션 헤더 (eyebrow + 타이틀 + 설명) */
.svc-head { margin-bottom: 64px; }
.svc-head--center { text-align: center; }
.svc-point {
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  color: var(--svc-primary);
  letter-spacing: -0.04em;
  margin-bottom: 14px;
}
.svc-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--svc-text);
  line-height: 1.3;
  letter-spacing: -0.04em;
}
.svc-title .sub {
  display: block;
  font-size: 44px;
  font-weight: 300;
}
.svc-desc {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--svc-text-soft);
  letter-spacing: -0.02em;
}

/* ============================================================
   PROMO CARDS (Section 2 스타일) — 3 약속
   ============================================================ */
.svc-promo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.svc-promo__card {
  display: block;
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 3px 6px rgba(25, 25, 25, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.svc-promo__card:hover {
  transform: translateY(-4px);
  box-shadow: 2px 10px 24px rgba(25, 25, 25, 0.12);
}
.svc-promo__thumb {
  aspect-ratio: 16/9;
  border-radius: 14px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-promo__thumb--blue   { background: linear-gradient(135deg, #DBE7FF 0%, #A9C1FF 100%); }
.svc-promo__thumb--mint   { background: linear-gradient(135deg, #D9F7FC 0%, #88E3F2 100%); }
.svc-promo__thumb--purple { background: linear-gradient(135deg, #ECE1FE 0%, #C9A8FA 100%); }
.svc-promo__thumb svg { width: 56px; height: 56px; color: #fff; }
.svc-promo__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.svc-promo__label {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.svc-promo__label--core   { color: var(--svc-accent-mint);   background: #E1FBFF; }
.svc-promo__label--purple { color: var(--svc-accent-purple); background: #F9F1FE; }
.svc-promo__label--green  { color: var(--svc-accent-green);  background: #E7FAEC; }

.svc-promo__tit {
  font-size: 22px;
  font-weight: 700;
  color: var(--svc-text);
  line-height: 1.45;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.svc-promo__desc {
  font-size: 15px;
  color: var(--svc-text-soft);
  line-height: 1.65;
  letter-spacing: -0.02em;
}
.svc-promo__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--svc-primary);
  letter-spacing: -0.02em;
}
.svc-promo__link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.svc-promo__card:hover .svc-promo__link svg { transform: translateX(3px); }

/* ============================================================
   FEATURE ROWS (Section 4 스타일) — 좌우 교대 4개
   ============================================================ */
.svc-features { display: flex; flex-direction: column; gap: 80px; }
.svc-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.svc-feature--reverse .svc-feature__visual { order: 2; }
.svc-feature--reverse .svc-feature__text   { order: 1; }

.svc-feature__text h3 {
  font-size: 36px;
  font-weight: 700;
  color: var(--svc-text);
  line-height: 1.3;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}
.svc-feature__text p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--svc-text-soft);
  letter-spacing: -0.02em;
}
.svc-feature__chip {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(36, 89, 229, 0.08);
  color: var(--svc-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.svc-feature__visual {
  aspect-ratio: 4/3;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(15, 18, 32, 0.08);
}
.svc-feature__visual--a { background: linear-gradient(135deg, #E8EEFD 0%, #C2D3FC 100%); }
.svc-feature__visual--b { background: linear-gradient(135deg, #FFE4D9 0%, #FFC0B1 100%); }
.svc-feature__visual--c { background: linear-gradient(135deg, #D9F7FC 0%, #8CE1F1 100%); }
.svc-feature__visual--d { background: linear-gradient(135deg, #EFE4FC 0%, #CFB0F8 100%); }
.svc-feature__visual svg { width: 120px; height: 120px; color: rgba(255, 255, 255, 0.9); }
.svc-feature__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   INDUSTRY TABS (Section 5 스타일) — pill 배경 + 탭 + 패널
   ============================================================ */
.svc-scale {
  background: var(--svc-surface-light);
  border-radius: 32px;
  padding: 64px 56px;
}
.svc-scale__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.svc-scale__tab {
  padding: 12px 24px;
  border-radius: 999px;
  background: #fff;
  color: var(--svc-text-soft);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  border: 1px solid var(--svc-border-light);
  cursor: pointer;
  transition: all 0.2s ease;
}
.svc-scale__tab:hover { color: var(--svc-primary); border-color: var(--svc-primary); }
.svc-scale__tab.is-active {
  background: var(--svc-primary);
  color: #fff;
  border-color: var(--svc-primary);
}

.svc-scale__panel { display: none; }
.svc-scale__panel.is-active { display: block; }

.svc-scale__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 40px;
  background: #fff;
  border-radius: 20px;
  padding: 40px 48px;
}
.svc-scale__row {
  display: flex;
  gap: 18px;
  padding: 14px 0;
}
.svc-scale__row--main {
  grid-column: 1 / -1;
  background: rgba(36, 89, 229, 0.05);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 8px;
}
.svc-scale__num {
  font-family: 'Urbanist', var(--font-sans, 'Pretendard', sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--svc-text-muted);
  letter-spacing: 0.06em;
  width: 44px;
  flex-shrink: 0;
}
.svc-scale__row--main .svc-scale__num { color: var(--svc-primary); }
.svc-scale__text {
  font-size: 15px;
  color: var(--svc-text);
  letter-spacing: -0.02em;
}
.svc-scale__row--main .svc-scale__text { font-weight: 700; }

/* ============================================================
   PRICING CARDS (Section 7 스타일)
   ============================================================ */
.svc-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.svc-pricing__card {
  background: #fff;
  border: 1px solid var(--svc-border-light);
  border-radius: 20px;
  padding: 44px 36px;
  position: relative;
  box-shadow: 0 12px 32px rgba(15, 18, 32, 0.08), 0 2px 6px rgba(15, 18, 32, 0.04);
}
.svc-pricing__card--primary {
  background: #0F1220;
  color: #fff;
  border-color: #0F1220;
  box-shadow: 0 16px 40px rgba(15, 18, 32, 0.22), 0 4px 10px rgba(15, 18, 32, 0.12);
}
.svc-pricing__badge {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--svc-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.svc-pricing__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--svc-text-muted);
  letter-spacing: 0.04em;
}
.svc-pricing__card--primary .svc-pricing__label { color: rgba(255, 255, 255, 0.5); }
.svc-pricing__price {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.svc-pricing__price strong {
  font-family: 'Urbanist', var(--font-sans, 'Pretendard', sans-serif);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--svc-text);
}
.svc-pricing__card--primary .svc-pricing__price strong { color: #fff; }
.svc-pricing__price span { font-size: 15px; color: var(--svc-text-muted); }
.svc-pricing__sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--svc-text-muted);
}
.svc-pricing__list {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--svc-border-light);
  list-style: none;
  padding-left: 0;
}
.svc-pricing__card--primary .svc-pricing__list { border-top-color: rgba(255, 255, 255, 0.12); }
.svc-pricing__list li {
  padding: 7px 0;
  font-size: 14px;
  color: var(--svc-text-soft);
  letter-spacing: -0.02em;
  display: flex;
  gap: 8px;
}
.svc-pricing__card--primary .svc-pricing__list li { color: rgba(255, 255, 255, 0.75); }
.svc-pricing__list li::before {
  content: '✓';
  color: var(--svc-primary);
  font-weight: 700;
}

/* ============================================================
   FAQ (Section 8 스타일) — details 아코디언
   ============================================================ */
.svc-qna { max-width: 900px; margin: 0 auto; }
.svc-qna details {
  border-bottom: 1px solid var(--svc-border-light);
  interpolate-size: allow-keywords;
}
.svc-qna details summary {
  list-style: none;
  cursor: pointer;
  padding: 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 22px;
  font-weight: 700;
  color: var(--svc-text);
  letter-spacing: -0.03em;
  transition: color 0.3s ease;
}
.svc-qna details summary:hover { color: var(--svc-primary); }
.svc-qna details summary::-webkit-details-marker { display: none; }
.svc-qna details summary::after {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' stroke='%239C9FA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.35s cubic-bezier(0.25, 0.9, 0.3, 1);
}
.svc-qna details[open] summary::after { transform: rotate(180deg); }
.svc-qna details .answer {
  padding-bottom: 30px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--svc-text-soft);
  letter-spacing: -0.02em;
}

/* 열림/닫힘 트랜지션 — ::details-content 기반 */
.svc-qna details::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    content-visibility 0.35s allow-discrete,
    block-size 0.35s cubic-bezier(0.25, 0.9, 0.3, 1),
    opacity 0.3s ease;
}
.svc-qna details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* ::details-content 미지원 브라우저 폴백 (Firefox 등) */
@supports not selector(::details-content) {
  .svc-qna details[open] .answer {
    animation: svc-qna-open 0.35s cubic-bezier(0.25, 0.9, 0.3, 1) both;
  }
  @keyframes svc-qna-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 999px) {
  .svc-section { padding: 72px 0; }
  .svc-title { font-size: 34px; }
  .svc-title .sub { font-size: 30px; }
  .svc-promo { grid-template-columns: 1fr; gap: 20px; }
  .svc-feature { grid-template-columns: 1fr; gap: 28px; }
  .svc-feature--reverse .svc-feature__visual { order: 0; }
  .svc-feature--reverse .svc-feature__text { order: 0; }
  .svc-feature__text h3 { font-size: 26px; }
  .svc-scale { padding: 36px 24px; border-radius: 24px; }
  .svc-scale__grid { padding: 28px 24px; grid-template-columns: 1fr; }
  .svc-scale__row--main { grid-column: 1; }
  .svc-pricing { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .svc-head { margin-bottom: 40px; }
  .svc-title { font-size: 28px; }
  .svc-title .sub { font-size: 24px; }
  .svc-point { font-size: 16px; }
  .svc-promo__card { padding: 28px 24px; }
  .svc-feature__text h3 { font-size: 22px; }
  .svc-qna details summary { font-size: 18px; padding: 24px 0; }
  .svc-qna details .answer { font-size: 15px; padding-bottom: 24px; }
}

/* ============================================================
   PROMISE MODAL
   ============================================================ */
.svc-modal {
  border: none;
  padding: 0;
  border-radius: 24px;
  background: #fff;
  max-width: 560px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 64px);
  box-shadow: 0 24px 80px rgba(15, 18, 32, 0.28);
  overflow: hidden;
  margin: auto;
}
.svc-modal::backdrop {
  background: rgba(15, 18, 32, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.svc-modal[open] {
  animation: svcModalIn 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes svcModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.svc-modal__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.svc-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A1F2E;
  box-shadow: 0 2px 8px rgba(15, 18, 32, 0.12);
  transition: transform 0.15s ease, background 0.15s ease;
}
.svc-modal__close:hover { transform: scale(1.05); background: #fff; }
.svc-modal__close svg { width: 18px; height: 18px; }

.svc-modal__visual {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.svc-modal__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.svc-modal__body { padding: 28px 32px 32px; }
.svc-modal__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--svc-text);
  letter-spacing: -0.03em;
  line-height: 1.35;
  margin: 12px 0;
}
.svc-modal__lead {
  font-size: 15px;
  color: var(--svc-text-soft);
  line-height: 1.7;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.svc-modal__section + .svc-modal__section { margin-top: 22px; }
.svc-modal__heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--svc-text-muted);
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.svc-modal__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-modal__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.6;
  color: var(--svc-text);
  letter-spacing: -0.02em;
}
.svc-modal__bullet {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--bullet-bg, #EEF1F8);
  color: var(--bullet-fg, #1A1F2E);
  margin-top: 2px;
}
.svc-modal--blue   .svc-modal__bullet { --bullet-bg: #E1ECFE; --bullet-fg: #2459E5; }
.svc-modal--mint   .svc-modal__bullet { --bullet-bg: #DEF7EA; --bullet-fg: #0AC943; }
.svc-modal--purple .svc-modal__bullet { --bullet-bg: #F2E8FE; --bullet-fg: #A85DDF; }
.svc-modal__text { flex: 1; }

.svc-modal__actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #EEF0F4;
}
.svc-modal__cta {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 12px;
  background: var(--svc-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background 0.15s ease;
}
.svc-modal__cta:hover { background: var(--svc-primary-hover); color: #fff; }
.svc-modal__dismiss {
  height: 50px;
  padding: 0 22px;
  border: 1px solid var(--svc-border);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--svc-text);
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background 0.15s ease;
}
.svc-modal__dismiss:hover { background: var(--svc-surface-light); }

@media (max-width: 640px) {
  .svc-modal { width: calc(100% - 24px); max-height: calc(100vh - 32px); border-radius: 20px; }
  .svc-modal__inner { max-height: calc(100vh - 32px); }
  .svc-modal__body { padding: 24px 22px 26px; }
  .svc-modal__title { font-size: 22px; }
  .svc-modal__actions { flex-direction: column-reverse; }
  .svc-modal__dismiss { width: 100%; padding: 0; }
}