/* 이펙터 · 2026-10 제작 · 공통 색·간격 변수와 기본 스타일 */

:root {
  --ss-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --ss-font-en: "Montserrat", var(--ss-font);

  --ss-ink: #111111;
  --ss-text: #333333;
  --ss-text-2: #444444;
  --ss-muted: #666666;
  --ss-weak: #888888;
  --ss-line: #e6e6e6;
  --ss-line-strong: #cccccc;
  --ss-bg-soft: #f7f7f7;
  --ss-white: #ffffff;
  --ss-point: #ff8ac4;
  --ss-point-soft: #ffecf3;

  --ss-s-1: .25rem; --ss-s-2: .5rem;  --ss-s-3: 1rem;   --ss-s-4: 1.5rem;
  --ss-s-5: 2rem;   --ss-s-6: 3rem;   --ss-s-7: 4rem;    --ss-s-8: 5rem;
  --ss-s-9: 7.5rem; --ss-s-10: 10rem;

  --ss-section-y: var(--ss-s-7);

  --ss-edge: 1rem;
  --ss-gutter: .625rem;
  --ss-content-pc: 81.25rem;
  --ss-header-h: 3rem;

  --bs-gutter-x: var(--ss-gutter);
  --bs-body-font-family: var(--ss-font);
  --bs-body-color: var(--ss-text);
  --bs-body-bg: var(--ss-white);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-link-color-rgb: 17, 17, 17;
  --bs-link-hover-color-rgb: 68, 68, 68;
}
@media (min-width: 576px)  { :root { --ss-edge: 1.5rem; --ss-gutter: .75rem; } }
@media (min-width: 768px)  { :root { --ss-edge: 2rem; --ss-gutter: 1rem; --ss-section-y: var(--ss-s-8); } }
@media (min-width: 992px)  { :root { --ss-edge: 2.5rem; --ss-section-y: var(--ss-s-9); --ss-header-h: 5rem; } }
@media (min-width: 1400px) { :root { --ss-edge: calc(var(--ss-gutter) / 2); } }

html { font-size: 16px; }
@media (min-width: 1920px) { html { font-size: clamp(16px, .83333vw, 21.3333px); } }
@media (min-width: 992px) and (max-width: 1249.98px) { html { font-size: clamp(15px, calc(11.155px + .3876vw), 16px); } }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--ss-font);
  color: var(--ss-text);
  background: var(--ss-white);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; }
img { height: auto; vertical-align: top; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--ss-ink); margin: 0; }
:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
button, [type="button"], [type="submit"], [type="reset"] { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
html button[class*="close"]:focus-visible, html [data-ss-modal-close]:focus-visible, html button[aria-label="닫기"]:focus-visible { outline-offset: -4px; border-radius: .5rem; }
@media (pointer: coarse) { html button[class*="close"]:focus, html [data-ss-modal-close]:focus, html button[aria-label="닫기"]:focus, html button[class*="close"]:focus-visible, html [data-ss-modal-close]:focus-visible, html button[aria-label="닫기"]:focus-visible { outline: 0; } }
@media (pointer: coarse) { a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible, [tabindex]:not(input):not(textarea):not(select):focus-visible { outline: 0; } }
@media (max-width: 767.98px) { .ss-brm { display: none; } }
.en { font-family: var(--ss-font-en); }

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
  --bs-gutter-x: var(--ss-gutter);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--ss-edge);
}
@media (min-width: 576px)  { .container { max-width: 100%; } }
@media (min-width: 768px)  { .container { max-width: 100%; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: calc(var(--ss-content-pc) + 1rem); --bs-gutter-x: 1rem; padding-inline: calc(var(--bs-gutter-x) / 2); } }
.row { --bs-gutter-x: var(--ss-gutter); }
@media (min-width: 768px)  { .row { --bs-gutter-x: 1rem; } }

.img-ph {
  position: relative;
  display: block;
  width: 100%;
  background: #b5b5b5 url(../img/common/header/CO03-01-01.svg) center / 35% auto no-repeat;
  overflow: hidden;
}
.img-ph::after, .img-ph[data-img-todo]::after { content: none !important; }
:where(img[data-img]) { display: block; width: 100%; height: auto; object-fit: cover; }

.fx-up { opacity: 0; transform: translateY(2rem); transition: opacity .7s ease, transform .7s ease; }
.fx-up.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fx-up { opacity: 1; transform: none; transition: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }