/* 이펙터 · 2026-10 제작 · 헤더·푸터·퀵메뉴 공통 레이아웃 */

:root {
  --ss-consult-h: 5rem;
  --ss-header-px: 1rem;
  --ss-z-quick: 1010; --ss-z-consult: 1020; --ss-z-header: 1030; --ss-z-drawer: 1040; --ss-z-modal: 1060;
  --ss-sec-pad: 5rem;
}
@media (min-width: 768px)  { :root { --ss-sec-pad: 6.5rem; } }
@media (min-width: 992px)  { :root { --ss-header-px: 1.5rem; --ss-sec-pad: 8.75rem; } }
@media (min-width: 1200px) { :root { --ss-consult-h: 4.375rem; --ss-header-px: 2.5rem; } }
@media (min-width: 1400px) { :root { --ss-header-px: clamp(3rem, calc(3rem + (100vw - 87.5rem) * .1), 6.25rem); } }

body { padding-top: var(--ss-header-h); padding-bottom: var(--ss-consult-h); }
body.ss-lock { overflow: hidden; }

.img-ph[data-img-todo]::after { content: attr(data-img-todo); }

.ss-ico { display: inline-block; flex: none; width: 1.5rem; height: 1.5rem; background-color: currentColor; vertical-align: middle;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ss-ico-search   { --ico: url(../icons/ico-search.svg); }
.ss-ico-user     { --ico: url(../icons/ico-user.svg); }
.ss-ico-calendar { --ico: url(../icons/ico-calendar-check.svg); }
.ss-ico-globe    { --ico: url(../icons/ico-globe.svg); }
.ss-ico-menu     { --ico: url(../icons/ico-menu.svg); }
.ss-ico-close    { --ico: url(../icons/ico-close.svg); }
.ss-ico-back     { --ico: url(../icons/ico-back.svg); }
.ss-ico-arrow    { --ico: url(../icons/ico-arrow-right.svg); }
.ss-ico-youtube  { --ico: url(../icons/ico-youtube.svg); }
.ss-ico-instagram{ --ico: url(../icons/ico-instagram.svg); }
.ss-ico-kakaotalk{ --ico: url(../icons/ico-kakaotalk.svg); }
.ss-ico-blogger  { --ico: url(../icons/ico-blogger.svg); }
.ss-ico-heart    { --ico: url(../icons/ico-heart.svg); }
.ss-ico-heart-line { --ico: url(../icons/ico-heart-line.svg); }

.ss-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--ss-z-header); background: var(--ss-white); }
.ss-header { box-shadow: 0 1px 0 rgba(17, 17, 17, .06); transition: box-shadow .3s ease, background-color .3s ease; }
.ss-header.is-scrolled { box-shadow: 0 1px 0 rgba(17, 17, 17, .07), 0 .25rem 1rem -.25rem rgba(17, 17, 17, .08), 0 .75rem 2rem -1rem rgba(17, 17, 17, .06); }
.ss-header:has(.ss-drop.is-open) { box-shadow: 0 1px 0 rgba(17, 17, 17, .07); }
.ss-header-bar { display: flex; align-items: center; justify-content: space-between; height: var(--ss-header-h); padding-inline: var(--ss-header-px); }

.ss-logo { display: block; width: 5.625rem; }
.ss-logo .img-ph { width: 100%; }
.ss-logo-pc { display: none !important; }
.ss-logo-mo { display: block; }
.ss-logo img { filter: brightness(0) invert(.067); transition: filter .3s ease; }

.ss-gnb { display: none; }
.ss-util { display: flex; align-items: center; }
.ss-util-btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: none; color: var(--ss-text); cursor: pointer; transition: color .15s; }
.ss-util-btn:hover, .ss-util-btn[aria-expanded="true"] { color: var(--ss-ink); }
.ss-util-btn .ss-ico { width: 1.125rem; height: 1.125rem; }
.ss-util-btn-menu .ss-ico { width: 1.5rem; height: 1.5rem; }
.ss-util-item { position: relative; }
.ss-util-login { display: none; }

:root { --ss-drop-t: .4s; --ss-drop-ease: cubic-bezier(.22, .61, .36, 1); }
.ss-drop { position: absolute; top: 100%; left: 0; right: 0; isolation: isolate; visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--ss-drop-t); }
.ss-drop.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.ss-drop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ss-white); clip-path: inset(0 0 100% 0); transition: clip-path var(--ss-drop-t) var(--ss-drop-ease); }
.ss-drop.is-open::before { clip-path: inset(0 0 0 0); }
.ss-drop-pane { transition: opacity .2s ease; }
.ss-drop:not(.is-open) .ss-drop-pane { opacity: 0; }
.ss-drop.is-opening .ss-drop-pane.is-active { animation: ssPaneIn var(--ss-drop-t) var(--ss-drop-ease) both; }
@keyframes ssFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ssPaneIn { from { transform: translateY(-1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
.ss-drop-pane { display: none; padding: 1.5rem var(--ss-header-px) 4.5rem var(--ss-mega-x, 27.5rem); }
.ss-drop-pane.is-active { display: flex; align-items: flex-start; }
.ss-drop-cat { flex: 0 0 15.625rem; }
.ss-drop-col { flex: none; padding-right: 2.5rem; }
.ss-drop-label { margin: 0 0 .5rem; font-size: .875rem; font-weight: 300; line-height: 1.5; color: var(--ss-muted); }
.ss-drop-main a { display: block; font-size: 1.25rem; font-weight: 600; line-height: 2.375rem; color: var(--ss-ink); transition: color .15s; }
.ss-drop-sub a { display: block; font-size: .875rem; font-weight: 500; line-height: 1.625rem; color: var(--ss-text-2); transition: color .15s; }
.ss-drop-main a:hover, .ss-drop-sub a:hover { color: var(--ss-weak); }
.ss-drop-main a:focus-visible, .ss-drop-sub a:focus-visible { outline-offset: 0; }

.ss-psearch { display: flex; align-items: center; gap: 1.25rem; width: 26.25rem; max-width: 100%; padding-bottom: .75rem; border-bottom: 1px solid var(--ss-weak); }
.ss-psearch .ss-ico { width: 1.25rem; height: 1.25rem; color: var(--ss-muted); }
.ss-psearch input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font: 600 1.375rem/2.5rem var(--ss-font); color: var(--ss-ink); }
.ss-psearch input::placeholder { color: var(--ss-muted); }
.ss-drop-pane-search.is-active { flex-direction: column; align-items: flex-start; }
.ss-drop-pane-search .ss-drop-label { margin-top: 1.25rem; }

.ss-backdrop { position: fixed; inset: 0; z-index: calc(var(--ss-z-header) - 1); visibility: hidden; pointer-events: none;
  -webkit-backdrop-filter: blur(0) brightness(1); backdrop-filter: blur(0) brightness(1);
  transition: -webkit-backdrop-filter var(--ss-drop-t) var(--ss-drop-ease), backdrop-filter var(--ss-drop-t) var(--ss-drop-ease), visibility 0s linear var(--ss-drop-t); }
.ss-backdrop.is-open { visibility: visible; pointer-events: auto; -webkit-backdrop-filter: blur(.5rem) brightness(1.15); backdrop-filter: blur(.5rem) brightness(1.15); transition: -webkit-backdrop-filter var(--ss-drop-t) var(--ss-drop-ease), backdrop-filter var(--ss-drop-t) var(--ss-drop-ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .ss-drop, .ss-drop.is-open, .ss-drop::before, .ss-drop-pane, .ss-backdrop, .ss-backdrop.is-open { transition: none; } .ss-drop.is-opening .ss-drop-pane.is-active { animation: none; } }

.ss-modal { position: fixed; inset: 0; z-index: var(--ss-z-modal); display: none; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(.3125rem) brightness(1.15); backdrop-filter: blur(.3125rem) brightness(1.15); }
.ss-modal.is-open { display: flex; }
.ss-modal-box { position: relative; width: 26.25rem; max-width: 100%; padding: 3.75rem 2rem 3rem; text-align: center; background: var(--ss-white); border: 1px solid var(--ss-line); border-radius: .1875rem; }
.ss-modal-close { position: absolute; top: .75rem; right: .75rem; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: none; color: var(--ss-muted); cursor: pointer; }
.ss-modal-close .ss-ico { width: 1.875rem; height: 1.875rem; }
.ss-modal-title { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 2.5rem; }
.ss-modal-desc { margin: .25rem 0 0; font-size: 1rem; line-height: 2.5rem; color: var(--ss-muted); }
.ss-modal-btns { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
.ss-btn-pill { width: 6.25rem; height: 3.25rem; padding: 0; border: 1px solid var(--ss-line-strong); border-radius: 1.875rem; background: var(--ss-white); font-size: 1.125rem; font-weight: 500; color: var(--ss-muted); cursor: pointer; transition: opacity .15s; }
.ss-btn-pill-dark { border-color: var(--ss-ink); background: var(--ss-ink); color: var(--ss-white); }
.ss-btn-pill:hover { opacity: .85; }

.ss-drawer, .ss-msearch { position: fixed; top: 0; left: 0; right: 0; bottom: var(--ss-consult-h); z-index: var(--ss-z-drawer); display: none; flex-direction: column; background: var(--ss-white); overflow: hidden; }
.ss-drawer.is-open, .ss-msearch.is-open { display: flex; }
.ss-drawer-top { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; height: 3rem; background: var(--ss-white); }
.ss-drawer-top button { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; background: none; color: var(--ss-text); cursor: pointer; }
.ss-drawer-top .ss-ico { width: 1.5rem; height: 1.5rem; }
.ss-drawer-top { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.ss-drawer-top button { -webkit-tap-highlight-color: transparent; border-radius: .5rem; }
.ss-drawer-top button:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: -4px; }
@media (hover: none) { .ss-drawer-top button:focus:not(:focus-visible) { outline: 0; } .ss-drawer-top button:focus-visible { outline: 0; } }
.ss-drawer-back { visibility: hidden; }
.ss-drawer.is-sub .ss-drawer-back { visibility: visible; }
.ss-drawer-views { position: relative; flex: 1; min-height: 0; }
.ss-drawer-view { position: absolute; inset: 0; padding: .25rem 3rem 3rem; overflow-y: auto; background: var(--ss-white); transition: transform .3s ease, visibility .3s; }
.ss-drawer-view-sub { transform: translateX(100%); visibility: hidden; }
.ss-drawer-view-sub.is-active { transform: none; visibility: visible; }
.ss-drawer.is-sub .ss-drawer-view-main { transform: translateX(-30%); visibility: hidden; }
.ss-drawer-login { display: block; margin: 0 0 .1875rem; font-size: 1.125rem; font-weight: 600; line-height: 3rem; color: var(--ss-text); }
.ss-drawer-item { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font-size: 1.25rem; font-weight: 600; line-height: 2.75rem; color: var(--ss-ink); cursor: pointer; }
.ss-drawer-main-link { display: block; font-size: 1.5rem; font-weight: 600; line-height: 3.125rem; color: var(--ss-ink); }
.ss-drawer-item.is-current, .ss-drawer-main-link.is-current, .ss-drop-main a.is-current { text-decoration: underline; text-decoration-color: var(--ss-ink); text-decoration-thickness: 2px; text-underline-offset: .375rem; }
.ss-drawer-item.is-current, .ss-drawer-main-link.is-current { text-underline-offset: .5rem; }

.ss-msearch-body { padding: .5rem 3rem 3rem; overflow-y: auto; }
.ss-msearch-form { display: flex; align-items: center; gap: .5rem; padding: .75rem 0 .5rem; border-bottom: 1px solid var(--ss-line-strong); }
.ss-msearch-form .ss-ico { width: 1.375rem; height: 1.375rem; color: var(--ss-muted); }
.ss-msearch-form input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font: 600 1.125rem/2.5rem var(--ss-font); color: var(--ss-ink); }
.ss-msearch-form input::placeholder { color: var(--ss-muted); }
.ss-msearch-label { margin: 1.25rem 0 0; font-size: .9375rem; font-weight: 300; line-height: 2.5rem; color: var(--ss-muted); }
.ss-msearch-list a { display: flex; align-items: center; margin-left: -.25rem; font-size: .9375rem; font-weight: 500; line-height: 2.5rem; color: var(--ss-text); }
.ss-msearch-list .ss-ico { width: 1.5rem; height: 1.5rem; }

@media (min-width: 992px) {
  .ss-header-bar { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .ss-logo { width: 9.75rem; }
  .ss-logo-pc { display: block !important; }
  .ss-logo-mo { display: none; }
  .ss-gnb { display: block; }
  .ss-gnb-list { display: flex; margin: 0; }
  .ss-gnb-link { display: flex; align-items: center; height: auto; padding-inline: .5rem; white-space: nowrap; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--ss-text-2); transition: color .15s; }
  .ss-gnb-link:hover, .ss-gnb-link:focus-visible, .ss-gnb-link.is-active, .ss-gnb-link.is-current { color: var(--ss-ink); }
  .ss-gnb-link:focus-visible { outline-offset: -.125rem; }
  .ss-util { justify-self: end; }
  .ss-util-btn { width: 2.5rem; height: 2.5rem; }
  .ss-util-btn .ss-ico { width: 1.5rem; height: 1.5rem; }
  .ss-util-btn-menu { display: none; }
  .ss-util-login { display: grid; }
  .ss-drawer, .ss-msearch { display: none !important; }
  .ss-modal { top: calc(var(--ss-header-h) + var(--ss-bar-now, 0px)); }
}
@media (min-width: 1200px) and (max-width: 1399.98px) { .ss-gnb-link { padding-inline: calc(.5rem + (100vw - 1200px) * .04); } }
@media (min-width: 1400px) { .ss-gnb-link { padding-inline: clamp(1.25rem, calc(1.25rem + (100vw - 87.5rem) * .0192), 1.875rem); } }

.ss-footer { padding: 2.75rem 1rem 2rem; background: var(--ss-bg-soft); color: var(--ss-weak); font-size: .875rem; }
.ss-footer a:hover { color: var(--ss-ink); }
.ss-footer-top { display: grid; grid-template-columns: minmax(0, 1fr); }
.ss-footer-info  { order: 1; margin: 0; }
.ss-footer-brand { order: 2; display: flex; justify-content: center; margin-top: 1.5rem; }
.ss-footer-sns   { order: 3; display: flex; justify-content: center; align-items: center; gap: .875rem; margin: 1rem 0 0; padding: 0; }
.ss-footer-logo-mo { width: 5.9375rem; }
@font-face { font-family: 'Beausite Fit'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/beausite/beausitefit-light-latin.woff2) format('woff2'); }
.ss-footer-logo-pc, .ss-footer-tagline, .ss-footer-map { display: none; }
.ss-footer-row { display: grid; grid-template-columns: 4.5rem 1fr; margin: 0 0 .5rem; }
.ss-footer-row dt { font-weight: 600; line-height: 1.75rem; color: var(--ss-ink); }
.ss-footer-row dd { margin: 0; line-height: 1.375rem; padding-block: .1875rem; }
.ss-footer-row dd span { display: block; }
.ss-footer-row-tel dd { font: 600 1.125rem/1.75rem var(--ss-font-en); padding-block: 0; color: var(--ss-ink); }
.ss-footer-sns a { display: block; color: var(--ss-ink); }
.ss-footer-sns .ss-ico { display: block; width: 1.25rem; height: 1.25rem; }
.ss-footer-sns .ss-ico-youtube { width: 1.5rem; height: 1.0625rem; margin-block: .1875rem; }
.ss-footer-bottom { margin-top: 1rem; font-size: .8125rem; font-weight: 300; text-align: center; }
.ss-footer-legal { margin: 0; line-height: 1.75rem; }
.ss-footer-legal span { display: block; }
.ss-footer-legal-pc { display: none; }
.ss-footer-copy { margin: 0; font-size: .6875rem; line-height: 1.75rem; }
.ss-footer-terms { display: flex; justify-content: center; margin: 1.25rem 0 0; padding: 0; line-height: 1.75rem; }
.ss-footer-terms li + li::before { content: "|"; margin-inline: 1.25rem; }

@media (min-width: 992px) {
  .ss-footer { padding: 4rem var(--ss-edge); font-size: .9375rem; }
  .ss-footer-inner { max-width: var(--ss-content-pc); margin-inline: auto; }
  .ss-footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 40rem); column-gap: 2rem; grid-template-areas: "brand tagline" "info map" "sns map"; align-items: start; }
  .ss-footer-brand { grid-area: brand; order: 0; justify-content: flex-start; margin: 0 0 2.5rem; align-self: end; }
  .ss-footer-logo-mo { display: none; }
  .ss-footer-logo-pc { display: block; width: 15.125rem; }
  .ss-footer-tagline { grid-area: tagline; display: block; align-self: end; margin: 0 0 2.5rem; font-family: 'Beausite Fit', var(--ss-font); font-size: 1rem; font-weight: 300; line-height: 1.75rem; text-align: right; }
  .ss-footer-info { grid-area: info; order: 0; }
  .ss-footer-sns  { grid-area: sns; order: 0; justify-content: flex-start; margin: 1.5rem 0 0 5rem; gap: 1rem; }
  .ss-footer-map  { grid-area: map; display: block; }
  .ss-footer-map .img-ph, .ss-footer-map img[data-img] { border-radius: 1.25rem; }
  .ss-footer-row { grid-template-columns: 5rem 1fr; }
  .ss-footer-row dd { line-height: 1.75rem; padding-block: 0; }
  .ss-footer-row-tel dd { font-size: 1.25rem; }
  .ss-footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: start; margin-top: 6rem; text-align: left; }
  .ss-footer-legal-mo { display: none; }
  .ss-footer-legal-pc { display: block; grid-column: 1; }
  .ss-footer-legal-pc span { display: inline; }
  .ss-footer-legal-pc span + span::before { content: "|"; margin-inline: 1.25rem; }
  .ss-footer-terms { grid-column: 2; grid-row: 1; margin: 0; }
  .ss-footer-copy { grid-column: 1 / -1; margin-top: .5rem; font-size: .8125rem; }
}

