/* ===== root_semantic_layout.css ===== */
:root{
  --wh: #ffffff;
  --bk: #000000;

  --gray-50: #F5F5F5;
  --gray-100: #EFEDED;
  --gray-200: #E0E0E0;
  --gray-300: #D9D9D9;  /* #D9D9D9 · #D5D5D5 그룹 */
  --gray-400: #C4C7C7;
  --gray-500: #6B7280;
  --gray-600: #666666;
  --gray-700: #5A5A5A;
  --gray-800: #444748;
  --gray-900: #222222;  /* #222222 · #1C1B1F · #1B1C1C 그룹 */
  --gray-950: #121212;  /* #121212 · #111111 그룹 */

  --red-50: #FFF5F5;
  --red-100: #FFDDDD;
  --red-200: #FFC4C4;
  --red-300: #FFA8A8;
  --red-400: #FF8080;
  --red-500: #FF6868;
  --red-600: #FF4242;
  --red-700: #CE3535;
  --red-800: #A02929 ;
  --red-900: #7C2020;
  --red-950: #5F1818;

  --orange-50: #FFF0EC;  /* #FB4007 @ 8% (=#FB400714) over white */
  --orange-100: #FFE0D6;
  --orange-200: #FEC3B0;
  --orange-300: #FB9F7D;
  --orange-400: #FB7038;
  --orange-500: #FB4007;
  --orange-600: #E23A06;
  --orange-700: #BC3005;
  --orange-800: #8F2404;
  --orange-900: #6E1C03;
  --orange-950: #4B1302;

  --blue-50: #F1F4F8;
  --blue-100: #E0E7F0;
  --blue-200: #C4D0DF;
  --blue-300: #9FB1C7;
  --blue-400: #7790AE;
  --blue-500: #4D6B8C;
  --blue-600: #425C78;
  --blue-700: #364B62;
  --blue-800: #2A3B4D;
  --blue-900: #202D3B;
  --blue-950: #161E27;

  --green-50: #EDF9F3;
  --green-100: #E9F6F0;
  --green-200: #D1EEE2;
  --green-300: #6AC9A2;
  --green-400: #6AC9A2;
  --green-500: #1AAF66;
  --green-600: #22A06B;
  --green-700: #1F9261;
  --green-800: #18724C;
  --green-900: #13583B;
  --green-950: #0E432D;

  --yellow-50: #FFFBED;
  --yellow-100: #FFF4D2;
  --yellow-200: #FFEAAC;
  --yellow-300: #FFE188;
  --yellow-400: #FFDB71;
  --yellow-500: #FFD24E;
  --yellow-600: #E8BF46;
  --yellow-700: #B59537;
  --yellow-800: #8C742A;
  --yellow-900: #6B5820;
  --yellow-950: #463810;

  --purple-50: #F9F3FF;
  --purple-100: #ECE0F9;
  --purple-200: #D0B6E6;
  --purple-300: #B992DA;
  --purple-400: #9860C9;
  --purple-500: #7E34BD;
  --purple-600: #6612AF;
  --purple-700: #5D109F;
  --purple-800: #480D7C;
  --purple-900: #380A60;
  --purple-950: #2B084A;


  /* ==================== */
  /* primary color    */
  /* ==================== */
  --primary-50: var(--green-50);
  --primary-100: var(--green-100);
  --primary-200: var(--green-200);
  --primary-300: var(--green-300);
  --primary-400: var(--green-400);
  --primary-500: var(--green-500);
  --primary-600: var(--green-600);
  --primary-700: var(--green-700);
  --primary-800: var(--green-800);
  --primary-900: var(--green-900);
  --primary-950: var(--green-950);

  --surface-0: #ffffff;   
  --surface-50: var(--gray-50);
  --surface-100: var(--gray-100);
  --surface-200: var(--gray-200);
  --surface-300: var(--gray-300);
  --surface-400: var(--gray-400);
  --surface-500: var(--gray-500);
  --surface-600: var(--gray-600);
  --surface-700: var(--gray-700);
  --surface-800: var(--gray-800);
  --surface-900: var(--gray-900);
  --surface-950: var(--gray-950);
  --surface-1000: #000000;  

  /* ==================== */
  /* Background Colors */
  /* ==================== */
  /* 기본 배경 (Neutral Backgrounds) */
  --bg-default: var(--surface-0);
  --bg-primary: var(--surface-50);
  --bg-brand: var(--primary-500);;
  --disabled-bg: var(--surface-50);
  --bg-banner: linear-gradient(90deg, #16AE67 0%, #FC0 100%);

  /* ==================== */
  /* Text Colors */
  /* ==================== */
  /* 기본 텍스트 (Neutral Text) - 진함 → 연함 순서 */
  --text-default: var(--surface-950);
  --text-primary: var(--surface-900);
  --text-secondary: var(--surface-800);
  --text-tertiary: var(--surface-600);
  --text-quaternary: var(--surface-700);
  --disabled-text: var(--surface-600);
  /* 브랜드 컬러 텍스트 (Brand Text) */
  --text-brand: var(--primary-500);

  /* ==================== */
  /* Border Colors */
  /* ==================== */
  /* 기본 보더 (Neutral Borders) */
  --border-default: var(--surface-300);
  --border-primary: var(--surface-400);
  --border-brand: var(--primary-500);
  --border-inverse: var(--surface-0);
  --disabled-border: var(--surface-50);

  /* Heading Text */
  --text-h1: 3rem; /* 48px */
  --text-h2: 2em; /* 32px */
  --text-h3: 1.625em; /* 26px */
  --text-h4: 1.5em; /* 24px */
  --text-h5: 1.25em; /* 20px */
  --text-h6: 1em; /* 16px */
  
  /* Text */
  --text-2xs: 0.625rem;  /* 10px */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-md: 1.125rem;   /* 18px */
  --text-lg: 1.25rem;   /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2rem;      /* 32px */
  --text-4xl: 2.25rem;   /* 36px */

  /* font-weight */
  --font-thin: 100;
  --font-extraLight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* line-height */
  --leading-base: 1em;
  --leading-sm: 1.25em;
  --leading-md: 1.35em;
  --leading-lg: 1.375em;
  --leading-xl: 1.5em;

  /* border-radius */
  --rounded-sm: 0.375rem; /* 6px */
  --rounded-md: 0.5rem; /* 8px */
  --rounded-lg: 1rem;
  --rounded-xl: 1.5em;
  --rounded-circle: 50%;
  --rounded-full: 10em;

  /* ==================== */
  /* Spacing Scale (gap / padding / margin) */
  /* ==================== */
  --space-4xs: 0.125rem; /* 2px */
  --space-3xs: 0.25rem; /* 4px */
  --space-2xs: 0.375rem; /* 6px */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 0.625rem; /* 10px */
  --space-md: 0.75rem; /* 12px */
  --space-lg: 0.875rem; /* 14px */
  --space-xl: 1rem;
  --space-2xl: 1.25rem;
  --space-3xl: 1.5rem;
  --space-4xl: 2rem;

}

/* ==================== */
/* 반응형 타이포그래피 */
/* ==================== */
@media (max-width: 1024px) {
  :root {
    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 12px;
  }
}

/* ==================== */
/* Dark Mode 활성화: <html data-theme="dark"> */
/* ==================== */
:root[data-theme="dark"] {
  --surface-0: #000000;
  --surface-1000: #ffffff;

  /* surface(중성) 스케일 반전 */
  --surface-50:  var(--gray-950);
  --surface-100: var(--gray-900);
  --surface-200: var(--gray-800);
  --surface-300: var(--gray-700);
  --surface-400: var(--gray-600);
  --surface-500: var(--gray-500);
  --surface-600: var(--gray-400);
  --surface-700: var(--gray-300);
  --surface-800: var(--gray-200);
  --surface-900: var(--gray-100);
  --surface-950: var(--gray-50);

  /* primary(브랜드) 스케일 반전 */
  --primary-50:  var(--orange-950);
  --primary-100: var(--orange-900);
  --primary-200: var(--orange-800);
  --primary-300: var(--orange-700);
  --primary-400: var(--orange-600);
  --primary-500: var(--orange-500);
  --primary-600: var(--orange-400);
  --primary-700: var(--orange-300);
  --primary-800: var(--orange-200);
  --primary-900: var(--orange-100);
  --primary-950: var(--orange-50);

  /* Secondary Button (연오랜지 — 소프트 브랜드) */
  --btn-secondary-bg: var(--primary-500);
  --btn-secondary-bg-hover: var(--primary-600);
  --btn-secondary-bg-pressed: var(--primary-700);
  --btn-secondary-text: var(--surface-1000);
  --btn-secondary-border: var(--primary-500);  
  /* CTA Button (흰 배경 + 브랜드 텍스트 — filled pill) */
  --btn-cta-bg: var(--wh);
  --btn-cta-bg-hover: var(--primary-900);
  --btn-cta-text: var(--primary-500);
  --btn-cta-text-hover: var(--primary-600);
  --btn-cta-text-pressed: var(--primary-800);

}

/* ===== root_system_layout.css ===== */
:root{
  --font-family: 'Pretendard',sans-serif;

  /* ==================== */
  /* Height */
  /* ==================== */
  --height-xs: 1.5rem; /* 24px */
  --height-sm: 3rem; /* 37px */
  --height-md: 2.5rem;  /* 40px */
  --height-lg: 3rem; /* 48px*/
  --height-xl: 3.375rem; /* 54px*/ 
  --height-2xl: 3.5rem; /* 56px*/

  /* ==================== */
  /* Button Components */
  /* ==================== */
  /* Primary Button (브랜드 컬러)  */
  --btn-primary-bg: var(--primary-500);
  --btn-primary-bg-hover: var(--primary-600);
  --btn-primary-bg-pressed: var(--primary-700);
  --btn-primary-text: var(--wh);

  /* Secondary Button (연오랜지 — 소프트 브랜드) */
  --btn-secondary-bg: var(--primary-50);
  --btn-secondary-bg-hover: var(--primary-50);
  --btn-secondary-bg-pressed: var(--primary-50);
  --btn-secondary-text: var(--primary-500);
  --btn-secondary-border: var(--primary-50);

  /* Tertiary Button (화이트 02 — 기본 아웃라인) */
  --btn-tertiary-bg: var(--surface-0);
  --btn-tertiary-bg-hover: var(--surface-100);
  --btn-tertiary-bg-pressed: var(--surface-200);
  --btn-tertiary-text: var(--surface-950);
  --btn-tertiary-border: var(--surface-200);

  /* Inverse Button (블랙 — 어두운 버튼) */
  --btn-inverse-bg: var(--surface-1000);
  --btn-inverse-bg-hover: var(--surface-900);
  --btn-inverse-bg-pressed: var(--surface-800);
  --btn-inverse-text: var(--surface-0);

  /* Neutral Button (블랙 반투명 — 오버레이) */
  --btn-neutral-bg: rgba(0,0,0,0.5);
  --btn-neutral-bg-hover: rgba(0,0,0,0.65);
  --btn-neutral-text: var(--wh);

  /* Subtle Button (그레이 — 연한 버튼) */
  --btn-subtle-bg: var(--surface-200);
  --btn-subtle-bg-hover: var(--surface-300);
  --btn-subtle-bg-pressed: var(--surface-300);
  --btn-subtle-text: var(--surface-600);
  --btn-subtle-border: var(--surface-200);

  /* Ghost Button (텍스트 — 투명 배경) */
  --btn-ghost-text: var(--surface-950);
  --btn-ghost-text-hover: var(--primary-500);
  --btn-ghost-text-pressed: var(--primary-600);
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: transparent;

  /* CTA Button (흰 배경 + 브랜드 텍스트 — filled pill) */
  --btn-cta-bg: var(--surface-900);
  --btn-cta-bg-hover: var(--surface-950);
  --btn-cta-text: var(--wh);
  --btn-cta-text-hover: var(--wh);
  --btn-cta-text-pressed: var(--wh);


  /* ==================== */
  /* Tab Component */
  /* ==================== */
  /* 공통 (Ghost 버튼과 동일 조합: 기본 #121212 → 활성 #FB4007) */
  --tab-text: var(--surface-950);
  --tab-text-active: var(--primary-500);
  --tab-bg: var(--bg-default);
  --tab-text-hover: var(--text-brand);

  /* Line 스타일 (밑줄) */
  --tab-line-min-width: 5rem;
  --tab-line-border: transparent;
  --tab-line-border-active: var(--primary-500);

  /* ==================== */
  /* Form Components */
  /* ==================== */
  /* Input Field */
  --input-bg: var(--surface-0);
  --input-text: var(--surface-600);
  --input-border: var(--surface-300);
  --input-border-focus: var(--primary-500);
  --input-placeholder: var(--surface-600);
  --input-label: var(--surface-700);
  --input-hint: var(--surface-500);

  --tag-bg: var(--surface-0);
  --tag-text: var(--surface-900);
  --tag-border: var(--surface-300);

}

/* ==================== */
/* 반응형 높이 */
/* ==================== */
@media (max-width: 1024px) {
  :root {
    --height-xs: 2rem;
  }
}

/* ===== components.css ===== */
@charset "utf-8";

/* ==================== */
/* Typography */
/* ==================== */
.text-h1{font-size: var(--text-h1); font-weight: var(--font-bold);}
.text-h2{font-size: var(--text-h2); font-weight: var(--font-bold);}
.text-h3{font-size: var(--text-h3); font-weight: var(--font-bold);}
.text-h4{font-size: var(--text-h4); font-weight: var(--font-bold);}
.text-h5{font-size: var(--text-h5); font-weight: var(--font-bold);}
.text-h6{font-size: var(--text-h6); font-weight: var(--font-bold);}

.text-4xl{font-size: var(--text-4xl);}
.text-3xl{font-size: var(--text-3xl);}
.text-2xl{font-size: var(--text-2xl);}
.text-xl{font-size: var(--text-xl);}
.text-lg{font-size: var(--text-lg);}
.text-md{font-size: var(--text-md);}
.text-base{font-size: var(--text-base);}
.text-sm{font-size: var(--text-sm);}
.text-xs{font-size: var(--text-xs);}
.text-2xs{font-size: var(--text-2xs);}

.text-desc{font-size: var(--text-sm); color: var(--text-tertiary);}


/* ==================== */
/* Button    */
/* ==================== */
.btn_wrap{display: flex; flex-wrap: wrap; gap: var(--space-md);}
.btn_base{ font-weight: var(--font-semibold); line-height: var(--leading-base); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--rounded-full); padding: 0 var(--space-md); transition: all 0.2s; border: 1px solid transparent; margin: 0 !important; cursor: pointer; word-break: keep-all; text-decoration: none !important; gap: var(--space-lg);}
input[type="button"].btn_base{ height: var(--height-sm);}
.btn_base.circle{border-radius: var(--rounded-circle);}
/* Size */
.btn_base.xs{
  height: var(--height-xs); font-size: var(--text-xs); padding: 0 var(--space-xs); /* 24px */
  & i{ font-size: var(--text-2xs);}
}
.btn_base.sm{
  height: 2rem; font-size: var(--text-xs); padding: 0 var(--space-xs); /* 32px */
  & i{ font-size: var(--text-xs);}
}
.btn_base.md{
  height: var(--height-md); font-size: var(--text-sm); padding: 0 var(--space-xl); /* 40px */
  & i{font-size: var(--text-base);}
}
.btn_base.lg{
  height: var(--height-xl); font-size: var(--text-md); padding: 0 2rem; /* 56px */
  & i{font-size: var(--text-lg);}
}
.btn_base.xl{
  height: var(--height-2xl); font-size: var(--text-base); padding: 0 var(--space-3xl);
  & i{font-size: var(--text-xl);}
}
.btn_base.full{
  height: var(--height-xl);  width: 100%; font-size: var(--text-base); line-height: var(--leading-md); padding: var(--space-md);
  & i{font-size: var(--text-xl);}
}
/* btn icon gap */
.btn_base:has(i){gap: var(--space-3xs);}
.btn_base.lg:has(i){gap: var(--space-xs);}
.btn_base.xl:has(i){gap: var(--space-xs);}
/* icon only  */
.btn_base.icon_only{aspect-ratio: 1/1; padding: 0; border-radius: var(--rounded-circle);}
/* Primary - 가장 중요한 액션 (CTA) */
.btn_base.primary{
  background-color: var(--btn-primary-bg); color: var(--btn-primary-text);
  & i{color: inherit;}
  &:hover{background-color: var(--btn-primary-bg-hover);}
  &:active{background-color: var(--btn-primary-bg-pressed);}
}
/* Secondary - 보조 액션, outline 스타일 */
.btn_base.secondary{
  background-color: var(--btn-secondary-bg); border-color: var(--btn-secondary-border); color: var(--btn-secondary-text);
  & i{color: inherit;}
  &:hover{background-color: var(--btn-secondary-bg-hover);}
  &:active{background-color: var(--btn-secondary-bg-pressed);}
}
/* Tertiary - 세 번째 우선순위 */
.btn_base.tertiary{
  background-color: var(--btn-tertiary-bg); border-color: var(--btn-tertiary-border); color: var(--btn-tertiary-text);
  & i{color: inherit;}
  &:hover{background-color: var(--btn-tertiary-bg-hover);}
  &:active{background-color: var(--btn-tertiary-bg-pressed);}
}
/* Inverse - 반전 스타일 (어두운 배경) */
.btn_base.inverse{
  background-color: var(--btn-inverse-bg); color: var(--btn-inverse-text);
  & i{color: inherit;}
  &:hover{background-color: var(--btn-inverse-bg-hover);}
  &:active{background-color: var(--btn-inverse-bg-pressed);}
}
/* Neutral - 중립적인 액션 */
.btn_base.neutral{
  background-color: var(--btn-neutral-bg); color: var(--btn-neutral-text);
  & i{color: inherit;}
  &:hover{background-color: var(--btn-neutral-bg-hover);}
}
/* Subtle - 시각적 강조도가 낮은 버튼 */
.btn_base.subtle{
  background-color: var(--btn-subtle-bg); border-color: var(--btn-subtle-border); color: var(--btn-subtle-text);
  & i{color: inherit;}
  &:hover{background-color: var(--btn-subtle-bg-hover);}
  &:active{background-color: var(--btn-subtle-bg-pressed);}
}
/* Ghost - 보더/배경 없음 */
.btn_base.ghost{ 
  height: auto; background-color: var(--btn-ghost-bg); color: var(--btn-ghost-text); border: 0; padding: 0;
  & i{ color: inherit;}
  &:hover{ background-color: var(--btn-ghost-bg-hover); color: var(--btn-ghost-text-hover);}
  &:active{ color: var(--btn-ghost-text-pressed);}
  &.lg{ font-size: var(--text-base);}
  &.md{ font-size: var(--text-sm);}
  &.sm{ font-size: var(--text-xs);}
}
/* CTA - 흰 배경 + 브랜드 텍스트 (filled pill) */
.btn_base.cta{
  background-color: var(--btn-cta-bg); color: var(--btn-cta-text);
  & i{ color: inherit;}
  &:hover{ background-color: var(--btn-cta-bg-hover); color: var(--btn-cta-text-hover);}
  &:active{ color: var(--btn-cta-text-pressed);}
}
/* Disabled */
.btn_base:disabled,
.btn_base:disabled:hover{ background-color: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-border); cursor: not-allowed;}
.btn_base.ghost:disabled{ background-color: transparent; color: var(--disabled-text);}

/* ==================== */
/* Input Field    */
/* ==================== */
.input_label { 
  display: flex; flex-wrap: wrap; align-items: center; font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--input-label); margin-bottom: var(--space-xs);
  & .hint{font-size: var(--text-xs); font-weight: var(--font-medium); line-height: var(--leading-xl); display: block; width: 100%; color: var(--input-hint); margin-top: var(--space-3xs);}
}
.input_base {
  height: var(--height-sm); font-size: var(--text-xs); padding: 0 var(--space-xl); border-radius: var(--rounded-full) !important; width: 100%; border: 2px solid var(--input-border);  outline: none; box-sizing: border-box; color: var(--input-text); background-color: var(--input-bg); transition: all 0.2s;
  &::placeholder { color: var(--input-placeholder); font-size: inherit; text-decoration: none;}
  &:focus::placeholder { color: transparent;}
  &:focus { border-color: var(--input-border-focus);}
  &:disabled { background-color: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed;}
  /* bottom_line 스타일 */
  &.bottom_line {
    background-color: transparent; border: 0; border-bottom: 1px solid var(--input-border); border-radius: 0; padding-left: 0; padding-right: 0;
    &:focus { border-bottom: 2px solid var(--input-border-focus);}
  }
}
/* Input 사이즈 */
.input_base.sm { height: var(--height-xs); font-size: var(--text-xs); padding: 0 var(--space-xs);}
.input_base.md { height: var(--height-sm); font-size: var(--text-sm); }
.input_base.lg { height: var(--height-md); font-size: var(--text-base); padding: 0 var(--space-xl); border-radius: var(--rounded-sm);}
.input_base.xl { height: var(--height-xl); font-size: var(--text-base); padding: 0 var(--space-xl); border-radius: var(--rounded-md);}
/* Field 정보 메시지 */
.field_message {
  display: none; align-items: baseline; gap: var(--space-3xs);  font-size: var(--text-xs);  font-weight: var(--font-medium); color: var(--input-message); position: absolute; top: calc(100% + var(--space-xs)); left: 0; width: 100%;
  & i {font-size: var(--text-sm); color: inherit;}
  &.error { color: var(--input-message-error);}
  &.success { color: var(--input-message-success);}
}
.input_field:has(.input_base:focus) .field_message { display: flex;} 
/* 인풋 안 아이콘 */
.input_with_icon{
  position: relative; display: flex; align-items: center; width: 100%;
   & .input_base{padding-right: 3em;}
  & i{position: absolute; top: 50%; right: var(--space-xl); transform: translateY(-50%); color: var(--icon-default);}
  & .input_base.sm{
    padding-right: var(--space-4xl);
    & + i{right: var(--space-xs);}
  }
  & .input_base.md{
    padding-right: 2.75em;
    & + i{right: var(--space-md);}
  }
}

/* ==================== */
/* Tab Content          */
/* ==================== */
.tab_wrap { display: flex; justify-content: center; margin-bottom: 3.125rem;}
.tab_list { 
  display: flex; flex-wrap: wrap; justify-content: center;
  .tab_item { background-color: var(--tab-bg); padding: 0 2.5rem;
    .inner { font-size: var(--text-md); font-weight: var(--font-bold); display: block; width: 100%; text-align: center; color: var(--tab-text); box-sizing: border-box; transition: all 0.2s;}
    &:hover .inner{ color: var(--tab-text-hover);}
  }
  /* Line */
  &.line {
    .tab_item {
      .inner { border-bottom: 2px solid var(--tab-line-border);}
      &.active .inner { color: var(--tab-text-active); border-bottom-color: var(--tab-line-border-active);}
    }
  }

}
/* Swiper 슬라이드 모드(초기화 시): flex 정렬 해제하여 가로 슬라이드 */
.swiper-initialized .tab_list { flex-wrap: nowrap; justify-content: flex-start; }
.swiper-initialized .tab_list .tab_item { flex: 0 0 auto; }

/* ==================== */
/* Tag                  */
/* ==================== */
.tag_base{ 
  font-size: var(--text-xs); font-weight: var(--font-bold); height: var(--height-xs); display: inline-flex; align-items: center; gap: var(--space-3xs); color: var(--tag-text); background-color: var(--tag-bg); border: 1px solid var(--tag-border); border-radius: var(--rounded-full); padding: 0 var(--space-xs);
  &.md{ height: var(--height-sm); font-size: var(--text-sm); padding: 0 var(--space-md);}
  & i{cursor: pointer;}
  &:hover{background-color: var(--tag-bg-hover);}
  &:active{background-color: var(--tag-bg-active);}
  &.disabled{color: var(--disabled-text); background-color: var(--disabled-bg); border-color: var(--disabled-border);}
}

/* ===== new_style.css ===== */
@charset "utf-8";

/* ==================== */
/* Base reset = 워드프레스 적용 시 삭제 */
/* ==================== */
html{font-size: clamp(12px, 1.5vw, 16px);}
* { box-sizing: border-box; }
body { font-size: 1rem; margin: 0; font-family: var(--font-family); color: var(--text-default); background-color: var(--bg-default);}
img { display: block; max-width: 100%; }
a{text-decoration: none; color: inherit;}


@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
.ft_gm{font-family: 'GMarketSans';}
/* Header ------------------------------------------------ */
.mob_view{display: none;}
@media (max-width: 1024px) {
  .mob_view{display: block;}
  .pc_view{display: none;}

}
.magazin_wrap {overflow: hidden;  padding: 5rem 0;} 
.magazin_inner { margin: 0 auto; padding: 0 1%;}
.magazin_head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xl); flex-wrap: wrap; margin-bottom: 4.375rem;}
.magazin_title { display: flex; align-items: baseline; gap: var(--space-md); margin: 0; font-size: var(--text-h1); font-weight: var(--font-bold); line-height: var(--leading-base); flex-wrap: wrap; color: var(--text-brand);}
.magazin_eng { font-size: var(--text-xl); color: var(--text-brand); font-weight: var(--font-medium); }
.magazin_controls { display: flex; align-items: center; gap: var(--space-xl); }
.magazin_controls .btn_base.inverse{margin-left: var(--space-3xl) !important;}

/* List (Swiper) ---------------------------------------- */
.magazin_swiper { overflow: hidden;}
.magazin_swiper .swiper-slide { height: auto; }

/* Card ------------------------------------------------- */
.magazin_card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; min-width: 0;}
.magazin_card:hover{color: inherit;}
.magazin_cate {
  --notch: var(--rounded-xl); 
  min-width: 7.625rem;
  position: absolute; top: 0; left: 0; z-index: 2; padding-right: var(--space-md); padding-bottom: var(--space-md); background-color: var(--bg-default); pointer-events: none; border-radius: 0 0 var(--notch) 0;
  & .btn_base{width: 100%;}
  &::before{
    content: ""; display: block; width: var(--notch); height: var(--notch); position: absolute; left: 0; bottom: calc(-1 * var(--notch));
    background: radial-gradient(circle at bottom right, transparent calc(var(--notch) - 0.5px), var(--bg-default) var(--notch));
  }
  &::after{
    content: ""; display: block; width: var(--notch); height: var(--notch); position: absolute; top: 0; right: calc(-1 * var(--notch));
    background: radial-gradient(circle at bottom right, transparent calc(var(--notch) - 0.5px), var(--bg-default) var(--notch));
  }
}

.magazin_thumb { position: relative; border-radius: var(--rounded-xl);}
.magazin_thumb > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rounded-xl); aspect-ratio: 16 / 10;}

