@charset "utf-8";

/* ============================================================
   (주)티에프네트웍스 — 공통 스타일시트
   흰 배경 / 진한 녹색 / 얇은 구분선 / 넉넉한 여백 / 모바일 우선
   ============================================================ */

/* ---------- 1. 디자인 토큰 ---------- */
:root{
  --paper:#FFFFFF;
  --mist:#F3F5F3;
  --green:#14452F;
  --green-mid:#2A6B4A;
  --ink:#16181A;
  --muted:#555C59;
  --rule:#DDE2DE;
  --rule-strong:#B4BEB8;
  --teal:#0B7A7F;      /* 효스토리 전용 */
  --blue:#1D4E89;      /* ESL 전용 */
  --orange:#C25A08;    /* 어린이집·교육시설 전용 강조 */

  --serif:"Noto Serif KR","Nanum Myeongjo",serif;
  --sans:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,
         "Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;

  --wrap:1200px;
  --gutter:clamp(20px,5vw,40px);
  --section:clamp(60px,8vw,112px);
  --bar-h:58px;
}

/* ---------- 2. 리셋 ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:19px;line-height:1.85;font-weight:400;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}

:focus-visible{outline:2px solid var(--green-mid);outline-offset:3px;}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:#fff;padding:12px 20px;}
.skip:focus{left:0;}
.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;}

/* ---------- 3. 레이아웃 ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.section{padding-top:var(--section);padding-bottom:var(--section);}
.section--mist{background:var(--mist);}
.section--tight{padding-top:clamp(44px,5.5vw,72px);padding-bottom:clamp(44px,5.5vw,72px);}
.rule{height:1px;background:var(--rule);border:0;margin:0;}
.mt-s{margin-top:18px;}
.mt-m{margin-top:clamp(26px,3.4vw,40px);}
.mt-l{margin-top:clamp(34px,4.5vw,56px);}

/* ---------- 4. 타이포그래피 ---------- */
.eyebrow{font-size:1.125rem;font-weight:700;letter-spacing:.1em;color:var(--green-mid);margin-bottom:20px;}
.eyebrow--teal{color:var(--teal);}
.eyebrow--blue{color:var(--blue);}

.display{font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,5.6vw,3.9rem);
  line-height:1.28;letter-spacing:-.025em;color:var(--green);}
.h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.85rem,3.8vw,2.75rem);
  line-height:1.38;letter-spacing:-.02em;color:var(--green);}
.h3{font-family:var(--sans);font-weight:700;font-size:1.3125rem;line-height:1.55;letter-spacing:-.01em;color:var(--ink);}
.lede{font-size:1.1875rem;color:var(--muted);line-height:1.9;}
.body{color:var(--muted);}
.body + .body{margin-top:1.1em;}
.note{font-size:1.0625rem;line-height:1.8;color:var(--muted);border-left:2px solid var(--rule-strong);padding-left:18px;}
.hint{font-size:.9375rem;color:var(--muted);line-height:1.7;}
.measure{max-width:52ch;}

/* ---------- 5. 버튼 ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;
  font-size:1.0625rem;font-weight:600;border:1px solid var(--green);background:var(--green);color:#fff;
  transition:background .18s ease,border-color .18s ease,color .18s ease;}
.btn:hover{background:var(--green-mid);border-color:var(--green-mid);}
.btn--ghost{background:transparent;color:var(--green);}
.btn--ghost:hover{background:var(--green);color:#fff;}
.btn--teal{background:var(--teal);border-color:var(--teal);}
.btn--teal:hover{background:#096367;border-color:#096367;}
.btn--blue{background:var(--blue);border-color:var(--blue);}
.btn--blue:hover{background:#173e6d;border-color:#173e6d;}
.btn--sm{padding:12px 22px;font-size:1rem;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.btn-row--tight{margin-top:20px;}

.textlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--green);
  border-bottom:1px solid var(--rule-strong);padding-bottom:3px;}
.textlink:hover{border-bottom-color:var(--green);}
.textlink--teal{color:var(--teal);}
.linkrow{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:24px;}

/* ---------- 6. 헤더 ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--rule);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px;}
.brand{display:flex;align-items:center;}
.brand-logo{width:auto;height:50px;display:block;}
.brand-logo--footer{height:56px;margin-bottom:6px;}
/* 텍스트 로고(구버전) 잔여 대비 */
.brand-mark{font-family:var(--serif);font-weight:700;font-size:1.4375rem;color:var(--green);letter-spacing:-.02em;}
.brand-sub{font-size:.8125rem;letter-spacing:.14em;color:var(--muted);}

