/* ============================================================
   떼떼분식 홈페이지 공통 껍데기 (2026-08-19)
   ------------------------------------------------------------
   모든 화면이 같은 옷을 입도록, 각 페이지의 옛 스타일 위에 덮어쓴다.
   페이지 본문 구조는 건드리지 않는다(언어 전환·기존 기능 그대로).
   쓰는 법: 각 페이지 </head> 바로 앞에
     <link rel="stylesheet" href="site.css">
     <script defer src="site.js"></script>
   브랜드 색 기준(위키 브랜드 기준서): 떼떼 RED #E60012 · YELLOW #FFD400
   (예전 화면들은 #E63946 = 빙빙 색을 쓰고 있었다 → 이 파일에서 정정)
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  --red-main:#E60012 !important;      /* 떼떼 정색 */
  --red-deep:#B3000E;
  --yellow-main:#FFD400 !important;
  --cream:#FBF8F4 !important;
  --dark:#171514 !important;
  --gray-text:#4a4644 !important;
  --line:#e8e3df;
  --shadow-card:0 16px 40px rgba(0,0,0,.07) !important;
}

/* ── 글꼴 통일 (Jua·Black Han Sans·Nunito 혼용 정리) ───────── */
body, p, li, td, th, span, div, a, input, textarea, select, button{
  font-family:Pretendard,-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif !important;
}
h1,h2,h3,h4,h5{
  font-family:Pretendard,-apple-system,'Apple SD Gothic Neo',sans-serif !important;
  letter-spacing:-.025em !important; font-weight:800 !important; word-break:keep-all;
}
body{ color:var(--dark); line-height:1.65; -webkit-font-smoothing:antialiased; }

/* ── 머리(상단바) — 첫 화면과 같은 흰 바탕 ────────────────── */
header{
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
  padding:12px 24px !important;
}
header .logo img, header a.logo img, header img{
  height:54px !important; width:auto !important; max-width:none !important;
  margin:0 !important;
  flex:0 0 auto !important; object-fit:contain !important;
}
header .logo, header a.logo{ display:flex !important; align-items:center !important; }
header .main-nav > ul > li > a,
header .main-nav a{ color:var(--dark) !important; font-weight:700 !important; }
header .main-nav > ul > li > a:hover{ color:var(--red-main) !important; }
header .dropdown{
  background:#fff !important; border:1px solid var(--line) !important;
  border-radius:14px !important; box-shadow:0 16px 40px rgba(0,0,0,.12) !important;
  padding:8px !important;
}
header .dropdown a{
  color:var(--gray-text) !important; border-radius:9px !important;
  font-weight:600 !important; padding:10px 12px !important;
}
header .dropdown a:hover{ background:var(--cream) !important; color:var(--red-main) !important; }