.magazin_card:hover .magazin_thumb.detail_video::after{content: "\e1c4";font-family: 'Material Symbols Outlined'; transition: all 0.2s; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--wh); font-size: 3rem; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.5); border-radius: var(--rounded-circle);}  
.magazin_people { position: absolute; right: 1rem; bottom: -1rem; display: flex; }
.magazin_people img { position: relative; width: 2.5rem; height: 2.5rem; border-radius: var(--rounded-circle); border: 5px solid var(--border-inverse); object-fit: cover;}
.magazin_people img + img { margin-left: calc(-1 * var(--space-md)); }
.magazin_people img { z-index: calc(99 - sibling-index()); }

/* 연사 / 연사 상세 */
.magazin_speaker { display: flex; align-items: center; flex-wrap: wrap; margin: var(--space-3xl) 0 0;  font-size: var(--text-sm); line-height: var(--leading-sm);}
.magazin_speaker .name { color: var(--text-tertiary);} 
.magazin_speaker .role { margin-left: var(--space-3xs);  color: var(--text-default); font-weight: var(--font-bold); }  
.magazin_speaker .bar { width: 1px; height: 0.75rem; margin: 0 var(--space-xs); background-color: var(--surface-300);}

/* 타이틀 */
.magazin_card_title { margin: 1.125rem 0 0; font-size: var(--text-xl); font-weight: var(--font-bold); line-height: var(--leading-sm); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
/* 서브 텍스트 */
.magazin_card_desc { margin: var(--space-xs) 0 0; font-size: var(--text-md); color: var(--surface-600); line-height: var(--leading-xl); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

/* 반응형 */
@media (max-width: 1440px) {
  .magazin_head { margin-bottom: var(--space-4xl); }
  .magazin_controls{margin-left: auto;}
}
@media (max-width: 1024px) {
  .magazin_title { font-size: var(--text-3xl); }
}

/* ==================== */
/* List Page            */
/* ==================== */
.magazin_tabs { margin-bottom: var(--space-4xl); overflow: visible; padding: 0 7%; }
.magazin_tabs .swiper-slide { width: auto; }
@media (min-width: 1025px) { 
  .magazin_tabs .swiper-wrapper { justify-content: center;} 
  .magazin_tabs .tab_item + .tab_item{border-left: 2px solid var(--border-default);}
}
@media (max-width: 1024px) { .magazin_tabs{border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); padding: var(--space-2xl) 0 var(--space-xl);}}

/* Toolbar — 카운트 + 검색 */
.list_toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: var(--space-2xl); margin-bottom: var(--space-3xl); }
.list_count { display: flex; align-items: center; gap: var(--space-2xs); margin: 0; font-size: var(--text-sm); color: var(--text-tertiary); font-weight: var(--font-bold);}
.list_count i { font-size: var(--text-lg); color: var(--text-primary); }
.list_count b { color: var(--text-brand); font-weight: var(--font-bold); }
.list_count .bar { width: 1px; height: 0.875rem; margin: 0 var(--space-xs); background-color: var(--surface-300); }
.list_search { width: 14rem; max-width: 100%; min-width: 7rem; }