.ss-quick { display: block; position: fixed; right: .75rem; bottom: calc(var(--ss-consult-h) + .75rem); z-index: var(--ss-z-quick); }
.ss-quick ul { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.ss-quick li { display: none; }
.ss-quick li.is-mo { display: block; }
.ss-quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; width: 3.25rem; height: 3.25rem; border-radius: .25rem; background: var(--ss-ink); color: var(--ss-white); font-size: .625rem; line-height: 1.25; }
.ss-quick img { display: block; height: 1.25rem; width: auto; max-width: 1.75rem; }
@media (min-width: 992px) {
  .ss-quick { right: 1.25rem; bottom: calc(var(--ss-consult-h) + 1.25rem); }
  .ss-quick li { display: block; }
  .ss-quick a { gap: .3125rem; width: 4.375rem; height: 4.375rem; border-radius: .3125rem; font-size: .75rem; transition: background-color .2s, color .2s; }
  .ss-quick img { height: 1.5625rem; max-width: 2.1875rem; }
  .ss-quick a:hover, .ss-quick a:focus-visible { background: #888; color: var(--ss-white); }
  .ss-quick a[data-hover="youtube"]:hover, .ss-quick a[data-hover="youtube"]:focus-visible { background: #ff1a47; }
}

.ss-consult { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ss-z-consult); height: var(--ss-consult-h); background: var(--ss-white); border-top: 1px solid transparent; transition: border-color .2s; }
.grecaptcha-badge { left: 0 !important; right: auto !important; bottom: calc(var(--ss-consult-h, 4.375rem) + .875rem) !important; }
.ss-consult.is-scrolled { border-top-color: var(--ss-line); }
.ss-consult-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .625rem; max-width: 40rem; height: 100%; margin-inline: auto; padding: .625rem 1rem; font-size: .8125rem; }
.ss-consult input[type="text"], .ss-consult input[type="tel"], .ss-consult select { width: 100%; height: 1.625rem; padding: 0 .625rem; border: 1px solid var(--ss-line); border-radius: 0; background: var(--ss-white); font: 400 .8125rem/1 var(--ss-font); color: var(--ss-ink); outline: 0; -webkit-appearance: none; appearance: none; }
.ss-consult input::placeholder { color: var(--ss-weak); }
.ss-consult input:focus { border-color: var(--ss-ink); }
.ss-consult input.is-invalid, .ss-consult select.is-invalid, .ss-consult .ss-check.is-invalid .ss-check-box { border-color: var(--ss-point); }
.ss-select { position: relative; display: block; }
.ss-consult select { padding-right: 1.5rem; border-color: var(--ss-ink); cursor: pointer; }
.ss-select::after { content: ""; position: absolute; top: 50%; right: .625rem; width: .5rem; height: .25rem; margin-top: -.125rem; pointer-events: none; background: var(--ss-ink);
  -webkit-mask: url(../icons/ico-chevron-down.svg) center / contain no-repeat; mask: url(../icons/ico-chevron-down.svg) center / contain no-repeat; }
