@charset "UTF-8";
/* ============================================================
   마이두레·풋터 연결화면 공유 디자인 시스템 — 정적문서/풋터 독립 레이어
   파일 목적 : 정적 문서(약관·개인정보·소개·이용안내·안전관리) 및 풋터(유형8) draft
     화면이 mypage_draft.css 전체를 끌고 오지 않고도 단독 로드 가능하도록 하는 경량 CSS.
   근거 문서 : DureShop/설계_마이두레_풋터_공유디자인시스템.md (§3 유형5·유형8, §6, §4)
   스코프    : .ftdz (모든 규칙은 .ftdz 하위에서만 동작 → style_v2.css 무충돌)
   범위      : 문서 래퍼/타이틀 경량판(전체 .mpz-doc 타이포는 mypage_draft.css 담당) +
     PC 풋터 신판(유형8) + 모바일 미니풋터(ftdz-mini, §6 B안)
   토큰      : mypage_draft.css(.mpdz)와 동일 값 재선언(신규 발명 0) — 두 CSS 중 하나만
     로드해도 시각 일치.
   게이트    : ?draft=1 (세션 플래그, include/comm/draftGate.jspf) 전용. 인라인 스타일 0건.
   버전 관리 : draft 단계에서는 각 JSP <link ...?v=1.0> 로 직접 관리.
   v1.0 (2026-07-11)
   v1.1 (2026-07-11) — 유형5 첫 소비 화면(이용약관·개인정보취급방침·이용안내) 대응:
     iframe 문서 프레임(.ftdz-doc-iframe), 탭 on상태(.ftdz-toc a.on),
     이용안내 아코디언 이미지 반응형 세이프넷(.ftdz .bbs_list img) 추가.
   v1.2 (2026-07-11) — 유형5 2차(두레생협소개·생활재안전관리) 대응:
     .ftdz-doc 리스트 타이포(ul/li), 반응형 유튜브 임베드(.ftdz-video) 추가.
   ============================================================ */

/* ============================================================
   §1 토큰 재선언(mypage_draft.css와 동일 값)
   ============================================================ */
.ftdz{
  --md-green:      #3D6041;
  --md-green-deep: #2F4B33;
  --md-green-soft: #EAF0EA;
  --md-ink:        #1F241E;
  --md-sub:        #4F554B;
  --md-line:       #E4E7E0;
  --md-accent:     #F8A31E;
  --md-red:        #D8352A;
  --md-gold:       #B48A34;
  --md-cream:      #FBFAF6;
  --md-line-soft:  #EEF0EA;

  --md-serif: 'Maru Buri','Noto Serif KR','Nanum Myeongjo',serif;
  --md-sans:  'Pretendard',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --md-num:   'Roboto','Pretendard',sans-serif;

  --md-sp-2: 8px; --md-sp-3: 12px; --md-sp-4: 16px; --md-sp-5: 20px; --md-sp-6: 26px;
  --md-radius:    15px;
  --md-radius-sm: 12px;
  --md-shadow:       0 2px 10px rgba(31, 42, 24, .05);
  --md-shadow-hover: 0 6px 20px rgba(31, 42, 24, .10);
  --md-wrap: 1180px;

  color: var(--md-ink);
  font-family: var(--md-sans);
  letter-spacing: -.01em;
  word-break: keep-all;
}
.ftdz *,
.ftdz *::before,
.ftdz *::after { box-sizing: border-box; }
.ftdz a { color: inherit; text-decoration: none; }
.ftdz .num { font-family: var(--md-num); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .ftdz *, .ftdz *::before, .ftdz *::after { transition: none !important; animation: none !important; }
}
.ftdz a:focus-visible,
.ftdz button:focus-visible {
  outline: none;
  border-color: var(--md-green);
  box-shadow: 0 0 0 3px rgba(61, 96, 65, .12);
}

/* ============================================================
   §3 유형5 — 정적 문서 래퍼/타이틀 경량판
   (본문 타이포 전체 세트 .mpz-doc 은 mypage_draft.css 담당. 여기서는
   mypage_draft.css 없이도 정적 문서 1페이지가 성립하도록 최소 뼈대만 제공.)
   ============================================================ */