/* Grid — 3열 */
.magazin_grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--space-3xl); row-gap: 3.5rem; }
.magazin_badge { position: absolute; top: var(--space-md); left: var(--space-md); z-index: 2; pointer-events: none; }
.magazin_pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: 4rem; }
.magazin_pagination .pagination_num{margin: 0 1.875rem;  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);}
@media (max-width: 1024px) {
  .magazin_grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4xl);}
  .magazin_pagination .pagination_num{margin: 0;}
}
@media (max-width: 640px) {
  .magazin_grid { grid-template-columns: 1fr; }
}
@media (min-width: 641px) {
  .magazin_grid .magazin_card{ 
  & .magazin_thumb{ transition: all 0.2s;}
  &:hover{
    transition: all 0.2s;
    & .magazin_thumb{transform: translateY(-10px); transition: all 0.2s; box-shadow: 0 17px 18px rgba(0,0,0,0.2)}
  }

}
}
/* ==================== */
/* Detail Page          */
/* ==================== */
.detail_inner { max-width: 1200px; box-sizing: content-box; }
.detail_hero { padding-top: 5rem; padding-bottom: 0; }
.detail_hero_head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xl); margin-bottom: 2.375rem; }
.detail_hero_titles { display: flex; gap: 4.5rem; align-items: flex-start; width: 100%; }
.detail_badge { pointer-events: none; }
.detail_title { flex: 1 1 0; min-width: 0; margin: 0; font-size: 3rem; font-weight: var(--font-bold); line-height: 1.3; color: var(--text-default); }
.detail_meta { display: flex; flex-wrap: wrap; row-gap: var(--space-sm); column-gap: var(--space-3xl); align-items: center; margin: 0; font-size: var(--text-sm); color: var(--surface-600); }
.detail_meta b { color: var(--text-default); font-weight: var(--font-bold); }
.detail_hero_sub { flex: 0 0 25.625rem; margin: 0; padding-left: 1.875rem; border-left: 2px solid var(--text-default); font-size: var(--text-md); font-weight: var(--font-bold); line-height: 1.5; color: var(--text-default); }

/* Figure (본문 이미지 공통) */
.detail_figure { margin: 0; }
.detail_figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--rounded-xl); object-fit: cover; }
.detail_figure figcaption { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--surface-600); letter-spacing: 0.02em; }
.detail_hero_figure { position: relative; text-align: center; }
.detail_hero_figure img { aspect-ratio: 16 / 9; }

/* Content grid : main(article) + aside(작성자) + actions(목록으로) */
.detail_content { padding: 5rem 0; }
.detail_grid { display: grid; grid-template-columns: 1fr 19.1875rem; grid-template-areas: "main aside" "actions aside"; column-gap: 3.125rem; }
.detail_article { grid-area: main; min-width: 0; }
.detail_article p{ word-break: break-all;}


.detail_aside { grid-area: aside; position: sticky; top: 10rem; align-self: start; display: flex; flex-direction: column; gap: var(--space-3xl); }
.detail_actions { grid-area: actions; display: flex; justify-content: center; margin-top: 3.125rem; }

/* Article 본문 */
.detail_p { margin: 0; font-size: var(--text-md); line-height: 1.8; color: var(--surface-900); }
.detail_h2 { margin: var(--space-4xl) 0 0; font-size: 1.65rem; font-weight: var(--font-bold); line-height: 1.3; letter-spacing: -0.02em; color: var(--text-default); }
.detail_h2 + .detail_p { margin-top: var(--space-2xl); }
.detail_article > .detail_figure { margin-top: var(--space-4xl); }
.detail_quote { margin: var(--space-4xl) 0 0; padding-left: var(--space-4xl); border-left: 4px solid var(--border-brand); }
.detail_quote_text { margin: 0; font-size: 1.45rem; font-weight: var(--font-bold); line-height: 1.5; color: var(--text-default); }
.detail_quote_by { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--surface-600); }
/* 영상 임베드 (16:9 기본 / Shorts 9:16) */
.detail_video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.detail_video_shorts iframe { width: 65%; aspect-ratio: 9 / 16; margin: 0 auto; }
.detail_video_shorts figcaption { text-align: center; }
.detail_video_shorts .detail_article p:has(iframe){text-align: center; position: relative;}