.ss-consult-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ss-consult-agree { display: flex; align-items: center; gap: .625rem; flex: 1; min-width: 0; font-size: .75rem; font-weight: 500; color: var(--ss-text-2); white-space: nowrap; }
.ss-check { display: inline-flex; align-items: center; gap: .3125rem; cursor: pointer; }
.ss-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ss-check-box { position: relative; flex: none; width: .9375rem; height: .9375rem; border: .125rem solid var(--ss-ink); border-radius: .125rem; background: var(--ss-white); }
.ss-check input:checked + .ss-check-box { background: var(--ss-ink); }
.ss-check input:checked + .ss-check-box::after { content: ""; position: absolute; inset: -.125rem; background: var(--ss-white); -webkit-mask: url(../icons/ico-check.svg) center / contain no-repeat; mask: url(../icons/ico-check.svg) center / contain no-repeat; }
.ss-check input:focus-visible + .ss-check-box { outline: .125rem solid var(--ss-ink); outline-offset: .125rem; }
.ss-consult-more { font-weight: 400; color: var(--ss-line-strong); border-bottom: 1px solid var(--ss-line-strong); line-height: 1.2; }
.ss-consult-more:hover { color: var(--ss-weak); border-color: var(--ss-weak); }
.ss-consult-submit { flex: 0 0 10.9375rem; height: 1.625rem; padding: 0; border: 0; border-radius: .125rem; background: var(--ss-ink); font: 600 .875rem/1 var(--ss-font); color: var(--ss-white); cursor: pointer; transition: opacity .15s; }
.ss-consult-submit:hover { opacity: .85; }
.ss-consult-submit[disabled] { opacity: .5; cursor: default; }

@media (min-width: 1200px) {
  .ss-consult-form { display: flex; align-items: center; justify-content: center; gap: 1.5rem; max-width: none; padding: 0 var(--ss-edge); font-size: .875rem; }
  .ss-consult-form > * { flex: none; }
  .ss-consult-form > .ss-field { width: 12.5rem; }
  .ss-consult input[type="text"], .ss-consult input[type="tel"], .ss-consult select { height: 2.25rem; padding-inline: .875rem; font-size: .875rem; }
  .ss-consult select { padding-right: 2rem; }
  .ss-consult-row { display: contents; }
  .ss-consult-agree { flex: none; gap: 1.5rem; font-size: .875rem; }
  .ss-check { gap: .5rem; }
  .ss-check-box { width: 1.125rem; height: 1.125rem; }
  .ss-consult-submit { flex: none; width: 12.5rem; height: 2.25rem; font-size: 1.125rem; }
}

.ss-safety { padding-block: var(--ss-sec-pad); background: var(--ss-white); overflow-x: clip; }
.ss-safety-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
.ss-safety-title { margin: 0; font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.ss-safety-desc { margin: 1.5rem 0 0; font-size: 1rem; line-height: 1.75rem; color: var(--ss-muted); }
.ss-safety-swiper { overflow: hidden; }
.ss-safety-slide { width: 15rem; height: auto; }
.ss-safety-thumb { display: block; border-radius: 1.25rem; overflow: hidden; }
.ss-safety-thumb .img-ph, .ss-safety-thumb img[data-img] { border-radius: 1.25rem; }
.ss-safety-cap { margin: 1rem 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; color: var(--ss-ink); }
.ss-safety .ss-safety-bar.swiper-scrollbar { --swiper-scrollbar-size: .125rem; --swiper-scrollbar-bg-color: var(--ss-line); --swiper-scrollbar-drag-bg-color: var(--ss-ink); --swiper-scrollbar-border-radius: 0;
  position: relative; left: 0; bottom: auto; width: 100%; height: .125rem; margin-top: 2rem; }
.ss-safety-bar .swiper-scrollbar-drag { cursor: grab; }
@media (min-width: 768px) {
  .ss-safety-title { font-size: 2.25rem; }
  .ss-safety-desc { font-size: 1.0625rem; }
  .ss-safety-slide { width: 20rem; }
  .ss-safety-cap { font-size: 1.25rem; line-height: 1.75rem; }
}
@media (min-width: 992px) {
  .ss-safety-grid { grid-template-columns: 34.125rem minmax(0, 1fr); column-gap: 0; }
  .ss-safety-title { font-size: 2.625rem; line-height: 1.1905; }
  .ss-safety-desc { margin-top: 2rem; font-size: 1.1875rem; }
  .ss-safety-slide { width: 23.125rem; }
  .ss-safety-cap { font-size: 1.375rem; line-height: 1.875rem; }
  .ss-safety .ss-safety-bar.swiper-scrollbar { margin-top: 2.5rem; }
}

.ss-review { padding-block: var(--ss-sec-pad); background: var(--ss-bg-soft); overflow-x: clip; }
.ss-review-title { margin: 0 0 2rem; font-size: 1.75rem; font-weight: 600; line-height: 1.25; text-align: center; }
.ss-review-swiper { overflow: hidden; }
.ss-review-slide { width: 15rem; height: auto; }
.ss-review-card { position: relative; display: block; border-radius: 1.5rem; overflow: hidden; }
.ss-review-thumb { display: block; overflow: hidden; }
.ss-review-thumb .img-ph, .ss-review-thumb img { transition: transform .5s ease; }
.ss-review-card:hover .ss-review-thumb .img-ph, .ss-review-card:hover .ss-review-thumb img { transform: scale(1.08); }
.ss-review-body { position: relative; display: block; padding: 1.25rem 1.5rem 1.5rem; border-radius: 0 0 1.5rem 1.5rem; background: var(--ss-white); box-shadow: 0 -.0625rem 0 var(--ss-white); }
.ss-review-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ss-review-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 700; line-height: 1.75rem; color: var(--ss-ink); }
.ss-review-link { color: inherit; }
.ss-review-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ss-review-link:focus-visible { outline: 0; }
.ss-review-card:has(.ss-review-link:focus-visible) { outline: 2px solid var(--ss-ink); outline-offset: -2px; }
.ss-review-like { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; margin: -.375rem -.375rem -.375rem 0; padding: 0; border: 0; background: none; cursor: pointer; }
.ss-review-like:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 0; border-radius: 50%; }
.ss-review-body .ss-ico-heart { --ico: url(../icons/ico-heart-line.svg); width: 1.375rem; height: 1.25rem; color: var(--ss-point); }
.ss-review-like[aria-pressed="true"] .ss-ico-heart { --ico: url(../icons/ico-heart.svg); animation: ssHeartPop .45s ease both; }
@keyframes ssHeartPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ss-review-like[aria-pressed="true"] .ss-ico-heart { animation: none; } }
.ss-review-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; line-height: 2.375rem; color: var(--ss-ink); }
@media (min-width: 768px) { .ss-review-title { margin-bottom: 3rem; font-size: 2.25rem; } .ss-review-slide { width: 17.625rem; } }
@media (min-width: 992px) {
  .ss-review-title { margin-bottom: 3.5rem; font-size: 2.5rem; line-height: 1.25; }
  .ss-review-card { border-radius: 1.875rem; }
  .ss-review-body { padding: 1.5rem 2rem 2rem; }
  .ss-review-name { font-size: 1.125rem; line-height: 2.375rem; }
  .ss-review-text { font-size: 1rem; }
}