/* 언어 전환 알약 */
.lang-toggle, .lang-toggle-pill{
  background:var(--cream) !important; border:1px solid var(--line) !important;
  border-radius:999px !important;
}
.lang-btn{ color:var(--gray-text) !important; font-weight:800 !important; border-radius:999px !important; }
.lang-btn.active{ background:var(--red-main) !important; color:#fff !important; box-shadow:none !important; }

/* 상담 버튼 */
.btn-cta, header .btn-cta{
  background:var(--red-main) !important; color:#fff !important;
  border:0 !important; border-radius:999px !important;
  font-weight:800 !important; padding:11px 22px !important;
  box-shadow:none !important;
}
.btn-cta:hover, header .btn-cta:hover{ background:var(--red-deep) !important; color:#fff !important; }

/* 햄버거·모바일 메뉴 색 */
.menu-toggle, .hamburger, header button{ color:var(--dark) !important; }

/* ── 본문 공통 ─────────────────────────────────────────── */
section{ word-break:keep-all; }
.section-title, h2.section-title{ letter-spacing:-.025em !important; }

/* 버튼류 통일 */
a.btn, button.btn, .btn-primary, .btn-red, .cta-button{
  border-radius:999px !important; font-weight:800 !important;
}
.btn-primary, .btn-red, .cta-button{
  background:var(--red-main) !important; color:#fff !important; border:0 !important;
}
.btn-primary:hover, .btn-red:hover, .cta-button:hover{ background:var(--red-deep) !important; }
.btn-back{
  border-radius:999px !important; font-weight:700 !important;
  background:var(--cream) !important; color:var(--dark) !important;
}
.btn-back:hover{ background:var(--red-main) !important; color:#fff !important; }

/* 카드·박스 모서리와 그림자 통일 */
.card, .box, .item-card, .info-card, .admin-card, .store-card{
  border-radius:18px !important; box-shadow:var(--shadow-card) !important;
}

/* 표 */
table{ border-collapse:collapse; }
th{ background:var(--cream) !important; font-weight:800 !important; }
td, th{ border-color:var(--line) !important; }

/* ── 발(푸터) ──────────────────────────────────────────── */
footer{
  background:#0f0d0c !important; color:rgba(255,255,255,.55) !important;
  padding:52px 24px 40px !important; text-align:left !important; font-size:14px !important;
}
footer .site-foot{ max-width:1180px; margin:0 auto; }
footer .site-foot .cols{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px;
}
footer .site-foot img{ height:74px; opacity:.95; margin-bottom:22px; }
footer .site-foot b{ color:#fff; display:block; margin-bottom:10px; font-size:14px; font-weight:700; }
footer .site-foot a{ display:block; padding:3px 0; color:rgba(255,255,255,.55); text-decoration:none; }
footer .site-foot a:hover{ color:#fff; }
footer .site-foot .legal{
  margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  line-height:1.9; font-size:12.5px;
}
footer p{ color:rgba(255,255,255,.45) !important; }
@media(max-width:860px){
  footer .site-foot .cols{ grid-template-columns:1fr 1fr; gap:24px; }
}

/* 언어별 표시 규칙은 각 페이지 것을 그대로 따른다(건드리지 않음) */

/* 폰에서는 로고를 화면에 맞게 (눌리지 않도록 flex 고정) */
@media(max-width:640px){
  header .logo img, header a.logo img, header img{ height:40px !important; margin:0 !important; }
}

/* ============================================================
   본문 조판 (2026-08-19) — "촌스럽다"는 지적에 대한 손질
   ------------------------------------------------------------
   구조는 그대로 두고 글자·여백만 다시 잡는다.
   ① 읽는 글은 한 줄이 너무 길지 않게(66자) ② 줄간격 넉넉히
   ③ 제목만 굵게, 본문은 보통 굵기 ④ 섹션 사이 숨 쉴 공간
   ============================================================ */

/* 제목 위계 */
main h1, section h1, .hero-banner h1{ letter-spacing:-.03em !important; }
main h2, section h2{
  font-size:clamp(26px,3.4vw,40px) !important; font-weight:800 !important;
  line-height:1.3 !important; letter-spacing:-.03em !important;
}
main h3, section h3{
  font-size:clamp(19px,2.2vw,24px) !important; font-weight:700 !important;
  line-height:1.45 !important; letter-spacing:-.02em !important;
}

/* 본문 글 — 굵기·줄간격·한 줄 길이 */
main p, section p, .story-container p, .content p{
  font-size:17px !important; line-height:1.9 !important; font-weight:400 !important;
  color:#4a4644 !important; letter-spacing:-.01em !important;
}
main p b, main p strong, section p b, section p strong{ font-weight:700 !important; color:#171514 !important; }

/* 가운데 정렬 문단은 폭을 묶어 한 줄이 길어지지 않게 */
main p[style*="text-align: center"], section p[style*="text-align: center"],
.text-center p, .center p{
  max-width:62ch !important; margin-left:auto !important; margin-right:auto !important;
}

/* 세리프·굵은 가운데 문구(옛 감성) 완화 */
.story-container p, .story-text p{
  font-family:Pretendard,-apple-system,'Apple SD Gothic Neo',sans-serif !important;
}

/* 섹션 사이 숨 쉴 공간 */
.story-container, .content-container, .page-container{
  padding-top:clamp(84px,9vw,124px) !important;
  padding-bottom:clamp(84px,9vw,124px) !important;
}
.story-section{ margin-bottom:clamp(64px,7vw,96px) !important; gap:clamp(36px,5vw,64px) !important; }

/* 페이지 상단 배너 — 글자가 사진에 묻히지 않게 */
.hero-banner{ min-height:clamp(320px,42vw,520px) !important; }
.hero-banner-overlay{
  background:linear-gradient(180deg,rgba(15,11,10,.28) 0%,rgba(15,11,10,.42) 55%,rgba(15,11,10,.62) 100%) !important;
}
.hero-banner h1, .hero-banner .page-title{
  font-size:clamp(32px,5vw,60px) !important; font-weight:800 !important;
  text-shadow:0 2px 24px rgba(0,0,0,.45) !important;
}
.hero-banner p, .hero-banner .page-desc{
  font-size:clamp(15px,1.6vw,18px) !important; font-weight:500 !important;
  max-width:56ch !important; margin-left:auto !important; margin-right:auto !important;
  color:rgba(255,255,255,.92) !important; text-shadow:0 1px 12px rgba(0,0,0,.4) !important;
}

/* 사진 모서리 통일 */
.story-section img, .content img.rounded, .story-img{ border-radius:20px !important; }

/* 인용·강조 박스 */
blockquote{
  border-left:3px solid var(--red-main) !important; padding:4px 0 4px 20px !important;
  margin:28px 0 !important; color:#2b2725 !important; font-style:normal !important;
}

@media(max-width:768px){
  main p, section p, .story-container p, .content p{ font-size:16px !important; line-height:1.85 !important; }
}

/* ── 배경 정리 (2026-08-19) ─────────────────────────────────
   브랜드 로고를 배경에 흩뿌린 무늬가 촌스러움의 큰 원인이었다.
   전문적인 사이트는 배경을 비우고 사진·글로 말한다. */
.watermark, .wm-1, .wm-2, .wm-3, .wm-4{ display:none !important; }

/* 본문 바탕은 흰색·크림 단색으로 */
main, .story-container, .content-container{ background:transparent !important; }
body{ background:#fff !important; }
section.bg-cream, .bg-cream, .cream-section{ background:var(--cream) !important; }

/* 사진에 걸린 과한 효과(그림자 이중·기울임) 정리 */
.story-image::before{ display:none !important; }
.story-image, .story-section img{
  box-shadow:0 14px 34px rgba(0,0,0,.10) !important; border-radius:20px !important;
}
.story-image:hover, .story-section img:hover{ transform:none !important; }

/* 2026-08-19: 폰에서 옆으로 밀리는 것 막기 (등장 효과가 화면 밖으로 나갔다 들어오는 탓) */
html,body{overflow-x:hidden !important;max-width:100% !important}
/* overflow:hidden 은 화면을 스크롤 상자로 만들어 '따라다니는 바'(sticky)를 죽인다.
   clip 은 옆으로 새는 것만 막고 sticky 는 살린다. 지원 안 되는 옛 브라우저는 위 규칙 그대로. */
@supports (overflow:clip){ html,body{overflow-x:clip !important} }


/* ========== 공통 페이지 머리(배너) — 2026-08-19 재설계 ==========
   왼쪽 글 · 오른쪽 사진 두 장(세로 틀 2칸)으로 오른쪽 절반을 꽉 채운다.
   빈 여백이 남지 않게 높이를 글 길이에 맞추고, 세로 사진이 잘리지 않게 세로 칸을 쓴다. */
.tt-hero{background:var(--cream) !important;border-bottom:1px solid var(--line);overflow:hidden;position:relative;
  padding:0 !important;margin:0 !important}   /* 옛 페이지 스타일이 넣던 위아래 100~120px 빈칸 제거 */
.tt-hero .tt-hero-in{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(480px,1.22fr);
  gap:clamp(22px,2.8vw,44px);align-items:center;
  padding:clamp(26px,2.8vw,42px) 0 clamp(26px,2.8vw,42px) max(24px, calc((100vw - 1300px)/2 + 24px))}
.tt-hero .tt-hero-txt{min-width:0;padding-right:6px}
.tt-hero .tt-hero-txt h1{font-size:clamp(30px,3.9vw,50px) !important;font-weight:800 !important;
  letter-spacing:-.035em;line-height:1.16;color:var(--ink,#1c1917) !important;margin:12px 0 0 !important}
.tt-hero .tt-hero-txt h2{font-size:clamp(17px,2.1vw,22px) !important;color:var(--red-main) !important;
  margin-top:12px !important;font-weight:800 !important}
.tt-hero .tt-hero-txt p,.tt-hero .tt-hero-txt .desc{color:#5f574f !important;font-size:16.5px !important;
  line-height:1.85 !important;margin-top:16px !important;max-width:46ch;opacity:1 !important;text-shadow:none !important}
.tt-hero .tt-hero-txt .sub-title,.tt-hero .tt-hero-txt .wy-kicker,.tt-hero .tt-hero-txt .sy-kicker,
.tt-hero .tt-hero-txt .hy-kicker,.tt-hero .tt-hero-txt .st-kicker{
  color:var(--red-main) !important;font-size:12.5px !important;font-weight:800 !important;letter-spacing:.2em;
  margin:0 !important;text-transform:uppercase;display:block}
.tt-hero .tt-hero-txt h1::after{content:'';display:block;width:54px;height:4px;border-radius:3px;
  background:var(--red-main);margin-top:18px}

/* 오른쪽 사진 두 장 */
.tt-hero-media{display:grid;grid-template-columns:1.12fr .88fr;gap:12px;
  height:clamp(285px,23vw,370px)}
.tt-hero-media figure{margin:0;overflow:hidden;border-radius:20px;background:#efeae2;
  box-shadow:0 18px 40px rgba(28,20,16,.14)}
.tt-hero-media .m2{border-radius:20px 0 0 20px}   /* 오른쪽은 화면 끝까지 */
.tt-hero-media .m1{height:100%}
.tt-hero-media .m2{height:84%;align-self:end}
.tt-hero-media img{width:100%;height:100%;object-fit:cover;display:block}

/* 머리 안의 단추 */
.tt-hero .cta-group,.tt-hero .hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;justify-content:flex-start}
.tt-hero .btn-primary,.tt-hero .btn-secondary{display:inline-flex;align-items:center;padding:13px 24px;border-radius:999px;
  font-weight:800;font-size:14.5px;text-decoration:none;transition:.2s}
.tt-hero .btn-primary{background:var(--red-main);color:#fff !important;box-shadow:0 10px 24px rgba(230,0,18,.24)}
.tt-hero .btn-primary:hover{transform:translateY(-2px)}
.tt-hero .btn-secondary{border:2px solid var(--line);color:var(--ink,#1c1917) !important;background:#fff}
.tt-hero .btn-secondary:hover{border-color:var(--red-main);color:var(--red-main) !important}

@media(max-width:900px){
  .tt-hero .tt-hero-in{grid-template-columns:1fr;padding:22px 0 30px;gap:18px}
  .tt-hero .tt-hero-txt{padding:0 16px}
  /* 폰에서는 두 장을 화면 안에 나란히 — 예전엔 왼쪽이 가장자리에 붙고 오른쪽이 잘렸다 */
  .tt-hero-media{height:186px;order:-1;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px}
  .tt-hero-media figure,.tt-hero-media .m1,.tt-hero-media .m2{
    height:100%;align-self:stretch;border-radius:16px;box-shadow:0 10px 22px rgba(28,20,16,.10)}
  .tt-hero .tt-hero-txt p{max-width:none}
  .tt-hero .tt-hero-txt h1::after{margin-top:14px}
}

/* 배너 안 숫자 요약 */
.tt-facts{display:flex;gap:clamp(18px,2.4vw,34px);margin-top:24px;flex-wrap:wrap}
.tt-facts div{display:flex;flex-direction:column;gap:2px}
.tt-facts b{font-size:clamp(24px,2.6vw,32px);font-weight:800;color:var(--red-main);line-height:1;letter-spacing:-.02em}
.tt-facts span{font-size:13px;color:#6b625b;font-weight:600}


/* 자매브랜드(BING BING) 바로가기 — 헤더 우측 (2026-08-20) */
.sisterbrand,.nav .sisterbrand,.header-actions .sisterbrand{
  display:inline-flex !important;align-items:center;gap:7px;padding:7px 14px !important;border-radius:999px !important;
  border:1.5px solid #0E8A6E !important;color:#0E8A6E !important;background:#fff !important;text-decoration:none !important;
  font-size:12px !important;font-weight:700 !important;line-height:1 !important;white-space:nowrap !important;
  transition:.18s;flex:0 0 auto;width:auto !important}
.sisterbrand b{font-size:13px;font-weight:900;letter-spacing:.02em}
.sisterbrand:hover{background:#0E8A6E;color:#fff !important;border-color:#0E8A6E}
.nav .sisterbrand{margin-left:auto}
.nav:not(.solid) .sisterbrand{background:rgba(255,255,255,.14) !important;border-color:rgba(255,255,255,.75) !important;color:#fff !important}
.nav:not(.solid) .sisterbrand:hover{background:#fff !important;color:#0E8A6E !important;border-color:#fff !important}
.m-sister{display:block;margin:10px 16px 0;padding:13px;border-radius:12px;text-align:center;
  border:1.5px solid #0E8A6E;color:#0E8A6E;font-weight:800;text-decoration:none;font-size:14px}
@media(max-width:1100px){.sisterbrand span{display:none}.sisterbrand{padding:7px 12px}}
@media(max-width:900px){
  .sisterbrand,.header-actions .sisterbrand,.nav .sisterbrand{display:none !important}   /* 폰에서는 헤더가 넘쳐 상담 단추가 잘린다 — 폰 메뉴 안에 항목 있음 */
  header .header-actions{gap:6px !important}
  header .btn-cta{display:none !important}   /* 폰 헤더가 넘쳐 잘린다 — 상담 단추는 폰 메뉴 안에 있음 */
  header .lang-toggle-pill{transform:scale(.92);transform-origin:right center}
  header .header-inner,header > div{max-width:100% !important}
}