.detail_video_shorts .detail_article p:has(iframe)::before{content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 5vw; background-color: var(--bg-default); pointer-events: none; z-index: 1; }
.detail_video_shorts .detail_article p:has(iframe)::after{content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 5vw; background-color: var(--bg-default); pointer-events: none; z-index: 1; }

@media (max-width: 640px) {
  .detail_video_shorts iframe{width: 100%; }
}

.detail_figure_grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); margin-top: 3rem; }
.detail_figure_grid .detail_figure img { aspect-ratio: 4 / 3; }

/* 태그 */
.detail_tags { display: flex; gap: var(--space-3xl); align-items: flex-start; margin-top: 3rem; }
.detail_tags_label { flex-shrink: 0; font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-default); line-height: 1.6; }
.detail_tags_list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* 작성자 카드 (PC: aside sticky / 모바일: 목록으로 위로 reflow) */
.detail_author { background-color: var(--bg-primary); border-radius: var(--rounded-md); padding: var(--space-2xl); }
.detail_author_head { display: flex; gap: var(--space-xl); align-items: center; padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--border-primary); }
.detail_author_img { width: 3.5rem; height: 3.5rem; border-radius: var(--rounded-circle); object-fit: cover; flex-shrink: 0; }
.detail_author_meta { display: flex; flex-direction: column; gap: var(--space-3xs); }
.detail_author_name { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--text-default); }
.detail_author_role { font-size: var(--text-sm); color: var(--text-secondary); }
.detail_author_desc { margin: var(--space-lg) 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-quaternary); }
.detail_author_desc.page{margin-top: var(--space-3xl);}
.detail_author_desc.page a{display: block; text-decoration: underline; text-underline-offset: 3px; padding-top: var(--space-3xs); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #4D96FF;}
.detail_share { display: flex; gap: var(--space-md); justify-content: center; }

/* CTA 배너 */
.detail_cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3xl); margin-top: 5rem; padding: 3.75rem; border-radius: var(--rounded-xl); background-image: url("https://d3hjmc9lw655td.cloudfront.net/wp-content/uploads/2026/08/31232004/detail_cta.png"), var(--bg-banner); background-repeat: no-repeat, no-repeat; background-position: 76% bottom, center center; background-size: auto, cover;

}
.detail_cta_label { margin: 0 0 var(--space-md); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0.08em; color: var(--wh); opacity: 0.8; }
.detail_cta_title { margin: 0; font-size: var(--text-3xl); font-weight: var(--font-bold); line-height: 1.3; color: var(--wh);  word-break: keep-all;}

/* 추천 콘텐츠 */
.detail_recommend { border-top: 1px solid var(--border-default); padding: 5rem 0; }
.detail_recommend_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.75rem; }
.detail_recommend_title { margin: 0; font-size: var(--text-3xl); font-weight: var(--font-bold); }
.detail_recommend_head .btn_base{color: var(--text-tertiary);}
.detail_recommend_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.875rem; }
/* 추천 카드 뱃지: 이미지 아래 좌측 배치 (Figma) — 폭 늘어남 방지 */
.detail_recommend_grid .magazin_card > .btn_base { align-self: flex-start; margin-top: var(--space-2xl) !important; pointer-events: none; }

/* Detail 반응형 */
@media (max-width: 1024px) {
  .detail_grid { grid-template-columns: 1fr; grid-template-areas: "main" "aside" "actions"; row-gap: 0; }
  .detail_aside { position: static; padding-top: 2.5rem;}
  .detail_hero_titles { flex-direction: column; gap: var(--space-2xl); }
  .detail_hero_sub { flex: none; border-left: 0; padding-left: 0; }
  .detail_recommend_grid { display: flex; gap: 0; }
  .detail_hero_figure{ margin-left: calc(-1 * var(--space-3xl)); margin-right: calc(-1 * var(--space-3xl)); }
  .detail_hero_figure img, .detail_article > .detail_figure img { border-radius: 0; }
  .detail_hero_figure figcaption, .detail_article > .detail_figure figcaption { padding: 0 var(--space-3xl); }
}
@media (max-width: 640px) {
  .detail_title { font-size: var(--text-3xl); }
  .detail_cta {flex-direction: column; align-items: flex-start; padding: 2.7rem 2rem; background-size: 75%, cover; background-position: 185% 30px, center center; border-radius: var(--space-4xl); gap: 1.7rem;}
}
/* CTA 배너: 모바일 full-bleed (좌우 여백 제거) */
@media (max-width: 1024px) {
  .detail_cta { margin-left: calc(-1 * var(--space-3xl)); margin-right: calc(-1 * var(--space-3xl)); }
}