.ftdz-wrap { max-width: 820px; margin: 0 auto; padding: 30px 20px 60px; }
/* 모바일 고정헤더(.sub_head_def/.sub_head_close_def 59px) 아래 오프셋 — 상단 잘림 방지(2026-07-12) */
.sub_head_def ~ .ftdz > .ftdz-wrap,
.sub_head_close_def ~ .ftdz > .ftdz-wrap { padding-top: 68px; }
.ftdz-titlebar { display: flex; align-items: center; gap: 10px; margin-bottom: var(--md-sp-5); }
.ftdz-back {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--md-ink); font-size: 24px; font-weight: 700; line-height: 1;
}
.ftdz-back::before { content: '\2039'; }
.ftdz-title { font-family: var(--md-serif); font-size: 24px; font-weight: 700; color: var(--md-ink); letter-spacing: -.01em; }
@media (max-width: 1024px) {
  .ftdz-back { display: flex; }
  .ftdz-title { font-size: 20px; }
}

.ftdz-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--md-sp-5); }
.ftdz-toc a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 8px 16px;
  border: 1.5px solid var(--md-line); border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--md-sub);
}
.ftdz-toc a:hover { border-color: #9dc4a5; color: var(--md-green); }
.ftdz-toc a.on { background: var(--md-green); border-color: var(--md-green); color: #fff; }

.ftdz-card {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  padding: 20px;
}
@media (max-width: 1024px) { .ftdz-card { padding: 16px; } }

/* 문서 타이포 경량판(제1조 형식 등 기본 골격만 — 세부는 mpz-doc 담당) */
.ftdz-doc { max-width: 820px; }
.ftdz-doc h3 { margin: 26px 0 10px; font-size: 17px; font-weight: 700; color: var(--md-ink); }
.ftdz-doc h3:first-child { margin-top: 0; }
.ftdz-doc p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: var(--md-ink); word-break: keep-all; }
.ftdz-doc img { max-width: 100%; height: auto; border-radius: var(--md-radius-sm); display: block; margin: 16px 0; }
.ftdz-doc ul { margin: 0 0 16px; padding: 0 0 0 20px; }
.ftdz-doc ul li { margin: 0 0 8px; font-size: 15.5px; line-height: 1.75; color: var(--md-ink); word-break: keep-all; }
.ftdz-doc ul li strong { color: var(--md-green-deep); margin-right: 6px; }

/* 두레생협소개 등 반응형 유튜브 임베드(16:9) — 인라인 style 대체 */
.ftdz-video { position: relative; height: 0; padding-bottom: 56.25%; margin: 0 0 20px; overflow: hidden; border-radius: var(--md-radius-sm); background: #000; }
.ftdz-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* 약관·개인정보 본문(법정 문서) — iframe/AJAX 위임 프레임. 본문 텍스트는 원문 그대로(재타이핑 금지),
   여기서는 프레임 크기·테두리만 인라인 스타일 대신 클래스로(코딩 규칙: 인라인 스타일 금지) */
.ftdz-doc-iframe { width: 100%; height: 500px; border: 1px solid var(--md-line); border-radius: var(--md-radius-sm); display: block; }

/* 이용안내(userGuide) 등 이미지 위주 아코디언 콘텐츠 — 원본 마크업/JS 그대로 두고 이미지만 반응형 세이프넷 */
.ftdz .bbs_list img { max-width: 100%; height: auto; border-radius: var(--md-radius-sm); }

/* ============================================================
   §3 유형8 — PC 풋터 신판 (frame/footer.jsp draft 전용 오버라이드)
   3컬럼: 상담실 카드 · 공지/안전성 탭 · 바로가기 링크
   ============================================================ */
.ftdz-footer { background: #fff; border-top: 1px solid var(--md-line); padding: var(--md-sp-6) 0 0; }
.ftdz-footer-inner { max-width: var(--md-wrap); margin: 0 auto; padding: 0 20px; }
.ftdz-footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md-sp-6); padding-bottom: 28px; }
.ftdz-footer-card {
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  padding: 20px;
}
.ftdz-footer-card-title { font-size: 16px; font-weight: 700; color: var(--md-ink); margin-bottom: 12px; }

/* 상담실 카드 — 전화번호 크게(시니어 핵심) */
.ftdz-tel { font-family: var(--md-num); font-size: 24px; font-weight: 800; color: var(--md-green-deep); }
.ftdz-tel-sub { margin-top: 6px; font-size: 14px; color: var(--md-sub); }
.ftdz-sns { display: flex; gap: 8px; margin-top: 14px; }
.ftdz-sns a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--md-line); border-radius: 50%;
  color: var(--md-sub);
}

