/* =========================================================
   쏠쏠 마케팅 랜딩페이지 6종 — 공통 스타일 (프로덕션 퍼블 버전)
   출처: 디자인/design-guide.md (v10), 디자인/mockup/shared.css(박디자 확정 목업)
   작성: 퍼블리셔(정퍼블) — 목업의 시각 결과물을 그대로 유지하면서
   BEM(Block-Element-Modifier) 클래스 규칙으로 재구성했습니다.
   * 빌드 도구 없이 순수 CSS만 사용합니다 (Tailwind/SCSS 등 미사용).
   ========================================================= */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  /* ---- Primary (브랜드 코어 레드) ---- */
  --red:#ED1B23;         /* Default */
  --red-hover:#C41017;   /* Hover */
  --red-active:#A00D13;  /* Active/Pressed */
  --red-light:#F14C52;   /* Light */
  --red-tint:#FEF1F2;    /* 옅은 배경(뱃지/알림) */
  --red-tint2:#FFE5E6;   /* 에러 배경 */

  /* ---- Secondary / Accent (아이콘·상태 구분용, 절제해서 사용) ---- */
  --purple:#6756ED;
  --pink:#F2358B;
  --green:#07B200;
  --green-tint:#E9F9E7;
  --blue:#0067C0;
  --info:#1B8BEC;
  --info-tint:#E1F1FF;
  --violet:#7C1BED;
  --orange:#F5793D;

  /* ---- Neutrals ---- */
  --black:#0E0E10;       /* 헤더/푸터/다크 버튼 */
  --black-hover:#262626;
  --gray-sub-btn:#898989;
  --gray-muted:#BEBEBE;
  --gray-disabled:#D9D9D9;

  --text-strong:#000000;
  --text-default:#222222;
  --text-body:#424242;
  --text-sub:#707070;
  --text-placeholder:#A0A0A0;
  --text-on-dark:#FFFFFF;

  --border:#E0E0E0;
  --border-light:#F0F0F0;
  --surface:#F9F9F9;
  --page-bg:#FAFAFA;
  --white:#FFFFFF;

  /* ---- Radius ---- */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:18px;
  --r-pill:999px;

  /* ---- Spacing (8px 기반, design-guide.md 1-3) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* ---- Elevation ---- */
  --shadow-sm:0 2px 8px rgba(14,14,16,.06);
  --shadow-md:0 8px 24px rgba(14,14,16,.08);
  --shadow-lg:0 20px 48px rgba(14,14,16,.14);
  --shadow-modal:0 24px 60px rgba(0,0,0,.30);

  /* ---- Layout ---- */
  --container-max:1200px;
  --header-h:64px;
  --section-pad-d:120px;   /* desktop */
  --section-pad-t:80px;    /* tablet */
  --section-pad-m:56px;    /* mobile */

  /* ---- Motion — 마이크로 인터랙션(design-guide.md 3-1) ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms;
  --dur-base:180ms;
  --dur-slow:320ms;

  /* ---- Motion — 스크롤 등장 애니메이션 (신규, 정퍼블 판단·근거는 component-spec.md 참고) ----
     디자인가이드에 정의되지 않은 신규 인터랙션이라 별도 토큰으로 분리했습니다.
     마이크로 인터랙션(180ms)보다 느리고, 더 부드럽게 감속하는 커브를 사용해
     "한 번, 크게, 부드럽게" 등장하는 느낌을 의도했습니다. */
  --dur-reveal:600ms;
  --ease-reveal:cubic-bezier(.16,.84,.44,1);
  --reveal-distance:24px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text-default);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;font-size:inherit;cursor:pointer;background:none;border:none;padding:0;color:inherit;appearance:none;text-align:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,h6,p,figure,fieldset{margin:0;}
fieldset{border:0;padding:0;}
table{border-collapse:collapse;}
::selection{background:var(--red-tint);color:var(--red);}

/* ---------------- 접근성: 스크린리더 전용 텍스트 / 본문 바로가기 ---------------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-48px;left:8px;z-index:1000;
  background:var(--black);color:var(--white);
  padding:12px 20px;border-radius:var(--r-sm);font-size:14px;font-weight:700;
  transition:top var(--dur-base) var(--ease);
}
.skip-link:focus{top:8px;}

/* ---------------- Typography scale (Style Guidelines 준수) ----------------
   H1 44 / H2 36 / H3 32 / H4 28 / H5 24 / H6 20 — 행간 130%
   Body B1 14(부제 확장 16) / B2 12 — 행간 150%
   ※ 확장 노트: 마케팅 히어로 서브헤드·긴 본문 가독성을 위해 B1(14px)을
   16px로 한 단계 키워 쓰는 것만 예외로 허용(색상·굵기 규칙은 동일 유지,
   투명하게 design-guide.md에 근거 명시).
------------------------------------------------------------------------- */
.h1{font-size:clamp(30px,4.4vw,44px);font-weight:800;line-height:1.3;letter-spacing:-.02em;color:var(--black);}
.h2{font-size:clamp(24px,3.4vw,36px);font-weight:800;line-height:1.3;letter-spacing:-.02em;color:var(--black);}
.h3{font-size:clamp(21px,2.6vw,32px);font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--black);}
.h4{font-size:22px;font-weight:800;line-height:1.3;color:var(--black);}
.h5{font-size:18px;font-weight:700;line-height:1.3;color:var(--black);}
.h6{font-size:15px;font-weight:700;line-height:1.3;color:var(--black);}
.b1{font-size:16px;font-weight:400;line-height:1.6;color:var(--text-body);}
.b1-bold{font-size:16px;font-weight:700;line-height:1.6;color:var(--text-default);}
.b2{font-size:13px;font-weight:400;line-height:1.55;color:var(--text-sub);}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--red);text-transform:uppercase;}
.text-accent{color:var(--red);}

/* ---------------- Layout helpers ---------------- */
.container{max-width:var(--container-max);margin:0 auto;padding:0 40px;}
.section{padding:var(--section-pad-d) 0;}
.section--alt{background:var(--surface);}
.section--dark{background:var(--black);color:var(--white);}
.section-head{max-width:720px;margin:0 0 var(--sp-8);}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head .h2{margin-top:var(--sp-3);}
.section-head .b1{margin-top:var(--sp-4);}

/* 섹션 상단 번호+이용부(eyebrow) 묶음 */
.kicker-row{display:flex;align-items:center;gap:14px;margin-bottom:var(--sp-1);}
.section-head--center .kicker-row{justify-content:center;}

/* 번호 배지(섹션 랜드마크) — 01~09 배지의 리듬을 6페이지 전체 섹션에 적용 */
.badge-number{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--red);color:var(--white);
  font-size:12px;font-weight:800;letter-spacing:0;flex:0 0 34px;
}
.badge-number--outline{background:var(--white);border:1.5px solid var(--red);color:var(--red);}

/* 상태 배지(준비중 등) */
.badge-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;
  background:var(--black);color:var(--white);
}
.badge-status--soon{background:var(--red-tint);color:var(--red);}
.badge-status--soon::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);}

.tag-pill{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--r-pill);font-size:11px;font-weight:700;}
.tag-pill--result{background:var(--red-tint);color:var(--red);font-size:13px;padding:10px 20px;}
.tag-pill--info{background:var(--info-tint);color:var(--info);}
.tag-pill--success{background:var(--green-tint);color:var(--green);}

/* ---------------- Header / GNB ---------------- */
.gnb{
  position:sticky;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  background:var(--black);
  display:flex;align-items:center;
}
.gnb .container{display:flex;align-items:center;justify-content:space-between;width:100%;}
.gnb__logo{display:flex;align-items:center;gap:9px;color:var(--white);font-weight:800;font-size:16px;flex:0 0 auto;}
.gnb__logo-mark{width:28px;height:28px;border-radius:8px;background:var(--red);display:flex;align-items:center;justify-content:center;}
.gnb__menu{display:flex;align-items:center;gap:30px;font-size:14px;color:#D9D9D9;font-weight:500;}
.gnb__item{position:relative;height:var(--header-h);display:flex;align-items:center;}
.gnb__link{display:flex;align-items:center;gap:4px;padding:6px 2px;transition:color var(--dur-base) var(--ease);background:transparent;border:none;color:inherit;font-size:inherit;font-weight:inherit;}
.gnb__link:hover,.gnb__link:focus-visible,.gnb__link--current{color:var(--white);}
.gnb__link--current{position:relative;}
.gnb__link--current::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--red);border-radius:2px;}
.gnb__caret{font-size:10px;transition:transform var(--dur-base) var(--ease);}
.gnb__item:hover .gnb__caret,.gnb__item--open .gnb__caret{transform:rotate(180deg);}

.gnb__dropdown{
  position:absolute;top:calc(var(--header-h) - 10px);left:50%;transform:translateX(-50%);
  background:var(--white);border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  padding:10px;width:230px;
  opacity:0;visibility:hidden;translate:0 6px;
  transition:opacity var(--dur-base) var(--ease),translate var(--dur-base) var(--ease),visibility var(--dur-base);
}
.gnb__item:hover .gnb__dropdown,.gnb__item:focus-within .gnb__dropdown,.gnb__item--open .gnb__dropdown{opacity:1;visibility:visible;translate:0 0;}
.gnb__dropdown-link{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:var(--r-sm);color:var(--text-default);}
.gnb__dropdown-link:hover,.gnb__dropdown-link:focus-visible{background:var(--red-tint);color:var(--red);}
.gnb__dropdown-desc{font-size:11px;color:var(--text-sub);font-weight:400;}
.gnb__dropdown-link:hover .gnb__dropdown-desc,.gnb__dropdown-link:focus-visible .gnb__dropdown-desc{color:var(--red-light);}
.gnb__dropdown-link--current{background:var(--red-tint);color:var(--red);}

.gnb__right{display:flex;align-items:center;gap:18px;font-size:12.5px;color:#A0A0A0;flex:0 0 auto;}
.gnb__lang{display:flex;align-items:center;gap:4px;}
.gnb__right a:hover{color:var(--white);}
.gnb__right-link--login{color:var(--white);}
.gnb__cta{
  height:38px;padding:0 18px;border-radius:var(--r-sm);
  background:var(--red);color:var(--white)!important;font-weight:700;font-size:13px;
  display:flex;align-items:center;transition:background var(--dur-base) var(--ease);
}
.gnb__cta:hover{background:var(--red-hover);}
.gnb__burger{display:none;width:44px;height:44px;border:none;background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:5px;}
.gnb__burger-bar{width:20px;height:2px;background:var(--white);border-radius:2px;transition:transform var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease);}
.gnb__burger--active .gnb__burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.gnb__burger--active .gnb__burger-bar:nth-child(2){opacity:0;}
.gnb__burger--active .gnb__burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------------- 모바일 내비게이션(드로어) ---------------- */
.mobile-nav{
  display:none;position:fixed;inset:var(--header-h) 0 0 0;background:var(--black);z-index:99;
  padding:28px 24px;overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),visibility var(--dur-base);
}
.mobile-nav--open{opacity:1;visibility:visible;transform:translateY(0);}
.mobile-nav__menu{display:flex;flex-direction:column;}
.mobile-nav__item{border-bottom:1px solid rgba(255,255,255,.08);}
.mobile-nav__link,.mobile-nav__toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:16px 4px;font-size:16px;font-weight:700;color:var(--white);min-height:44px;
  background:transparent;border:none;
}
.mobile-nav__toggle-caret{font-size:12px;transition:transform var(--dur-base) var(--ease);}
.mobile-nav__toggle--open .mobile-nav__toggle-caret{transform:rotate(180deg);}
.mobile-nav__submenu{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease);}
.mobile-nav__submenu--open{max-height:400px;}
.mobile-nav__submenu-link{display:block;padding:12px 12px 12px 16px;font-size:14px;color:#B9B9BD;min-height:44px;display:flex;align-items:center;}
.mobile-nav__submenu-link--current,.mobile-nav__submenu-link:hover,.mobile-nav__submenu-link:focus-visible{color:var(--white);}
.mobile-nav__cta{margin-top:24px;display:flex;flex-direction:column;gap:10px;}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 26px;border-radius:var(--r-sm);
  font-size:15px;font-weight:700;border:none;white-space:nowrap;
  transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),transform var(--dur-fast) var(--ease);
  min-width:44px;
}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--red);color:var(--white);}
.btn--primary:hover{background:var(--red-hover);}
.btn--primary:active{background:var(--red-active);}
.btn--primary:disabled,.btn--primary[aria-disabled="true"]{background:var(--gray-disabled);color:var(--white);cursor:not-allowed;transform:none;}
.btn--outline{background:var(--white);color:var(--text-default);border:1.5px solid var(--border);}
.btn--outline:hover{border-color:var(--red);color:var(--red);}
.btn--outline:active{background:var(--red-tint);border-color:var(--red-active);color:var(--red-active);}
.btn--outline:disabled,.btn--outline[aria-disabled="true"]{border-color:var(--border);color:var(--gray-muted);background:var(--surface);cursor:not-allowed;transform:none;}
.btn--outline-dark{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.35);}
.btn--outline-dark:hover{border-color:var(--white);}
.btn--dark{background:var(--black);color:var(--white);}
.btn--dark:hover{background:var(--black-hover);}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;}
.cta-row--center{justify-content:center;}

/* ---------------- Hero ---------------- */
.hero{padding:88px 0 var(--section-pad-d);}
.hero--centered{text-align:center;}
.hero--centered .hero__inner{max-width:780px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);}
.hero--centered .hero__media{width:100%;max-width:760px;margin-top:var(--sp-2);}
.hero--split .hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center;}
.hero__copy{display:flex;flex-direction:column;gap:var(--sp-5);}
.hero__copy .badge-status{align-self:flex-start;}
.hero__lead{color:var(--text-body);max-width:560px;}
.hero--centered .hero__lead{max-width:640px;margin:0 auto;}
.hero__note{color:var(--text-placeholder);}

/* ---------------- Split (zig-zag) layout ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:center;}
.split--reverse{direction:rtl;}
.split--reverse>*{direction:ltr;}
.split__copy{display:flex;flex-direction:column;gap:var(--sp-4);}
.split__media .placeholder,.split__media .admin-mock{aspect-ratio:4/3;}

/* ---------------- Placeholder / concept image box ---------------- */
.placeholder{
  position:relative;border-radius:var(--r-lg);border:1.5px dashed #C9C9C9;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:32px 24px;min-height:280px;text-align:center;overflow:hidden;
}
.placeholder--16x8{aspect-ratio:16/8;}
.placeholder--4x3{aspect-ratio:4/3;}
.placeholder--3x4{aspect-ratio:3/4;}
.placeholder--mini{min-height:auto;padding:var(--sp-3);gap:4px;}
.placeholder--mini .placeholder__label{font-size:11px;}
.placeholder--flush{border-radius:0;border:none;min-height:220px;}
.placeholder--flush.placeholder--compact{min-height:160px;}
.placeholder__icon{width:44px;height:44px;color:var(--text-placeholder);}
.placeholder__label{font-size:13px;font-weight:800;color:var(--text-sub);}
.placeholder__desc{font-size:12px;color:var(--text-placeholder);max-width:340px;line-height:1.55;}
.placeholder figcaption{display:flex;flex-direction:column;gap:10px;}
.placeholder__tag{position:absolute;top:12px;left:12px;font-size:10px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:var(--r-pill);}
.placeholder__tag--illust{background:#FDE9F4;color:var(--pink);}
.placeholder__tag--stock{background:var(--info-tint);color:var(--info);}
.placeholder__tag--mock{background:var(--green-tint);color:var(--green);}
.placeholder__watermark{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.placeholder__watermark-text{
  font-size:26px;font-weight:800;color:rgba(14,14,16,.10);
  letter-spacing:.3em;transform:rotate(-18deg);white-space:nowrap;
}

/* ---------------- 관리자 화면 목업 (UI mockup — 박디자 제작 가능 범위) ---------------- */
.admin-mock{position:relative;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--white);overflow:hidden;box-shadow:var(--shadow-sm);}
.admin-mock--padded{padding:24px;}
.admin-mock__tag{position:absolute;z-index:2;top:10px;left:10px;font-size:10px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:var(--r-pill);}
.admin-mock__bar{height:34px;background:#EDEDED;display:flex;align-items:center;gap:6px;padding:0 12px;}
.admin-mock__dot{width:9px;height:9px;border-radius:50%;background:#D9D9D9;}
.admin-mock__body{padding:20px;display:flex;gap:16px;}
.admin-mock__body--column{flex-direction:column;}
.admin-mock__side{flex:0 0 84px;display:flex;flex-direction:column;gap:8px;}
.admin-mock__side-item{display:block;height:9px;border-radius:5px;background:var(--border-light);}
.admin-mock__side-item:first-child{background:var(--red-tint);}
.admin-mock__side-item--h16{height:16px;}
.admin-mock__main{flex:1;display:flex;flex-direction:column;gap:10px;}
.admin-mock__row{height:11px;border-radius:5px;background:var(--border-light);}
.admin-mock__row--w40{width:40%;}
.admin-mock__row--w60{width:60%;}
.admin-mock__row--w80{width:80%;}
.admin-mock__row--h14{height:14px;}
.admin-mock__row--h16{height:16px;}
.admin-mock__card{border:1px solid var(--border-light);border-radius:var(--r-sm);padding:12px;display:flex;flex-direction:column;gap:8px;}
.admin-mock__card-cols{display:flex;gap:8px;}
.admin-mock__card-cols .admin-mock__card{flex:1;}
.admin-mock__caption{margin-top:10px;padding:10px 14px 0;font-size:11.5px;color:var(--text-sub);text-align:center;}
.admin-mock__caption b{color:var(--red);font-weight:700;}
.admin-mock__certificate{border:1px solid var(--border-light);border-radius:var(--r-sm);padding:24px;text-align:center;}
.admin-mock__certificate-title{font-size:13px;font-weight:800;color:var(--black);}
.admin-mock__certificate-name{margin:14px 0 4px;font-weight:700;}

/* ---------------- 문제제기 번호 목록(1번 페이지 섹션A) ---------------- */
.problem-list{display:flex;flex-direction:column;gap:14px;margin-top:6px;}
.problem-list__item{display:flex;gap:10px;}
.problem-list__marker{color:var(--red);font-weight:700;flex:0 0 auto;}

/* ---------------- Card grid ---------------- */
.card-grid{display:grid;gap:var(--sp-5);}
.card-grid--2{grid-template-columns:repeat(2,1fr);max-width:900px;margin:0 auto;}
.card-grid--3{grid-template-columns:repeat(3,1fr);}
.card-grid--4{grid-template-columns:repeat(4,1fr);}
.card-grid--6{grid-template-columns:repeat(3,1fr);}
.card-grid--9{grid-template-columns:repeat(3,1fr);}
.card-grid--7{grid-template-columns:repeat(4,1fr);}

.feature-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);
  transition:box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
.feature-card:hover{box-shadow:var(--shadow-md);border-color:var(--border);transform:translateY(-3px);}
.feature-card__icon{width:44px;height:44px;border-radius:var(--r-sm);background:var(--red-tint);display:flex;align-items:center;justify-content:center;color:var(--red);}
.feature-card__icon svg{width:22px;height:22px;}
.feature-card__title{font-size:16px;}
.feature-card__more{
  margin-top:auto;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--red);
  min-height:44px;padding:2px 0;background:transparent;border:none;
}
.feature-card__more:hover,.feature-card__more:focus-visible{color:var(--red-hover);gap:8px;}
.feature-card__more-icon{width:14px;height:14px;transition:translate var(--dur-base) var(--ease);}

/* 템플릿 갤러리(3번 페이지) */
.template-card{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);background:var(--white);transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);}
.template-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.template-card__thumb{aspect-ratio:3/4;background:linear-gradient(160deg,#F3F3F5,#E7E7EA);display:flex;align-items:center;justify-content:center;color:var(--text-placeholder);font-size:11px;font-weight:700;position:relative;}
.template-card__tag{position:absolute;top:8px;left:8px;background:rgba(14,14,16,.72);color:#fff;font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill);}
.template-card__meta{padding:12px 14px;}
.template-card__name{font-size:13px;font-weight:700;color:var(--text-default);}
.template-card__type{font-size:11px;color:var(--text-sub);margin-top:2px;}

/* 히어로 템플릿 미니 그리드(3번 페이지 히어로 — 7종 썸네일) */
.hero-template-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-3);width:100%;max-width:760px;margin-top:var(--sp-2);}

/* ---------------- Compare (Before/After) ---------------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
.compare__item{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);}
.compare__tag{padding:10px 16px;font-size:12px;font-weight:800;}
.compare__item--before .compare__tag{background:var(--surface);color:var(--text-sub);}
.compare__item--after .compare__tag{background:var(--red-tint);color:var(--red);}
.compare__body{min-height:220px;background:var(--white);}
.compare__body--compact{min-height:160px;}

/* ---------------- Scenario card (3번 페이지 사용예시) ---------------- */
.scenario-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4);}
.scenario-card__tag{align-self:flex-start;}
.scenario-card__title{font-size:18px;}

/* ---------------- 기타 유틸(문의 요소 개별 클래스) ---------------- */
.timeline-result{text-align:center;margin-top:var(--sp-6);}
.cert-toggle-list{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.table-note{margin-top:12px;text-align:center;}

/* ---------------- Timeline ---------------- */
.timeline{display:flex;gap:0;position:relative;}
.timeline--gap-lg{margin-bottom:var(--sp-8);}
.timeline__step{flex:1;position:relative;padding:0 var(--sp-4);text-align:center;}
.timeline__step::before{
  content:'';position:absolute;top:17px;left:-50%;right:50%;height:2px;background:var(--border);
}
.timeline__step:first-child::before{display:none;}
.timeline__dot{width:34px;height:34px;border-radius:50%;background:var(--red);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;margin:0 auto 14px;position:relative;z-index:1;}
.timeline__title{margin-bottom:4px;font-size:15px;}
.timeline--vertical{display:flex;flex-direction:column;gap:0;}
.timeline--vertical .timeline__step{display:flex;gap:16px;text-align:left;padding:0 0 28px;}
.timeline--vertical .timeline__step::before{top:36px;bottom:0;left:16px;right:auto;width:2px;height:auto;}
.timeline--vertical .timeline__dot{margin:0;flex:0 0 34px;}

/* ---------------- Growth chart (수치 없는 추상 우상향 그래프) ---------------- */
.growth-chart{border-radius:var(--r-lg);border:1px solid var(--border);background:var(--white);padding:var(--sp-6);}
.growth-chart--center{max-width:640px;margin:0 auto;}
.growth-chart svg{width:100%;height:auto;display:block;}
.growth-chart__caption{margin-top:10px;font-size:11.5px;color:var(--text-placeholder);text-align:center;}

/* ---------------- Comparison table (4번 페이지) ---------------- */
.comparison-table{border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden;background:var(--white);}
.comparison-table__table{width:100%;border-collapse:collapse;font-size:13.5px;}
.comparison-table__table thead th{background:var(--black);color:var(--white);font-weight:700;font-size:12.5px;text-align:left;padding:16px 20px;white-space:nowrap;}
.comparison-table__table tbody td{padding:16px 20px;border-top:1px solid var(--border-light);color:var(--text-body);vertical-align:top;line-height:1.55;}
.comparison-table__table tbody th{padding:16px 20px;border-top:1px solid var(--border-light);color:var(--black);font-weight:800;font-size:13.5px;text-align:left;vertical-align:top;}
.comparison-table__row{transition:background var(--dur-base) var(--ease);}
.comparison-table__row:hover{background:var(--surface);}
.comparison-table__row--flash{background:var(--red-tint);animation:flashRow 1.6s var(--ease);}
.comparison-table__row--flash th{color:var(--red);}
@keyframes flashRow{0%{background:var(--red-tint);}100%{background:transparent;}}

/* ---------------- 3단 토글 (5번 페이지, 시각 목업 · 비인터랙티브) ---------------- */
.toggle-demo{margin-top:24px;text-align:center;}
.toggle-demo__label{margin-bottom:10px;font-weight:700;color:var(--text-default);}
.toggle3{display:inline-flex;background:var(--surface);border-radius:var(--r-sm);padding:4px;gap:4px;}
.toggle3__option{padding:9px 16px;border-radius:6px;font-size:12.5px;font-weight:700;color:var(--text-sub);}
.toggle3__option--active{background:var(--black);color:var(--white);}

/* ---------------- 수료증 항목 on/off 데모 스위치 (3번 페이지, 실제 키보드 조작 가능) ---------------- */
.cert-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm);}
.cert-toggle__label{font-size:13px;color:var(--text-default);font-weight:600;}
.cert-toggle__switch{width:40px;height:22px;border-radius:20px;background:var(--gray-disabled);position:relative;display:inline-block;flex:0 0 auto;transition:background var(--dur-base) var(--ease);}
.cert-toggle__switch--on{background:var(--red);}
.cert-toggle__knob{position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left var(--dur-base) var(--ease);}
.cert-toggle__switch--on .cert-toggle__knob{left:20px;}
.cert-toggle__switch:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.cert-preview__field{transition:opacity var(--dur-base) var(--ease);}
.cert-preview__field--off{opacity:.15;}