.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,28px);}
.nav a{font-size:1.0625rem;font-weight:500;color:var(--ink);padding:6px 0;border-bottom:1px solid transparent;}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--green);color:var(--green);}
.header-cta{display:flex;align-items:center;gap:12px;}

.nav-toggle{display:none;background:none;border:1px solid var(--rule-strong);padding:10px 16px;
  font-size:1rem;font-weight:600;color:var(--green);}
.mobile-nav{display:none;border-top:1px solid var(--rule);background:var(--paper);}
.mobile-nav.is-open{display:block;}
.mobile-nav a{display:block;padding:16px 0;border-bottom:1px solid var(--rule);font-weight:500;}
.mobile-nav a:last-child{border-bottom:0;}

/* ---------- 7. 히어로 ---------- */
.hero{padding-top:clamp(50px,6.5vw,88px);padding-bottom:clamp(44px,5.5vw,72px);}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,4.5vw,60px);align-items:center;}
.hero .display{margin-bottom:24px;}
.hero-stripe{margin-top:clamp(36px,4.5vw,58px);border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(3,1fr);}
.hero-stripe div{padding:20px 20px 20px 0;border-right:1px solid var(--rule);}
.hero-stripe div:last-child{border-right:0;}
.hero-stripe dt{font-size:1.0625rem;letter-spacing:.08em;color:var(--green-mid);font-weight:700;}
.hero-stripe dd{margin:7px 0 0;font-size:1.0625rem;color:var(--muted);line-height:1.7;}

/* ---------- 8. 이미지 · 플레이스홀더 ---------- */
/* .ph 와 실제 <img>가 같은 비율 클래스를 공유하므로 사진 교체 시 레이아웃이 흔들리지 않습니다. */
.ph{background:var(--mist);border:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:18px;color:var(--muted);font-size:.9375rem;line-height:1.65;width:100%;}
.ph-what{font-weight:600;color:var(--ink);}
.ph-ratio{font-size:.875rem;letter-spacing:.06em;color:var(--muted);}

img.ph-img{width:100%;object-fit:cover;background:var(--mist);}

.r-21x9{aspect-ratio:21/9;}
.r-16x9{aspect-ratio:16/9;}
.r-3x2 {aspect-ratio:3/2;}
.r-4x3 {aspect-ratio:4/3;}
.r-1x1 {aspect-ratio:1/1;}
.r-4x5 {aspect-ratio:4/5;}

/* ---------- 9. 명세표 그리드 (시그니처) ---------- */
.spec{border-top:1px solid var(--rule-strong);margin-top:clamp(30px,3.6vw,46px);}
.spec--flush{margin-top:0;}
.spec-row{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:clamp(18px,3.6vw,52px);
  padding:clamp(26px,3.2vw,40px) 0;border-bottom:1px solid var(--rule);}
.spec-key{display:flex;flex-direction:column;gap:10px;}
.spec-key .idx{font-size:1rem;letter-spacing:.1em;color:var(--green-mid);font-weight:700;}
.spec-val .h3{margin-bottom:10px;}
.spec-row--teal .idx{color:var(--teal);}
.spec-row--blue .idx{color:var(--blue);}
.spec-row--orange .idx{color:var(--orange);}
.spec-row--orange .checks li::before{background:var(--orange);}

/* 업종 셀 그리드 */
.field-grid{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule-strong);border-left:1px solid var(--rule);
  margin-top:clamp(26px,3.4vw,44px);}
