:root {
  --ink: #101820;
  --red: #e1251b;
  --muted: #545c66;
  --line: #e2e8f0;
  --content-width: 1200px;
  --font: "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

.site-header {
  height: 80px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner,
.content-wrap,
.footer-inner { width: min(var(--content-width), calc(100% - 48px)); margin: 0 auto; }

.header-inner { height: 80px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }

.brand { display: inline-flex; align-items: center; width: max-content; gap: 4px; }
.brand-copy { display: flex; flex-direction: column; gap: 1px; line-height: 1; letter-spacing: -.7px; }
.brand-copy strong { font-size: 19px; font-weight: 800; }
.brand-copy small { font-size: 7px; font-family: Arial, sans-serif; font-weight: 700; letter-spacing: -.05px; }

.main-nav { display: flex; align-items: center; gap: 20px; }
.main-nav a { padding: 10px; border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: -.35px; transition: .2s ease; }
.main-nav a:hover, .main-nav a.is-active { background: #f5f6f7; }

.header-links { justify-self: end; display: flex; align-items: center; }
.header-links a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; font-size: 14px; font-weight: 700; }
.header-links img { display: block; width: 16px; height: 16px; }
.mobile-menu-toggle { display: none; }
.mobile-menu-drawer[hidden] { display: none; }

.mobile-menu-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, .5);
}

.mobile-menu-panel {
  width: min(360px, calc(100% - 33px));
  min-height: 100%;
  overflow-y: auto;
  background: #fff;
}

.mobile-menu-panel:focus { outline: 0; }

.mobile-menu-panel-header {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 14px;
}

.mobile-menu-drawer-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
}

.mobile-menu-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 10px;
  border-top: 1px solid #e5e8ee;
}

.mobile-menu-card {
  width: 104px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
}

.mobile-menu-card > img { display: block; flex: 0 0 40px; }
.mobile-menu-card > span { display: flex; flex-direction: column; align-items: flex-start; }
.mobile-menu-card strong { color: var(--ink); font-size: 16px; line-height: 1.2; font-weight: 700; letter-spacing: -.4px; white-space: nowrap; }
.mobile-menu-card small { color: var(--red); font-size: 11px; line-height: 1.2; font-weight: 700; letter-spacing: -.275px; white-space: nowrap; }
.mobile-menu-card:hover { border-color: var(--red); }
.mobile-menu-toggle:focus-visible, .mobile-menu-drawer-close:focus-visible, .mobile-menu-card:focus-visible { outline: 3px solid #8fb9ff; outline-offset: 3px; }
body.mobile-menu-is-open { overflow: hidden; }

.section { padding: 80px 0; }
.section-heading { display: flex; flex-direction: column; gap: 10px; }
.section-heading h1,
.section-heading h2 { margin: 0; color: var(--ink); font-size: 40px; line-height: 1.2; font-weight: 800; letter-spacing: -1px; }
.section-heading h1 em { color: var(--red); font-style: normal; }
.section-heading p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; letter-spacing: -.4px; }