/* 공지/안전성 탭 카드 */
.ftdz-footer-tabs { display: flex; gap: 14px; margin: 0 0 10px; list-style: none; padding: 0; }
.ftdz-footer-tabs li a { font-size: 14px; font-weight: 700; color: var(--md-sub); }
.ftdz-footer-tabs li.on a { color: var(--md-green); }
.ftdz-footer-notice { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ftdz-footer-notice li a {
  display: block; font-size: 14px; color: var(--md-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ftdz-footer-notice li a:hover { color: var(--md-ink); }

/* 바로가기 링크 카드 */
.ftdz-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ftdz-footer-links li a {
  display: flex; align-items: center;
  min-height: 44px;
  font-size: 15px; color: var(--md-ink); font-weight: 500;
  border-bottom: 1px solid var(--md-line-soft);
}
.ftdz-footer-links li:last-child a { border-bottom: 0; }

/* 법정 링크 줄(이용약관·개인정보처리방침 굵게 강조) */
.ftdz-footer-legal {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 22px;
  padding: 20px 0;
  border-top: 1px solid var(--md-line);
  font-size: 14px; color: var(--md-sub);
}
.ftdz-footer-legal a { color: var(--md-ink); }
.ftdz-footer-legal a.is-strong { font-weight: 800; color: var(--md-green-deep); }
/* 생활재 안내책자 등 강조 표기 — 기존 인라인 style="color:red" 대체 클래스 배지 */
.ftdz-footer-legal .ftdz-tag-new {
  display: inline-flex; align-items: center;
  min-height: 20px; padding: 1px 8px;
  border-radius: 999px;
  background: var(--md-accent); color: #3a2408;
  font-size: 14px; font-weight: 800; margin-left: 4px; line-height: 1.3;
}

/* 패밀리사이트 아코디언 */
.ftdz-footer-family { margin: 14px 0; }
.ftdz-footer-family summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 0 4px;
  font-size: 14px; font-weight: 700; color: var(--md-sub);
  cursor: pointer;
}
.ftdz-footer-family[open] summary { color: var(--md-ink); }
.ftdz-footer-family-list { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 10px 4px 0; margin: 0; list-style: none; }
.ftdz-footer-family-list a { font-size: 14px; color: var(--md-sub); }
.ftdz-footer-family-list a:hover { color: var(--md-green); }

/* 사업자 정보 4줄 */
.ftdz-footer-biz { padding: 16px 0 28px; font-size: 14px; line-height: 1.7; color: var(--md-sub); }
.ftdz-footer-biz p { margin: 0; }

@media (max-width: 1024px) {
  .ftdz-footer-grid { grid-template-columns: 1fr; gap: var(--md-sp-4); padding-bottom: 20px; }
  .ftdz-footer-inner { padding: 0 16px; }
}

/* ============================================================
   §6 B안 — 모바일 정보성 미니풋터 ftdz-mini
   정적/게시판 draft 화면 하단 공통. 약관·개인정보·사업자정보·상담전화 한 줄(wrap).
   ============================================================ */
.ftdz-mini {
  margin-top: var(--md-sp-6);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--md-cream);
  border-top: 1px solid var(--md-line);
}
.ftdz-mini-links { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0 0 10px; padding: 0; }
.ftdz-mini-links li a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; font-weight: 600; color: var(--md-sub); }
.ftdz-mini-links li a.is-strong { color: var(--md-ink); font-weight: 800; }
.ftdz-mini-tel { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--md-sub); }
.ftdz-mini-tel a { font-family: var(--md-num); font-size: 16px; font-weight: 800; color: var(--md-green-deep); }