/* ---------------- 미니탭 (2번 페이지 히어로) ---------------- */
.minitabs{display:flex;gap:8px;background:var(--surface);padding:6px;border-radius:var(--r-md);}
.minitabs__button{flex:1;border:none;background:transparent;padding:12px 14px;border-radius:var(--r-sm);font-size:13.5px;font-weight:700;color:var(--text-sub);transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease);}
.minitabs__button--active{background:var(--white);color:var(--red);box-shadow:var(--shadow-sm);}
.minitabs__button:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.minitabs__panels{margin-top:var(--sp-4);position:relative;}

/* ---------------- CTA final ---------------- */
.cta-final{background:var(--black);color:var(--white);padding:var(--sp-9) 0;text-align:center;}
.cta-final__title{color:var(--white);}
.cta-final__desc{color:#B9B9BD;max-width:560px;margin:var(--sp-4) auto 0;}
.cta-final .cta-row{justify-content:center;margin-top:var(--sp-6);}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--black);color:#898989;padding:56px 0 24px;}
.site-footer__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08);}
.site-footer__brand{max-width:280px;}
.site-footer__brand .gnb__logo{margin-bottom:14px;}
.site-footer__desc{color:#898989;}
.site-footer__links{display:flex;gap:56px;flex-wrap:wrap;}
.site-footer__col-title{color:var(--white);font-weight:700;font-size:13px;margin-bottom:12px;}
.site-footer__link{display:block;color:#898989;font-size:13px;line-height:2.1;min-height:22px;}
.site-footer__link:hover,.site-footer__link:focus-visible{color:var(--white);}
.site-footer__bottom{padding-top:18px;font-size:11.5px;color:#6a6a6e;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ---------------- Accessibility: focus ring ---------------- */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px;}

/* =========================================================
   스크롤 등장 애니메이션 (신규 — 대표님 요청, 2026-08-14)
   구현 방식: 순수 CSS(transition) + JS(IntersectionObserver)
   상세 판단 근거(타이밍·이징·지연 등)는 퍼블/component-spec.md 참고.

   진행 원칙:
   - JS 비활성/오류 시에도 콘텐츠가 보여야 하므로, 기본값은 항상 보임(opacity:1).
   - <html> 태그에 "js" 클래스가 있을 때만(=JS 정상 동작 시) 처음에 살짝 숨겼다가
     스크롤로 뷰포트에 들어오면 .reveal--visible을 붙여 나타나게 함.
   - prefers-reduced-motion(동작 최소화) 사용자는 애니메이션 없이 즉시 표시.
   ========================================================= */
.reveal{opacity:1;transform:none;}
.js .reveal{
  opacity:0;
  transform:translateY(var(--reveal-distance));
  transition:opacity var(--dur-reveal) var(--ease-reveal),transform var(--dur-reveal) var(--ease-reveal);
  will-change:opacity,transform;
}
.js .reveal--visible{opacity:1;transform:none;}

/* 카드/타임라인 그리드 안에서 순서대로 살짝 늦게 등장(스태거) */
.card-grid .reveal:nth-child(1){transition-delay:0ms;}
.card-grid .reveal:nth-child(2){transition-delay:80ms;}
.card-grid .reveal:nth-child(3){transition-delay:160ms;}
.card-grid .reveal:nth-child(4){transition-delay:240ms;}
.card-grid .reveal:nth-child(5){transition-delay:320ms;}
.card-grid .reveal:nth-child(6){transition-delay:400ms;}
.card-grid .reveal:nth-child(7){transition-delay:480ms;}
.card-grid .reveal:nth-child(8){transition-delay:560ms;}
.card-grid .reveal:nth-child(9){transition-delay:640ms;}
.timeline .reveal:nth-child(1){transition-delay:0ms;}
.timeline .reveal:nth-child(2){transition-delay:100ms;}
.timeline .reveal:nth-child(3){transition-delay:200ms;}
.timeline .reveal:nth-child(4){transition-delay:300ms;}
/* 텍스트가 이미지보다 살짝 먼저 나타나도록(자연스러운 시선 흐름) */
.split__media.reveal{transition-delay:120ms;}
.compare__item.reveal:nth-child(2){transition-delay:120ms;}

@media (prefers-reduced-motion:reduce){
  .reveal,.js .reveal{transition:none!important;transform:none!important;opacity:1!important;}
}

/* =========================================================
   반응형 Breakpoint 기준 (design-guide.md 3부 개발전달노트 동일 수치 — 임의 변경 없음)
   - ≥1280px : Desktop 전체 레이아웃(그리드 열 수 설계값 그대로)
   - 1024–1279px : Small desktop — 카드 그리드 3→2열 등 축소
   - 768–1023px : Tablet — GNB는 유지하되 드롭다운 폭 축소, split 2열은 1열로
   - <768px : Mobile — GNB 햄버거로 전환, 모든 split/grid 1열 스택,
     비교표는 가로 스크롤+첫 열 sticky, 카드형 갤러리는 가로 스와이프
   ========================================================= */
@media (max-width:1279px){
  .card-grid--6,.card-grid--9{grid-template-columns:repeat(2,1fr);}
  .card-grid--7,.card-grid--4{grid-template-columns:repeat(3,1fr);}
  .hero-template-grid{grid-template-columns:repeat(4,1fr);}
  .container{padding:0 28px;}
}

@media (max-width:1023px){
  :root{--section-pad-d:var(--section-pad-t);}
  .hero--split .hero__inner{grid-template-columns:1fr;gap:var(--sp-6);}
  .hero--split .hero__media{order:-1;}
  .split{grid-template-columns:1fr;gap:var(--sp-6);}
  .split--reverse{direction:ltr;}
  .card-grid--3,.card-grid--4{grid-template-columns:repeat(2,1fr);}
  .compare{grid-template-columns:1fr;}
  .timeline{flex-direction:column;gap:24px;}
  .timeline__step::before{display:none;}
  .timeline__step{text-align:left;display:flex;gap:14px;padding:0;}
  .timeline__dot{margin:0;flex:0 0 34px;}
}

@media (max-width:767px){
  :root{--section-pad-d:var(--section-pad-m);}
  .container{padding:0 20px;}
  .gnb__menu,.gnb__lang,.gnb__right a:not(.gnb__cta){display:none;}
  .gnb__cta{height:36px;padding:0 14px;font-size:12.5px;}
  .gnb__burger{display:flex;}
  .mobile-nav{display:block;}
  .hero{padding:56px 0 var(--section-pad-m);}
  .card-grid--2,.card-grid--3,.card-grid--4,.card-grid--6,.card-grid--9,.card-grid--7{grid-template-columns:1fr;}
  .split__media .placeholder,.split__media .admin-mock{min-height:220px;}
  .site-footer__top{flex-direction:column;gap:28px;}
  .site-footer__links{gap:32px;}
  .cta-final .cta-row{flex-direction:column;align-items:stretch;}
  .cta-final .btn{width:100%;}
  /* 카드형 갤러리(템플릿·히어로 썸네일 등) 가로 스와이프 전환 */
  .swipe-mobile{display:flex;overflow-x:auto;gap:var(--sp-4);scroll-snap-type:x mandatory;padding-bottom:8px;margin:0 -20px;padding-left:20px;padding-right:20px;}
  .swipe-mobile>*{flex:0 0 68%;scroll-snap-align:start;}
  .swipe-mobile.hero-template-grid>*{flex:0 0 30%;}
  /* 비교표: 가로 스크롤 + 첫 열 sticky */
  .comparison-table{overflow-x:auto;}
  .comparison-table__table{min-width:760px;}
  .comparison-table__table th:first-child,.comparison-table__table td:first-child{position:sticky;left:0;background:var(--white);z-index:1;box-shadow:2px 0 6px rgba(0,0,0,.04);}
  .comparison-table__table thead th:first-child{background:var(--black);}
}