.services .content-wrap { display: flex; flex-direction: column; gap: 30px; }
.all-services-link { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px; border: 1px solid #e0e0e0; border-radius: 10px; background: #f8fafc; }
.all-services-link { width: 100%; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.all-services-link span { display: flex; flex-direction: column; gap: 4px; }
.all-services-link strong { font-size: 16px; letter-spacing: -.4px; }
.all-services-link small { color: #555; font-size: 14px; letter-spacing: -.35px; }
.all-services-link img { width: 20px; height: 20px; }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.service-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 0; transition: border-color .2s ease, box-shadow .2s ease; }
.service-card:hover, .service-card:focus-within { border-color: var(--red); box-shadow: 0 18px 40px rgba(16,24,32,.08); }
.service-card-main { min-height: 166px; height: calc(100% - 42px); display: flex; gap: 20px; padding: 20px; background: #f5f6f8; }
.service-card:hover .service-card-main, .service-card:focus-within .service-card-main { background: #fff; }
.service-card-copy { min-width: 0; flex: 1; }
.service-card h2 { margin: 0 0 10px; font-size: 24px; line-height: 1.2; letter-spacing: -.6px; font-weight: 800; }
.service-card p { min-height: 42px; margin: 0; overflow: hidden; color: #5d6570; font-size: 14px; line-height: 1.5; letter-spacing: -.35px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tag-list span { padding: 2px 4px; border: 1px solid #e0e0e0; border-radius: 4px; background: #fff; color: #555; font-size: 12px; line-height: 16px; letter-spacing: -.3px; white-space: nowrap; }
.service-orb { flex: 0 0 80px; width: 80px; height: 80px; margin-top: 0; border-radius: 50%; background: #ddd; }
.orb-live { background: #dadce0; }.orb-class { background: #dadada; }.orb-pass { background: #d9d9d9; }.orb-platform { background: #d6d6d6; }
.card-link { display: flex; align-items: center; justify-content: flex-end; height: 42px; padding: 10px; color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: -.3px; transition: background-color .2s ease, color .2s ease; }
.card-arrow { position: relative; display: block; width: 20px; height: 20px; }
.card-arrow img { position: absolute; inset: 0; display: block; width: 20px; height: 20px; }
.card-arrow-light { display: none !important; }
.service-card:hover .card-link, .service-card:focus-within .card-link { background: var(--red); color: #fff; }
.service-card:hover .card-arrow-dark, .service-card:focus-within .card-arrow-dark { display: none; }
.service-card:hover .card-arrow-light, .service-card:focus-within .card-arrow-light { display: block !important; }

.careers { background: #f7f8ff; }
.careers .content-wrap { display: flex; flex-direction: column; gap: 30px; }
.recruit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.recruit-card { min-height: 230px; display: flex; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden; padding: 24px; border: 1px solid #e7e9ec; border-radius: 10px; }
.recruit-card--mint { background: #c7e4e6; }.recruit-card--lavender { background: #f1f1f8; }
.recruit-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; }
.recruit-label { display: inline-flex; padding: 4px 12px 5px; border-radius: 999px; background: #fff; color: var(--red); font-size: 16px; font-weight: 800; line-height: 1.1; letter-spacing: -.4px; }
.recruit-card h3 { margin: 0; font-size: 30px; line-height: 1.22; font-weight: 800; letter-spacing: -.75px; white-space: nowrap; }
.recruit-card p { margin: 0; font-size: 20px; letter-spacing: -.5px; }
.apply-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -.4px; }
.apply-button b { font-size: 17px; line-height: 1; }
.recruit-image { flex: 0 0 150px; width: 150px; height: 150px; overflow: hidden; border-radius: 50%; background: #fff; }
.recruit-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.faq { background: #fff; }
.faq-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; }
.faq-intro { display: flex; flex-direction: column; gap: 30px; }
.faq-search { width: 250px; display: flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid #e2e7f0; border-radius: 999px; background: #f4f6fa; }
.faq-search img { width: 18px; height: 20px; }
.faq-search input { width: 100%; min-width: 0; padding: 1px 2px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; letter-spacing: -.4px; }
.faq-search input::placeholder { color: #66738f; opacity: 1; }
.faq-content { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 30px; }
.faq-list { width: 100%; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-trigger { width: 100%; min-height: 46px; display: grid; grid-template-columns: auto auto minmax(0,1fr) 20px; align-items: center; gap: 10px; padding: 13px 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.question-mark { color: var(--red); font-size: 16px; line-height: 1; font-weight: 800; }
.faq-brand { padding: 4px 10px; border-radius: 999px; background: #f7f7f7; color: #555; font-size: 12px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; }
.faq-trigger strong { overflow: hidden; font-size: 16px; letter-spacing: -.4px; text-overflow: ellipsis; white-space: nowrap; }
.faq-trigger img { width: 20px; height: 20px; transition: transform .2s ease; }
.faq-item.is-open .faq-trigger img { transform: rotate(90deg); }
.faq-answer { display: none; margin: 0 0 14px; padding: 20px; border-radius: 10px; background: var(--line); }
.faq-item.is-open .faq-answer { display: block; }
.faq-answer p { margin: 0 0 10px; color: var(--ink); font-size: 16px; line-height: 1.45; letter-spacing: -.4px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer > img { display: block; width: 100%; aspect-ratio: 693 / 690; object-fit: cover; }
.faq-all-button { display: inline-flex; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: -.35px; }
.faq-all-button img { width: 14px; height: 14px; }
.faq-item.is-hidden { display: none; }

/* FAQ detail page */
.faq-page { background: #fff; }
.faq-page-content { display: flex; flex-direction: column; gap: 30px; }
.faq-page-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.faq-page-search { width: 400px; height: 50px; display: flex; align-items: stretch; overflow: hidden; border: 1px solid #e2e7f0; border-radius: 999px; background: #f4f6fa; }
.faq-page-search input { min-width: 0; flex: 1; padding: 0 14px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; letter-spacing: -.4px; }
.faq-page-search input::placeholder { color: #66738f; opacity: 1; }
.faq-page-search button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border: 0; background: var(--ink); color: #fff; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: -.35px; }
.faq-page-search button img { display: block; }
.faq-page-results { display: flex; flex-direction: column; gap: 30px; }
.faq-page-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.faq-page-list .faq-item { min-width: 0; }
.faq-page-list .faq-item.is-open { display: flex; flex-direction: column; gap: 10px; }
.faq-page-list .faq-answer { margin-bottom: 14px; }
.faq-page-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; }
.faq-page-pagination button { height: 32px; min-width: 32px; display: inline-grid; place-items: center; padding: 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 1; }
.faq-page-pagination .faq-pagination-arrow { border: 1px solid #e0e0e0; }
.faq-page-pagination .faq-pagination-arrow img { display: block; }
.faq-page-pagination .faq-pagination-number { min-width: 36px; padding-right: 14px; padding-left: 14px; }
.faq-page-pagination .is-current { background: var(--ink); color: #fff; font-weight: 600; }
.faq-page-search button:focus-visible, .faq-page-pagination button:focus-visible { outline: 3px solid #8fb9ff; outline-offset: 3px; }

.site-footer { background: #fff; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; padding: 30px 0; }
.footer-info { max-width: 840px; color: #999; }
.footer-menu { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 10px; font-size: 14px; font-weight: 700; letter-spacing: -.35px; }
.footer-info p { margin: 0; font-size: 12px; line-height: 1.45; letter-spacing: -.3px; }
.family-site { position: relative; flex: 0 0 224px; }
.family-site button { width: 224px; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border: 1px solid #e0e0e0; border-radius: 999px; background: #f0f0f0; box-shadow: 0 1px 2px rgba(0,0,0,.1); color: #777; font-size: 14px; font-weight: 700; letter-spacing: -.35px; }
.family-site button span { color: var(--ink); font-size: 20px; line-height: 1; transform: translateY(-2px); }
.family-site ul { display: none; position: absolute; right: 0; bottom: 48px; width: 224px; margin: 0; padding: 6px; border: 1px solid #e0e0e0; border-radius: 12px; list-style: none; background: #fff; box-shadow: 0 8px 24px rgba(16,24,32,.12); }
.family-site.is-open ul { display: block; }
.family-site li a { display: block; padding: 9px 12px; border-radius: 8px; color: #555; font-size: 13px; }
.family-site li a:hover { background: #f5f6f7; color: var(--ink); }

/* Full-screen service finder */
.services-modal[hidden] { display: none; }
.services-modal { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: #fff; color: var(--ink); }
.services-modal-header { flex: 0 0 81px; height: 81px; border-bottom: 1px solid #e0e0e0; background: #fff; }
.services-modal-header-inner { width: min(var(--content-width), calc(100% - 48px)); height: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; }
.services-modal-header h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.4px; }
.services-modal-close { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); }
.modal-nav-item:focus-visible, .modal-related-link:focus-visible, .modal-site-link:focus-visible { outline: 3px solid #8fb9ff; outline-offset: 3px; }
.services-modal-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; background: #fff; }
.services-modal-workspace { width: min(var(--content-width), calc(100% - 48px)); min-height: 100%; display: grid; grid-template-columns: 232px minmax(0, 1fr); margin: 0 auto; }
.services-modal-nav { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; padding: 20px 14px; border-right: 1px solid #e0e0e0; background: #fff; }
.modal-nav-item { width: 100%; min-height: 61px; display: flex; align-items: center; gap: 10px; padding: 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; }
.modal-nav-item[aria-current="true"] { background: #e2e8f0; }
.modal-nav-item:hover { background: #f5f6f8; }
.modal-nav-item[aria-current="true"]:hover { background: #e2e8f0; }
.modal-small-logo { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: #fff; }
.modal-small-logo--campus { border: .6px solid #e0e0e0; color: #182948; font-family: "Malgun Gothic", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: -.68px; }
.modal-small-logo--campus b { color: #ff6b35; }
.modal-nav-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.modal-nav-copy strong { overflow: hidden; font-size: 16px; font-weight: 800; letter-spacing: -.4px; text-overflow: ellipsis; white-space: nowrap; }
.modal-nav-copy small { color: #555; font-size: 12px; letter-spacing: -.3px; white-space: nowrap; }
.services-modal-list { min-width: 0; padding: 0 20px 60px; }
.modal-service-group { scroll-margin-top: 20px; }
.modal-service-header { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--ink); }
.modal-service-heading { min-width: 0; display: flex; align-items: center; gap: 10px; }
.modal-brand-logo { flex: 0 0 60px; width: 60px; height: 60px; display: grid; place-items: center; border: 1.2px solid #e0e0e0; border-radius: 12px; background: #fff; color: #182948; font-family: "Malgun Gothic", sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -1.37px; }
.modal-brand-logo b { color: #ff6b35; }
.modal-brand-logo--campus { border: 0; background: transparent; }
.modal-service-heading h3 { margin: 0 0 4px; overflow: hidden; font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.75px; text-overflow: ellipsis; white-space: nowrap; }
.modal-service-heading p { margin: 0; color: #555; font-size: 14px; letter-spacing: -.35px; }
.modal-site-link { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 10px 14px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.35px; white-space: nowrap; }
.modal-related { padding: 20px 0; }
.modal-related h4 { margin: 0 0 10px; font-size: 16px; line-height: 1.2; font-weight: 800; letter-spacing: -.4px; }
.modal-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
.modal-related-link { min-width: 0; height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; border-bottom: 1px solid #e2e8f0; color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -.4px; }
.modal-related-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-related-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.modal-related-link img { flex: 0 0 auto; }
body.modal-is-open { overflow: hidden; }

@media (max-width: 1250px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .recruit-card h3 { font-size: 25px; white-space: normal; }
}

@media (max-width: 850px) {
  .site-header, .header-inner { height: 60px; }
  .header-inner, .content-wrap, .footer-inner { width: min(var(--content-width), calc(100% - 40px)); }
  .header-inner { grid-template-columns: 1fr auto; }
  .brand-symbol {  }
  .brand-copy { gap: 0; }
  .brand-copy strong { font-size: 16px; letter-spacing: -.95px; }
  .brand-copy small { font-size: 6px; }
  .main-nav, .header-links { display: none; }
  .main-nav.is-open { position: absolute; top: 60px; left: 20px; right: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(16,24,32,.12); }
  .mobile-menu-toggle { justify-self: end; width: 50px; height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .mobile-menu-toggle > img { display: block; }
  .section { padding: 40px 0; }
  .section-heading h1, .section-heading h2 { font-size: 30px; }
  .section-heading p { font-size: 14px; }
  .services .content-wrap, .careers .content-wrap { gap: 20px; }
  .recruit-grid, .faq-layout { grid-template-columns: 1fr; }
  .recruit-grid { gap: 20px; }
  .recruit-card { min-height: 181px; padding: 20px; }
  .recruit-label { font-size: 14px; }
  .recruit-card h3 { font-size: 26px; }
  .recruit-card p { font-size: 16px; }
  .apply-button { font-size: 14px; }
  .recruit-image { flex-basis: 120px; width: 120px; height: 120px; }
  .faq-intro, .faq-content { gap: 20px; }
  .faq-search { width: 250px; max-width: 100%; }
  /* 모바일에서는 메인과 Q&A 전체보기의 질문을 줄바꿈하여 모두 표시합니다. */
  .faq-trigger strong {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.6;
  }
  .faq-page-list { grid-template-columns: 1fr; }
  .faq-page-search { max-width: 100%; }
  .footer-inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-menu { justify-content: center; }
  .family-site { flex-basis: auto; }
  .services-modal-workspace { grid-template-columns: 190px minmax(0, 1fr); }
  .modal-service-heading h3 { font-size: 24px; }
  .modal-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-service-header {flex-direction: column; align-items: flex-start;}
}

@media (max-width: 520px) {
  .site-header, .header-inner { height: 50px; }
  .header-inner { width: min(var(--content-width), calc(100% - 28px)); }
  .mobile-menu-toggle { height: 50px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card-main { min-height: 166px; }
  .service-card h2 { font-size: 24px; }
  .recruit-card { min-height: 190px; padding: 20px; }
  .recruit-card h3 { font-size: 20px; }
  .recruit-card p { font-size: 15px; }
  .recruit-image { flex-basis: 92px; width: 92px; height: 92px; }
  .recruit-label, .apply-button { font-size: 13px; }
  /* 좁은 화면에서는 브랜드명을 질문 위에 배치해 읽을 공간을 확보합니다. */
  .faq-trigger {
    grid-template-columns: 16px minmax(0, 1fr) 16px;
    grid-template-areas: ". brand ." "question title arrow";
    align-items: start;
    gap: 6px 7px;
  }
  .faq-trigger .question-mark { grid-area: question; line-height: 1.4; }
  .faq-trigger .faq-brand {
    grid-area: brand;
    justify-self: start;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
  }
  .faq-trigger strong { grid-area: title; font-size: 14px; }
  .faq-trigger img { grid-area: arrow; width: 16px; height: 16px; margin-top: 3px; }
  .faq-answer { padding: 14px; }
  .faq-answer p { font-size: 14px; }
  .faq-page-search { width: 100%; }
  .faq-page-search input { padding: 0 14px; font-size: 14px; }
  .faq-page-search button { gap: 7px; padding: 10px 12px; font-size: 13px; }
  .faq-page-pagination .faq-pagination-number { min-width: 30px; padding-right: 10px; padding-left: 10px; }
  .footer-menu { gap: 6px 14px; }
  .services-modal-header-inner, .services-modal-workspace { width: 100%; }
  .services-modal-header-inner { padding: 0 16px; }
  .services-modal-workspace { display: flex; }
  .services-modal-nav { position: static; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); padding: 10px 16px; border-right: 0; border-bottom: 1px solid #e0e0e0; }
  .modal-nav-item { flex-direction: column; align-items: flex-start;  min-height: 54px; padding: 8px; border-radius: 8px; }
  .modal-nav-copy {max-width: 100%; overflow: hidden;}
  .modal-nav-copy strong { font-size: 13px; }
  .modal-nav-copy small { font-size: 11px; }
  .services-modal-list { padding: 0 16px 40px; }
  .modal-service-header { min-height: 88px; gap: 10px; }
  .modal-service-heading h3 { font-size: 20px; }
  .modal-service-heading p { font-size: 12px; }
  .modal-site-link { padding: 9px 11px; font-size: 12px; }
  .modal-related h4 { font-size: 14px; }
  .modal-related-grid { grid-template-columns: 1fr; }
  .modal-related-link { font-size: 14px; }
}

@media (min-width: 851px) {
  .mobile-menu-drawer { display: none !important; }
}

/* 관리자 등록 데이터: 기존 공개 레이아웃 안에서만 적용합니다. */
.service-card {
  --card-bg: #f5f6f8;
  --card-border: #e2e8f0;
  --orb-bg: #ddd;
  border-color: var(--card-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.service-card.theme-violet { --card-bg: linear-gradient(130deg, #f9f2ff, #e7d7ff); --card-border: #d3bbea; --orb-bg: radial-gradient(circle at 28% 24%, #f1d8ff, #b07cdb 48%, #7848b6 100%); }
.service-card.theme-mint { --card-bg: linear-gradient(130deg, #f3fff6, #cef0e4); --card-border: #add9c9; --orb-bg: radial-gradient(circle at 28% 24%, #d3ffcf, #65cbb4 48%, #238c84 100%); }
.service-card.theme-coral { --card-bg: linear-gradient(130deg, #fff8ee, #ffdfda); --card-border: #e7bdb5; --orb-bg: radial-gradient(circle at 28% 24%, #ffe4ba, #ef9a88 48%, #c75e6f 100%); }
.service-card.theme-gold { --card-bg: linear-gradient(130deg, #fffdf0, #ffeab1); --card-border: #e0ca8e; --orb-bg: radial-gradient(circle at 28% 24%, #fff8cf, #edc064 48%, #bc852c 100%); }
.service-card.theme-ocean { --card-bg: linear-gradient(130deg, #f3fcff, #d6eaff); --card-border: #b2cfe7; --orb-bg: radial-gradient(circle at 28% 24%, #d8f9ff, #86bae9 48%, #487cb9 100%); }
.service-card .service-card-main { background: var(--card-bg); }
.service-card h2, .service-card p { white-space: pre-line; overflow-wrap: anywhere; }
.service-orb { display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--orb-bg, #ddd); }
.service-orb img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center; }
.tag-list span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.card-link { min-height: 42px; gap: 8px; overflow-wrap: anywhere; }
.card-arrow { flex: 0 0 20px; }
.modal-small-logo img, .modal-brand-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.modal-service-heading { max-width: 100%; }
.modal-service-heading > div { min-width: 0; }
.modal-service-heading p { white-space: pre-line; overflow-wrap: anywhere; }

.faq-search { max-width: 100%; }
.faq-search-submit { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 5px 9px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }
.faq-search-submit:focus-visible, .faq-page-pagination a:focus-visible, .info-faq-related a:focus-visible, .info-faq-cta a:focus-visible { outline: 3px solid #8fb9ff; outline-offset: 3px; }
.info-empty { grid-column: 1 / -1; width: 100%; margin: 0; padding: 30px 20px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; color: var(--muted); text-align: center; line-height: 1.7; overflow-wrap: anywhere; }
.info-faq-result-count { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.faq-page-pagination a, .faq-page-pagination > span { height: 32px; min-width: 32px; display: inline-grid; place-items: center; padding: 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 1; }
.faq-page-pagination .faq-pagination-number { min-width: 36px; padding-right: 14px; padding-left: 14px; }
.faq-page-pagination .faq-pagination-arrow { border: 1px solid #e0e0e0; }
.faq-page-pagination .is-current { background: var(--ink); color: #fff; font-weight: 600; }
.faq-page-pagination .is-disabled { opacity: .35; }
.faq-page-pagination a:hover { background: #edf1f6; }
.faq-answer .info-faq-core { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.75; }
.info-faq-image { margin: 20px 0; text-align: center; }
.info-faq-image img { display: block; max-width: 100%; width: auto; height: auto; margin: 0 auto; border-radius: 10px; aspect-ratio: auto; object-fit: contain; }
.info-faq-image figcaption { margin: 8px 0 0; color: #667080; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }

/* 편집기 본문 스타일: 헤더/푸터/FAQ 목록으로 확산되지 않도록 범위를 제한합니다. */
.info-faq-body { min-width: 0; margin-top: 20px; color: #2f2b3b; font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.info-faq-body p { margin: 0 0 16px; min-height: 1em; color: inherit; font-size: inherit; line-height: inherit; }
.info-faq-body h2, .info-faq-body h3, .info-faq-body h4 { margin: 25px 0 12px; color: #3f3156; font-weight: 700; line-height: 1.5; }
.info-faq-body h2 { padding-bottom: 10px; border-bottom: 2px solid #e9dff5; font-size: 24px; }
.info-faq-body h3 { font-size: 20px; }
.info-faq-body h4 { font-size: 18px; }
.info-faq-body strong, .info-faq-body b { font-weight: 700; }
.info-faq-body em, .info-faq-body i { font-style: italic; }
.info-faq-body ul, .info-faq-body ol { margin: 12px 0 22px; padding-left: 26px; }
.info-faq-body li { margin: 7px 0; }
.info-faq-body a { color: #6550b6; text-decoration: underline; text-underline-offset: 3px; }
.info-faq-body img { max-width: 100% !important; height: auto !important; vertical-align: middle; border-radius: 10px; }
.info-faq-body figure { margin: 20px 0; text-align: center; }
.info-faq-body figcaption { margin: 8px 0; font-size: 13px; color: #777080; }
.info-faq-body table { border-collapse: collapse; width: 100%; margin: 20px 0; table-layout: fixed; font-size: 14px; }
.info-faq-body th, .info-faq-body td { min-width: 25px; padding: 12px; border: 1px solid #d9d1e6; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.info-faq-body th { background: #efe8f9; color: #594575; font-weight: 700; }
.info-faq-body tr:nth-child(even) td { background: #faf8fd; }
.info-faq-body caption { margin-bottom: 8px; color: #625276; font-size: 14px; font-weight: 700; text-align: left; }
.info-faq-body blockquote { margin: 20px 0; padding: 14px 20px; border-left: 4px solid #9f83cc; background: #f5f0fb; color: #665471; }
.info-faq-body pre { white-space: pre-wrap; margin: 20px 0; padding: 20px; border-radius: 10px; background: #29223b; color: #f0e9fc; font: 14px/1.8 Consolas, monospace; overflow-wrap: anywhere; }
.info-faq-body code { padding: 2px 5px; border-radius: 4px; background: #eee8f6; color: #705590; font-family: Consolas, monospace; font-size: 14px; }
.info-faq-body pre code { background: none; color: inherit; padding: 0; }
.info-faq-body hr { margin: 28px 0; border: 0; border-top: 1px solid #ded6e9; }
.info-faq-body .faq-note, .info-faq-body .faq-tip, .info-faq-body .faq-warning { margin: 20px 0; padding: 18px 22px; border: 1px solid #dfd0f1; border-left: 4px solid #9a72cf; border-radius: 10px; background: #f5effc; color: #5e4777; }
.info-faq-body .faq-tip { border-color: #cce5d7; border-left-color: #4d9e7f; background: #edf8f2; color: #34644f; }
.info-faq-body .faq-warning { border-color: #efd9ba; border-left-color: #d09c4c; background: #fff7e7; color: #805b2f; }
.info-faq-body .faq-note p:last-child, .info-faq-body .faq-tip p:last-child, .info-faq-body .faq-warning p:last-child { margin-bottom: 0; }
.info-faq-body .faq-steps { padding: 14px 24px 14px 46px; border: 1px solid #e4dcef; border-radius: 12px; background: #f9f6fd; }
.info-faq-body .faq-table-wrap { max-width: 100%; overflow-x: auto; }
.info-faq-body > :first-child { margin-top: 0; }
.info-faq-body > :last-child { margin-bottom: 0; }

.info-faq-related { margin-top: 24px; padding-top: 18px; border-top: 1px solid #d5dce6; font-size: 13px; line-height: 1.7; }
.info-faq-related > strong { display: block; margin-bottom: 5px; }
.info-faq-related a { display: inline-block; max-width: 100%; margin: 3px 5px 3px 0; padding: 6px 10px; border: 1px solid #d6cce2; border-radius: 7px; background: #fff; color: #6550b6; overflow-wrap: anywhere; }
.info-faq-related a:hover { text-decoration: underline; }
.info-faq-cta { margin-top: 28px; padding: 24px; border: 1px solid #ded3ec; border-radius: 14px; background: linear-gradient(125deg, #f0e7fc, #e8f6f0); }
.info-faq-cta > img { display: block; max-width: 100%; width: auto; height: auto; margin: 0 auto 18px; border-radius: 10px; object-fit: contain; }
.info-faq-cta h3 { margin: 0 0 10px; color: #3f3156; font-size: 20px; line-height: 1.5; overflow-wrap: anywhere; }
.info-faq-cta p { margin: 0 0 14px; color: #665974; font-size: 14px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.info-faq-cta-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.info-faq-cta-buttons a { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: 10px 16px; border: 1px solid #6d50a9; border-radius: 8px; background: #6d50a9; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.info-faq-cta-buttons a.is-secondary { background: #fff; color: #64478e; }
.info-faq-cta-buttons a:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .modal-service-heading { width: 100%; }
  .modal-service-heading h3 { white-space: normal; overflow-wrap: anywhere; }
  .faq-page-pagination .faq-pagination-number { min-width: 30px; padding-right: 10px; padding-left: 10px; }
  .info-faq-body { font-size: 15px; }
  .info-faq-body th, .info-faq-body td { padding: 8px; font-size: 12px; }
  .info-faq-body .faq-note, .info-faq-body .faq-tip, .info-faq-body .faq-warning { padding: 14px 17px; }
  .info-faq-cta { padding: 18px; }
  .info-faq-cta h3 { font-size: 18px; }
}