/* ============================================================
   WIVer Color System — CSS Variables + Utility Classes
   ============================================================ */

/* ----- Color Variables ----- */

:root {
  /* ── Primary ── */
  --c-primary-800: #3b3486;
  --c-primary-600: #5a4bd1;
  --c-primary-500: #6c5ce7;
  --c-primary-300: #a29bfe;
  --c-primary-50: #f0edff;

  /* ── Secondary & Accent ── */
  --c-navy-950: #1a1a2e;
  --c-navy-900: #2d2b55;
  --c-cyan-500: #00b4d8;
  --c-cyan-200: #90e0ef;

  /* ── Neutral ── */
  --c-white: #ffffff;
  --c-gray-50: #f8f8fb;
  --c-gray-100: #f0f0f5;
  --c-gray-200: #e5e5ec;
  --c-gray-300: #d1d5db;
  --c-gray-400: #9ca3af;
  --c-gray-500: #6b7280;
  --c-gray-600: #4b5563;
  --c-gray-800: #1f2937;

  /* ── Semantic ── */
  --c-info: #3b82f6;
  --c-success: #10b981;
  --c-warning: #f59e0b;
  --c-error: #ef4444;
}

/* ============================================================
   Text Color Classes
   ============================================================ */

/* ── Primary ── */

.text-primary-800,
.text-primary-800
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-primary-800) !important;
}

.text-primary-600,
.text-primary-600
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-primary-600) !important;
}

.text-primary-500,
.text-primary-500
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-primary-500) !important;
}

.text-primary-300,
.text-primary-300
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-primary-300) !important;
}

.text-primary-50,
.text-primary-50
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-primary-50) !important;
}

/* ── Secondary & Accent ── */

.text-navy-950,
.text-navy-950
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-navy-950) !important;
}

.text-navy-900,
.text-navy-900
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-navy-900) !important;
}

.text-cyan-500,
.text-cyan-500
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-cyan-500) !important;
}

.text-cyan-200,
.text-cyan-200
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-cyan-200) !important;
}

/* ── Neutral ── */

.text-white,
.text-white
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-white) !important;
}

.text-gray-50,
.text-gray-50
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-gray-50) !important;
}

.text-gray-100,
.text-gray-100
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-gray-100) !important;
}

.text-gray-200,
.text-gray-200
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-gray-200) !important;
}

.text-gray-300,
.text-gray-300
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-gray-300) !important;
}

.text-gray-400,
.text-gray-400
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-gray-400) !important;
}

.text-gray-500,
.text-gray-500
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-gray-500) !important;
}

.text-gray-600,
.text-gray-600
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-gray-600) !important;
}

.text-gray-800,
.text-gray-800
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-gray-800) !important;
}

/* ── Semantic ── */

.text-info,
.text-info
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-info) !important;
}

.text-success,
.text-success
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-success) !important;
}

.text-warning,
.text-warning
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-warning) !important;
}

.text-error,
.text-error
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li,
    ol,
    ul,
    td,
    th,
    dt,
    dd,
    label,
    strong,
    em,
    b,
    i,
    small,
    blockquote,
    figcaption,
    cite,
    div
  ) {
  color: var(--c-error) !important;
}

/* ============================================================
   Background Color Classes
   ============================================================ */

/* ── Primary ── */
.bg-primary-800 {
  background-color: var(--c-primary-800) !important;
}
.bg-primary-600 {
  background-color: var(--c-primary-600) !important;
}
.bg-primary-500 {
  background-color: var(--c-primary-500) !important;
}
.bg-primary-300 {
  background-color: var(--c-primary-300) !important;
}
.bg-primary-50 {
  background-color: var(--c-primary-50) !important;
}

/* ── Secondary & Accent ── */
.bg-navy-950 {
  background-color: var(--c-navy-950) !important;
}
.bg-navy-900 {
  background-color: var(--c-navy-900) !important;
}
.bg-cyan-500 {
  background-color: var(--c-cyan-500) !important;
}
.bg-cyan-200 {
  background-color: var(--c-cyan-200) !important;
}

/* ── Neutral ── */
.bg-white {
  background-color: var(--c-white) !important;
}
.bg-gray-50 {
  background-color: var(--c-gray-50) !important;
}
.bg-gray-100 {
  background-color: var(--c-gray-100) !important;
}
.bg-gray-200 {
  background-color: var(--c-gray-200) !important;
}
.bg-gray-300 {
  background-color: var(--c-gray-300) !important;
}
.bg-gray-400 {
  background-color: var(--c-gray-400) !important;
}
.bg-gray-500 {
  background-color: var(--c-gray-500) !important;
}
.bg-gray-600 {
  background-color: var(--c-gray-600) !important;
}
.bg-gray-800 {
  background-color: var(--c-gray-800) !important;
}

/* ── Semantic ── */
.bg-info {
  background-color: var(--c-info) !important;
}
.bg-success {
  background-color: var(--c-success) !important;
}
.bg-warning {
  background-color: var(--c-warning) !important;
}
.bg-error {
  background-color: var(--c-error) !important;
}

/* ============================================================
   Reset
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin-block: 0;
}

/* iOS Safari 자동 전화번호 감지 링크 색상 초기화 */
a[href^='tel'] {
  color: inherit !important;
  text-decoration: none !important;
}

/* ============================================================
   Common Layout
   ============================================================ */

/* Container */
.inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .inner {
    padding-inline: 16px;
  }
}

/* Elementor Icon 크기 정돈 */
.elementor-widget-icon .elementor-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
div.elementor-widget-icon-list
  ul.elementor-icon-list-items
  span.elementor-icon-list-icon
  svg {
  margin: 0;
}
div.elementor-widget-icon-list
  ul.elementor-icon-list-items
  span.elementor-icon-list-text {
  padding-inline-start: 0;
}

/* List Style */
.elementor-widget-text-editor ul {
  padding-left: 0.25rem;
}
.elementor-widget-text-editor ul li {
  list-style: none;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
.elementor-widget-text-editor ul li:before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 0.25rem;
  height: 0.25rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--c-primary-300);
  margin-top: calc(0.8em - 0.125rem);
}

/* ============================================================
   Responsive BR
   ============================================================
   
   <br class="br-pc">             PC에서만 줄바꿈
   <br class="br-tab">            태블릿에서만 줄바꿈
   <br class="br-mo">             모바일에서만 줄바꿈
   <br class="br-pc br-tab">      PC+태블릿 줄바꿈, 모바일 제거
   <br class="br-pc br-mo">       PC+모바일 줄바꿈, 태블릿 제거
   <br class="br-tab br-mo">      태블릿+모바일 줄바꿈, PC 제거
   
   ============================================================ */

.br-tab {
  display: none;
}
.br-mo {
  display: none;
}
.br-pc {
  display: block;
}

@media (max-width: 1024px) {
  .br-pc {
    display: none;
  }
  .br-tab {
    display: block;
  }
}

@media (max-width: 767px) {
  .br-tab {
    display: none;
  }
  .br-mo {
    display: block;
  }
}