.ss-mtab { position: relative; }
.ss-mtab-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1rem; margin: 0; padding: 0; }
@media (max-width: 767.98px) {
  :root .ss-mtab-list { flex-wrap: nowrap; justify-content: flex-start; gap: .5rem; margin-inline: calc(var(--ss-edge) * -1); padding-inline: var(--ss-edge); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  :root .ss-mtab-list::-webkit-scrollbar { display: none; }
  :root .ss-mtab-list > li { flex: none; scroll-snap-align: center; }
  :root .ss-mtab-list > li > [data-tab] { width: auto; }
}

.ss-page { min-height: 50vh; padding-block: var(--ss-s-7); }
.ss-page-title { margin: 0; font-size: 1.75rem; font-weight: 600; line-height: 1.3; }
.ss-policy { margin-top: var(--ss-s-5); font-size: .9375rem; line-height: 1.8; color: var(--ss-text); }
.ss-policy p { margin: 0 0 .5rem; }

.ss-editor { font-size: 1rem; line-height: 1.75; color: var(--ss-text); word-break: keep-all; overflow-wrap: anywhere; }
:where(.ss-editor, .ss-policy) :where(strong, b) { font-weight: 700; }
:where(.ss-editor, .ss-policy) :where(em, i) { font-style: italic; }
:where(.ss-editor, .ss-policy) u { text-decoration: underline; text-underline-offset: .2em; }
:where(.ss-editor, .ss-policy) :where(ul, ol) { margin: 0 0 1em; padding-left: 1.5rem; }
:where(.ss-editor, .ss-policy) li { margin: 0 0 .25em; }
:where(.ss-editor, .ss-policy) a { color: var(--ss-ink); text-decoration: underline; text-underline-offset: .2em; word-break: break-all; }
:where(.ss-editor, .ss-policy) img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
:where(.ss-editor, .ss-policy) blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--ss-line-strong); color: var(--ss-muted); }
:where(.ss-editor) p { margin: 0 0 1em; }
:where(.ss-editor) p:last-child { margin-bottom: 0; }
:where(.ss-editor, .ss-policy) h2 { margin: 2rem 0 1rem; font-size: 1.5rem; font-weight: 700; line-height: 1.35; color: var(--ss-ink); }
:where(.ss-editor, .ss-policy) h3 { margin: 1.5rem 0 .75rem; font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: var(--ss-ink); }
:where(.ss-editor, .ss-policy) :where(h2, h3):first-child { margin-top: 0; }
@media (min-width: 768px) { .ss-page-title { font-size: 2.5rem; } .ss-page { padding-block: var(--ss-s-8); } }

:root { --ss-hover-t: .35s cubic-bezier(.25, .1, .25, 1); }
.ss-gnb-link, .ss-util-btn, .ss-drop-main a, .ss-drop-sub a, .ss-footer a, .ss-consult-more, .ss-quick a {
  transition: color var(--ss-hover-t), background-color var(--ss-hover-t), border-color var(--ss-hover-t);
}
.ss-btn-pill, .ss-consult-submit { transition: opacity var(--ss-hover-t), background-color var(--ss-hover-t), color var(--ss-hover-t); }
@media (prefers-reduced-motion: reduce) {
  .ss-gnb-link, .ss-util-btn, .ss-drop-main a, .ss-drop-sub a, .ss-footer a, .ss-consult-more, .ss-quick a, .ss-btn-pill, .ss-consult-submit { transition: none; }
}

@media (max-width: 399.98px) {
  .ss-consult-submit { flex-basis: 8.5rem; }
  .ss-consult select { padding-left: .5rem; padding-right: 1.25rem; font-size: .75rem; }
}

.ss-umenu { position: absolute; top: 100%; right: -1.25rem; z-index: 2; width: 7.25rem; margin: 0; padding: .5rem .625rem; list-style: none; background: var(--ss-white); border-radius: 0 0 .625rem .625rem; }
.ss-umenu[hidden] { display: none; }
.ss-umenu a, .ss-umenu button { display: flex; align-items: center; width: 100%; height: 1.875rem; margin: 0; padding: 0; border: 0; background: none; font: 400 1rem/1.5 var(--ss-font); color: var(--ss-text); text-align: left; cursor: pointer; transition: color var(--ss-hover-t); }
.ss-umenu a:hover, .ss-umenu button:hover, .ss-umenu a:focus-visible, .ss-umenu button:focus-visible { color: var(--ss-ink); }
.ss-country { position: static; }
.ss-country-list { position: absolute; top: 100%; right: 0; z-index: 2; width: 5.875rem; margin: 0; padding: .5rem .75rem; list-style: none; background: var(--ss-white); border-radius: 0 0 .625rem .625rem; }
.ss-country-list[hidden] { display: none; }
.ss-country-list a, .ss-country-list button { display: flex; align-items: center; gap: .5rem; width: 100%; height: 1.875rem; margin: 0; padding: 0; border: 0; background: none; font: 400 1rem/1.5 var(--ss-font); color: var(--ss-text); text-align: left; cursor: pointer; transition: color var(--ss-hover-t); }
.ss-country-list img { flex: none; width: 1.25rem; height: 1.25rem; }
.ss-country-list a:hover, .ss-country-list button:hover, .ss-country-list a:focus-visible, .ss-country-list button:focus-visible { color: var(--ss-ink); }
@media (min-width: 992px) { .ss-country { position: relative; } .ss-country-list { right: -1.25rem; } }
.ss-drawer-login[hidden], .ss-drawer-user[hidden] { display: none; }
.ss-drawer-user { display: flex; gap: 1.5rem; margin: 0 0 .1875rem; }
.ss-drawer-user a, .ss-drawer-user button { padding: 0; border: 0; background: none; font: 700 1.125rem/3rem var(--ss-font); color: var(--ss-text); cursor: pointer; }
.ss-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ss-toast { position: fixed; left: 50%; bottom: calc(var(--ss-consult-h) + 1rem); z-index: calc(var(--ss-z-consult) + 1); max-width: calc(100% - 2rem); padding: .875rem 1.5rem; border-radius: .5rem; background: var(--ss-ink); color: var(--ss-white); font-size: .875rem; line-height: 1.5; text-align: center; opacity: 0; translate: -50% .75rem; transition: opacity .3s ease, translate .3s ease; pointer-events: none; }
.ss-toast[hidden] { display: none; }
.ss-toast.is-show { opacity: 1; translate: -50% 0; }
.ss-toast.is-error { background: var(--ss-point); }
body.ss-main.is-hero-bar .ss-toast { bottom: calc(6.25rem + 1rem); }
@media (prefers-reduced-motion: reduce) { .ss-toast { transition: none; } }

.ss-skip { position: absolute; left: -9999px; top: 0; z-index: 3000; padding: .75rem 1.25rem; background: var(--ss-ink); color: var(--ss-white); font-size: .875rem; }
.ss-skip:focus { left: 1rem; top: 1rem; color: var(--ss-white); }

.ss-modal.ss-pmodal { top: 0; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ss-pmodal-box { width: 37.5rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding: 3.5rem 1.5rem 2rem; text-align: left; border: 0; border-radius: .5rem; }
.ss-pmodal-title { margin: 0; padding-right: 2.5rem; font-size: 1.375rem; font-weight: 700; line-height: 1.4; color: var(--ss-ink); }
.ss-pmodal-body { margin-top: 1rem; font-size: .9375rem; line-height: 1.8; color: var(--ss-text); }
.ss-pmodal-body p { margin: 0; }
.ss-pmodal-body span { font-weight: 700; color: var(--ss-ink); }
@media (min-width: 768px) { .ss-pmodal-box { padding: 3.75rem 2.5rem 3rem; } .ss-pmodal-title { font-size: 1.5rem; } .ss-pmodal-body { font-size: 1rem; } }

html.ss-menu-open .ss-consult { visibility: hidden; pointer-events: none; }
html.ss-menu-open .ss-drawer, html.ss-menu-open .ss-msearch { bottom: 0; padding-bottom: env(safe-area-inset-bottom); }

:root { --ss-bar-h: 0rem; --ss-bar-sz: 2.5rem; }
html.has-bar { --ss-bar-h: 2.5rem; --ss-bar-now: var(--ss-bar-sz); }
html.has-bar body { padding-top: calc(var(--ss-header-h) + var(--ss-bar-h)); }
html.has-bar .ss-header { transform: translate3d(0, calc(var(--ss-bar-now) - var(--ss-bar-sz)), 0); }
@media (min-width: 992px) {
  html.has-bar body.ss-main { --ss-bar-h: 0rem; padding-top: 0; }
}
.ss-bar { position: relative; height: 2.5rem; background: #f7f7f7; color: #333; border-bottom: 1px solid var(--ss-line, #e6e6e6); box-sizing: border-box; overflow: hidden; }
.ss-bar[data-theme="pink"] { background: #ffecf3; color: #111; }
.ss-bar[data-theme="black"] { background: #111; color: #fff; }
.ss-bar-list { position: relative; height: 100%; margin: 0; padding: 0 calc(var(--ss-header-px, 1rem) + 4.5rem); list-style: none; }
.ss-bar-item { position: absolute; inset: 0 calc(var(--ss-header-px, 1rem) + 4.5rem); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; }
.ss-bar-item.is-on { opacity: 1; visibility: visible; }
.ss-bar-a { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: .75rem; line-height: 2.5rem; text-decoration: none; }
@media (min-width: 768px) { .ss-bar-a { font-size: .8125rem; } }
.ss-bar-a:hover { text-decoration: underline; color: inherit; }
.ss-bar-a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.ss-bar-ctl { position: absolute; right: calc(var(--ss-header-px, 1rem) - .75rem); top: 0; bottom: 0; display: flex; align-items: center; gap: .25rem; }
.ss-bar-cnt { font-size: .6875rem; line-height: 1; opacity: .6; font-variant-numeric: tabular-nums; }
.ss-bar-x { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: none; color: inherit; opacity: .7; cursor: pointer; transition: opacity .15s; }
.ss-bar-x:hover { opacity: 1; }
.ss-bar-x .ss-ico { width: 1rem; height: 1rem; }
@media (pointer: fine) { .ss-bar-x:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: -4px; border-radius: .25rem; } }
.ss-bar-cnt b { font-weight: inherit; }
.ss-bar[data-effect="fade"] .ss-bar-item { transition: opacity .4s ease, visibility 0s linear .4s; }
.ss-bar[data-effect="fade"] .ss-bar-item.is-on { transition: opacity .4s ease, visibility 0s; }
.ss-bar[data-effect="slide"] .ss-bar-item { opacity: 1; transform: translateY(100%); transition: transform .5s ease, visibility 0s linear .5s; }
.ss-bar[data-effect="slide"] .ss-bar-item.is-on { transform: translateY(0); }
.ss-bar[data-effect="slide"] .ss-bar-item.is-out { visibility: visible; transform: translateY(-100%); transition: transform .5s ease, visibility 0s; }
.ss-bar[data-effect="slide"] .ss-bar-item.is-in { visibility: visible; transition: none; }
@media (prefers-reduced-motion: reduce) { .ss-bar .ss-bar-item, .ss-bar .ss-bar-item.is-on { transition: none !important; } }

/* 페이지 사이 전환(View Transitions, D-PM83): 같은 사이트 안 이동을 짧게 페이드, 고정 머리·하단 상담 띠는 제자리 유지. 지원 안 하는 브라우저는 무시, 움직임 줄이기 설정이면 끔 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .ss-header { view-transition-name: ss-header; }
  .ss-consult { view-transition-name: ss-consult; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; animation-timing-function: ease; }
  ::view-transition-group(ss-header), ::view-transition-group(ss-consult) { animation: none; }
  ::view-transition-old(ss-header), ::view-transition-old(ss-consult) { display: none; }
  ::view-transition-new(ss-header), ::view-transition-new(ss-consult) { animation: none; }
}

/* 영상 팝업(커뮤니티 유튜브·숏츠, 메인 숏츠 공용) */
.cm-vpop { position: fixed; inset: 0; z-index: var(--ss-z-modal); display: none; align-items: center; justify-content: center; padding: 4.5rem var(--ss-edge) 2rem; }
.cm-vpop.is-open { display: flex; animation: ssFade .25s ease; }
.cm-vpop[hidden] { display: none; }
.cm-vpop-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); }
.cm-vpop-box { position: relative; width: min(var(--ss-content-pc), 100%, calc((100vh - 8rem) * 16 / 9)); }
.cm-vpop-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.cm-vpop-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cm-vpop-close { position: absolute; right: 0; bottom: calc(100% + 1rem); width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: none; cursor: pointer; }
.cm-vpop-close::before, .cm-vpop-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3.25rem; height: .25rem; border-radius: .125rem; background: var(--ss-white); transform: translate(-50%, -50%) rotate(45deg); }
.cm-vpop-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.cm-vpop-close:focus-visible { outline: 2px solid var(--ss-white); outline-offset: 2px; }
.cm-vpop.is-short .cm-vpop-box { width: min(26rem, 100%, calc((100vh - 8rem) * 9 / 16)); }
.cm-vpop.is-short .cm-vpop-frame { aspect-ratio: 9 / 16; }
@media (prefers-reduced-motion: reduce) { .cm-vpop.is-open { animation: none; } }