.field-grid--3{grid-template-columns:repeat(3,1fr);}
.field-cell{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:22px 20px;display:flex;flex-direction:column;gap:6px;}
.field-cell strong{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;}
.field-cell span{font-size:1rem;color:var(--muted);line-height:1.7;}

/* ---------- 9-1. 사진 배열 그리드 (인라인 스타일 대체) ---------- */
.photo-grid{display:grid;gap:12px;margin-top:clamp(24px,3.2vw,40px);}
.photo-grid--2{grid-template-columns:repeat(2,1fr);}
.photo-grid--3{grid-template-columns:repeat(3,1fr);}
.photo-grid--4{grid-template-columns:repeat(4,1fr);}

/* 체크 목록 */
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 32px;margin-top:8px;}
.checks li{position:relative;padding-left:20px;font-size:1.0625rem;color:var(--muted);line-height:1.75;}
.checks li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--green-mid);}
.checks--single{grid-template-columns:1fr;}

/* ---------- 10. 히스토리 타임라인 ---------- */
.timeline{margin-top:clamp(30px,3.6vw,46px);border-top:1px solid var(--rule-strong);}
.timeline li{display:grid;grid-template-columns:60px 1fr;gap:18px;padding:22px 0;
  border-bottom:1px solid var(--rule);align-items:baseline;}
.timeline .step{font-family:var(--serif);font-size:1.4375rem;font-weight:700;color:var(--teal);}
.timeline .what{font-size:1.1875rem;font-weight:600;}
.timeline .why{display:block;font-size:1.0625rem;font-weight:400;color:var(--muted);margin-top:4px;}

/* ---------- 11. 2단 구성 ---------- */
.two{display:grid;grid-template-columns:1fr;gap:clamp(28px,4.5vw,60px);align-items:start;}
.two--media{grid-template-columns:1fr;}

/* ---------- 12. 상담 폼 ---------- */
.form-wrap{margin-top:clamp(30px,3.6vw,46px);border-top:1px solid var(--rule-strong);padding-top:clamp(28px,3.2vw,40px);}
.field{display:flex;flex-direction:column;gap:9px;margin-bottom:22px;}
.field label{font-size:1.0625rem;font-weight:600;}
.field .req{color:var(--green-mid);margin-left:4px;}
.field input,.field select,.field textarea{font:inherit;font-size:1.0625rem;color:var(--ink);
  padding:13px 14px;border:1px solid var(--rule-strong);background:var(--paper);border-radius:0;width:100%;}
.field textarea{min-height:130px;resize:vertical;line-height:1.7;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 2px rgba(20,69,47,.14);}
.field-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;}
.consent{display:flex;gap:12px;align-items:flex-start;padding:18px;background:var(--mist);border:1px solid var(--rule);}
.consent input{width:18px;height:18px;flex:0 0 auto;margin-top:4px;}
.consent label{font-size:1.0625rem;font-weight:400;color:var(--muted);line-height:1.7;}
.form-status{margin-top:18px;padding:18px 20px;border:1px solid var(--rule-strong);
  background:var(--mist);font-size:1.0625rem;line-height:1.75;display:none;}
.form-status.is-shown{display:block;}
.form-status.is-error{border-color:#7c2d12;color:#7c2d12;background:#fdf5f2;}

/* ---------- 13. 푸터 ---------- */
.site-footer{border-top:1px solid var(--rule);padding:clamp(44px,5.5vw,68px) 0 36px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;}
.footer-grid h4{font-size:1.0625rem;letter-spacing:.1em;color:var(--green-mid);font-weight:700;margin-bottom:14px;}
.footer-grid li,.footer-grid p{font-size:1.0625rem;color:var(--muted);line-height:2;}
.footer-legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule);
  font-size:1rem;color:var(--muted);line-height:1.9;}
.footer-legal--bare{margin-top:0;padding-top:0;border-top:0;}
.footer-legal .co{color:var(--ink);font-weight:600;}
.footer-legal a{border-bottom:1px solid var(--rule-strong);}

/* ---------- 14. 고정 상담 버튼 ---------- */
.kakao-fab{position:fixed;right:24px;bottom:24px;z-index:90;display:inline-flex;align-items:center;gap:9px;
  padding:15px 22px;background:var(--green);color:#fff;font-size:1.0625rem;font-weight:600;
  box-shadow:0 6px 24px rgba(20,69,47,.22);}
.kakao-fab:hover{background:var(--green-mid);}

.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;
  border-top:1px solid var(--rule);background:var(--paper);
  padding-bottom:env(safe-area-inset-bottom);}
.mobile-bar ul{display:grid;grid-template-columns:repeat(3,1fr);}
.mobile-bar a{display:block;text-align:center;padding:16px 6px;font-size:1rem;font-weight:600;
  border-right:1px solid var(--rule);}
.mobile-bar li:last-child a{border-right:0;background:var(--green);color:#fff;}

/* ---------- 15. 모션 (progressive enhancement) ----------
   기본값은 '보이는 상태'입니다. 자바스크립트가 실행되지 않아도 본문이 모두 보입니다.
   <html> 에 .js 클래스가 붙은 경우에만 등장 애니메이션이 적용됩니다. */
.reveal{opacity:1;transform:none;}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.js .reveal.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal,.js .reveal.is-in{opacity:1;transform:none;transition:none;}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ---------- 16. 반응형 ---------- */
@media (min-width:760px){
  .two{grid-template-columns:1fr 1fr;}
  .two--media{grid-template-columns:1.05fr .95fr;}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;}
  .hero-grid{grid-template-columns:1.12fr .88fr;}
}

/* 태블릿: 사진 배열은 2열 */
@media (max-width:1023px){
  .photo-grid--3,.photo-grid--4{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:899px){
  .nav,.header-cta .btn{display:none;}
  .nav-toggle{display:inline-block;}
  .kakao-fab{display:none;}
  .mobile-bar{display:block;}
  body{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));}
}

@media (max-width:719px){
  body{font-size:17.5px;}
  .brand-logo{height:40px;}
  .spec-row{grid-template-columns:1fr;gap:14px;}
  .field-grid{grid-template-columns:repeat(2,1fr);}
  .checks{grid-template-columns:1fr;}
  .field-grid2{grid-template-columns:1fr;}
  .hero-stripe{grid-template-columns:1fr;}
  .hero-stripe div{border-right:0;border-bottom:1px solid var(--rule);padding-right:0;}
  .hero-stripe div:last-child{border-bottom:0;}
  /* 모바일 사진 배열: 2열 기본, 세로형은 1열 */
  .photo-grid--2,.photo-grid--3,.photo-grid--4{grid-template-columns:repeat(2,1fr);}
  .photo-grid--tall-1{grid-template-columns:1fr;}
}

@media (max-width:419px){
  .photo-grid--2,.photo-grid--3,.photo-grid--4{grid-template-columns:1fr;}
  .field-grid{grid-template-columns:1fr;}
}

@media print{
  .site-header,.mobile-bar,.kakao-fab,.btn-row{display:none;}
  body{padding-bottom:0;}
}

/* ---------- 17. 스팸 차단용 숨김 칸 (사람에게 보이지 않습니다) ---------- */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* ---------- 18. 효스토리 앱 화면 목업 ---------- */
.mockups{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px);
  margin-top:clamp(26px,3.4vw,44px);}
.mockups figure{margin:0;}
.mockups img{width:100%;object-fit:contain;background:var(--paper);
  border:1px solid var(--rule);}
.mockups--lead{grid-template-columns:1.42fr 1fr 1fr;align-items:start;}
.mockups figcaption{margin-top:14px;font-size:1rem;font-weight:600;color:var(--ink);text-align:center;}
.mockups figcaption span{display:block;margin-top:5px;font-size:.9375rem;font-weight:400;color:var(--muted);line-height:1.65;}
@media (max-width:719px){
  .mockups,.mockups--lead{grid-template-columns:1fr;max-width:300px;margin-left:auto;margin-right:auto;gap:36px;}
}

/* ---------- 19. 인사말 서명 (이름 오른쪽에 서명 배치) ---------- */
.signature{margin-top:clamp(26px,3vw,38px);padding-top:22px;border-top:1px solid var(--rule-strong);
  display:flex;align-items:flex-end;gap:0;flex-wrap:nowrap;}
.signature-text{flex:0 0 auto;}
.signature-co{font-size:1.0625rem;line-height:1.7;color:var(--muted);}
.signature-name{font-size:1.0625rem;line-height:1.7;color:var(--muted);margin-top:2px;}
.signature-name strong{font-family:var(--serif);font-size:1.25rem;font-weight:700;
  color:var(--green);letter-spacing:-.01em;}
.signature-mark{flex:0 0 auto;width:auto;height:104px;display:block;
  margin:0 0 -18px -34px;pointer-events:none;}

@media (max-width:719px){
  .signature-mark{height:82px;margin:0 0 -14px -26px;}
}

/* ---------- 20. 푸터 구분점 ---------- */
.foot-sep{margin:0 10px;color:var(--rule-strong);border:0;}
.footer-legal a{border-bottom:1px solid var(--rule-strong);}

/* ---------- 21. 선택 항목 표기 ---------- */
.field label .opt{font-weight:400;font-size:.9375rem;color:var(--muted);}

/* ---------- 22. 주문 프로그램 카드 ---------- */
.order-apps{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px);
  margin-top:clamp(26px,3.4vw,44px);}
.order-app{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3vw,34px);
  border:1px solid var(--rule);background:var(--paper);}
.order-app__logo{height:44px;width:auto;object-fit:contain;object-position:left center;align-self:flex-start;}
.order-app__name{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;}
.order-app__desc{font-size:1rem;color:var(--muted);line-height:1.75;}
.order-app .btn{align-self:flex-start;margin-top:auto;}
@media (max-width:719px){ .order-apps{grid-template-columns:1fr;} }

/* ---------- 23. 모바일 중복 CTA 정리 ----------
   모바일은 화면 하단 고정바(전화·카카오톡·상담신청)가 상시 노출되므로
   본문 상단의 중복 CTA는 숨깁니다. PC에서는 그대로 보입니다. */
@media (max-width:899px){
  .hide-mobile{display:none !important;}
}

/* ---------- 24. 드롭다운 서브메뉴 ---------- */
.nav{gap:26px;}
.nav-item{position:relative;}
.nav-item > a{display:inline-flex;align-items:center;gap:6px;}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--rule-strong);transition:border-top-color .15s ease;}
.nav-item:hover .caret,.nav-item:focus-within .caret{border-top-color:var(--green);}

.submenu{
  position:absolute;top:100%;left:-18px;min-width:220px;z-index:110;
  background:var(--paper);border:1px solid var(--rule);
  box-shadow:0 10px 30px rgba(20,40,30,.10);
  padding:10px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav-item:hover .submenu,.nav-item:focus-within .submenu{opacity:1;visibility:visible;transform:none;}
.submenu li a{display:block;padding:11px 20px;font-size:1rem;font-weight:500;
  color:var(--ink);border-bottom:0;white-space:nowrap;}
.submenu li a:hover{background:var(--mist);color:var(--green);border-bottom:0;}

/* 마우스가 메뉴와 서브메뉴 사이를 지날 때 끊기지 않도록 */
.nav-item::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px;}

/* ---------- 모바일 서브메뉴 ---------- */
.mobile-nav .msub{
  display:grid;grid-template-columns:1fr 1fr;gap:0 14px;
  padding:2px 0 14px 14px;border-bottom:1px solid var(--rule);
}
.mobile-nav .msub a{
  padding:10px 0;border-bottom:0;font-size:.9375rem;font-weight:400;color:var(--muted);
  position:relative;padding-left:14px;
}
.mobile-nav .msub a::before{content:"";position:absolute;left:0;top:1.25em;width:6px;height:1px;background:var(--rule-strong);}
@media (max-width:419px){ .mobile-nav .msub{grid-template-columns:1fr;} }

/* ---------- 25. 고정 헤더 아래로 앵커가 가려지지 않도록 ---------- */
[id]{scroll-margin-top:118px;}
@media (max-width:899px){ [id]{scroll-margin-top:100px;} }