/* s7x.css — 갈래 s7(10-24 r9 「빈 화단이 서명이 된다」 · r10 수리): 7 마무리 #closer + 푸터 덮어쓰기(.ft.ft7).
   순서(tines 'Start today' 문법): 꽃 글자 'AboutUs'(화면 폭 ≥90%) → 끝 띠(h2 + 약속 두 줄 | 단추 둘) → 96 크림 → 바로 푸터(선 0).
   글자 판(.closer) = 잉크 폭 Wi = min(섹션 안쪽 폭, 1840) + 좌우 pad(⌈0.07 cap⌉ + 3px) · 높이 = ⌈16 + cap(+ 두 줄이면 w×1868/5958)⌉ + 2⌈0.12 cap⌉ — js/s7x-eng.js geo7 과 같은 식(붙기 전후 크기 차 0 · CLS 0).
   판 안: .s7x-bed(M1 일어섬 · 원점 50% 100%) > canvas.cv(빈 화단 → 끝 판 합성) + 생기 송이(.s7x-lb 글자 윤곽 clip > 자람 > 기울기 > 바람 > 캔버스) + 덮개.
   .s7x-sky = 나는 꽃 하늘 상자(화면 끝~끝 · s6 끝 선 +24(폰 +16) ~ 판 아래 끝 · overflow hidden · 원근은 JS 가 1100/700).
   반경: 단추 12 · 칩 999 만(0<r<8 = 0). 글 ≥14(사업자 정보 13 만 예외). 굵기 400·600·720. 새 @keyframes 0. 흐림·그라디언트·그림자 0. */
.s7x { margin-top: 156px; padding: 0 40px 96px; container-type: inline-size; text-align: left; }
.s7x .closer { position: relative; width: min(1840px, 100%); aspect-ratio: 1360 / 310; margin: 0 auto; }
.s7x .s7x-bar { --cap: calc(min(1840px, 100cqw) * 1468 / 8480); }
@supports (height: round(up, 1.5px, 1px)) {
  .s7x .closer { --w: min(1840px, 100cqw); --cap: calc(var(--w) * 1468 / 8480); --oy: round(up, calc(var(--cap) * 0.12), 1px); --pad: calc(round(up, calc(var(--cap) * 0.07), 1px) + 3px);
    aspect-ratio: auto; width: calc(var(--w) + 2 * var(--pad)); height: calc(round(up, calc(16px + var(--cap)), 1px) + 2 * var(--oy));
    margin: 0 calc((100% - var(--w)) / 2 - var(--pad)); }
  /* 두 줄(About/Us): 잉크 폭(넘침 포함) = 안쪽 폭 — Wi = 안쪽 폭 / 1.01404 · 글자 왼쪽 = 안쪽 왼쪽(js/s7x-eng.js geo7 과 같은 식) */
  @container (max-width: 731.98px) {
    .s7x .closer { --w: round(down, calc(100cqw / 1.01404), 1px); --cap: calc(var(--w) * 1468 / 5958); height: calc(round(up, calc(16px + var(--cap) + var(--w) * 1868 / 5958), 1px) + 2 * var(--oy));
      margin: 0 calc(100% - var(--w) - var(--pad)) 0 calc(-1 * var(--pad)); }
    .s7x .s7x-bar { --cap: calc(round(down, calc(100cqw / 1.01404), 1px) * 1468 / 5958); }
  }
}
.s7x .s7x-bed { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }
.s7x .s7x-bed > .cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.s7x .s7x-lb { position: absolute; z-index: 1; pointer-events: none; }
.s7x .s7x-lb.is-hero { z-index: 2; }   /* r10 앉은 꽃(판보다 크게 · 덮개 0) = 이웃 위 */
.s7x .s7x-gr, .s7x .s7x-ln, .s7x .s7x-wd { position: absolute; inset: 0; }
.s7x .s7x-lv { position: absolute; left: 0; top: 0; display: block; }
.s7x .s7x-cov { position: absolute; z-index: 1; pointer-events: none; }   /* 생기 상자와 같은 층 · 문서 순서(그리기 순서)대로 쌓임 */
.s7x .s7x-sky { position: absolute; z-index: 3; overflow: hidden; pointer-events: none; }
.s7x .s7x-fly { position: absolute; left: 0; top: 0; display: block; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
/* 실패 판(모듈 실패·getContext 없음): 정지 그림, 없으면 크림(높이 그대로) */
.s7x .closer img.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ── 끝 띠: 글자 잉크 아래 끝(넘침 꽃잎 포함) → h2 글자 위 끝 32 · 왼쪽 h2 + 약속 한 줄 | 오른쪽 단추 둘
   r10(반박 6): 띠 폭 = 글자 잉크 폭(min(안쪽 폭, 1840)) — 1920 에서 h2 = 'A' 아래 · 단추 = 마지막 글자들 아래(1360 상한 때는 축이 어긋났음)
   r10(반박 7): 단추는 문서 순서 그대로(카톡 → 주소 · Tab 순서 = 눈 순서). 마지막 꽃 물결은 카톡 단추 가운데에 가장 가까운 글자에서 끝남(js/s7x-prep.js planOf) ── */
.s7x .s7x-bar { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px;
  max-width: 1360px; min-height: 64px; margin: calc(21px - var(--cap) * 0.055) auto 0; }   /* 수리(10-24 · desk #8): 띠 = 쪽 칸 1360(머리줄·바로 아래 푸터와 같은 시작선 · 1920 에서 40~1880 → 280~1640). 글자 판은 그대로 ≥90% */
.s7x .say { min-width: 0; }
.s7x .say h2 { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 720; letter-spacing: -.02em; color: var(--ink); }
.s7x .say p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: -.01em; color: var(--sub); }
.s7x .say p span { display: inline-block; }
.s7x .acts { display: flex; align-items: center; gap: 12px; }
.s7x .btn-kakao, .s7x .btn-line { min-height: 52px; padding: 0 26px; border-radius: var(--r-btn); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.s7x .btn-kakao { background: var(--ink); color: var(--page); }
.s7x .btn-line { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.s7x .kk-st { grid-column: 1 / -1; margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--sub); }
.s7x .kk-st:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .s7x .btn-kakao, .s7x .btn-line { transition: background-color .3s var(--ease-ui), border-color .3s var(--ease-ui), transform .1s, filter .1s; }
  .s7x .btn-kakao:hover { background: var(--ink2); }
  .s7x .btn-line:hover { background: var(--paper); }
}

/* 1024~1179: 안쪽 40 · 끝 띠 한 줄 그대로 */
/* 768~1023: 안쪽 24 · 두 줄 글자(768 Wi 720) · 끝 띠 가운데 세로 쌓기(h2 → 8 → 약속 → 20 → 단추 한 줄) */
@media (max-width: 1023px) {
  .s7x { padding: 0 24px 96px; }
  .s7x .s7x-bar { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .s7x .acts { margin-top: 20px; }
}
/* 폰: 위 96 · 잉크 폭 = 화면 − 28(좌우 14) · 끝 띠 가운데 세로 쌓기 · 단추 세로 둘(48 · 간격 8 · 카톡 위) · 구간 아래 0(푸터 위 여백 40 이 이음새) */
@media (max-width: 767px) {
  .s7x { margin-top: 96px; padding: 0 14px 0; }
  .s7x .s7x-bar { display: block; padding: 0 2px; margin-top: 0; }
  .s7x .say h2 { font-size: 20px; line-height: 1.3; }
  .s7x .say p { margin-top: 6px; font-size: 15px; line-height: 22px; }
  .s7x .say p span { display: block; }
  .s7x .acts { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 16px; }
  .s7x .btn-kakao, .s7x .btn-line { width: 100%; min-height: 48px; padding: 0 20px; font-size: 16px; }
  .s7x .kk-st { margin-top: 8px; }
}

/* ══ 푸터 .ft.ft7 — 애플식 정돈(frame.css .ft 위에 덮어씀 · 통합 때 base 갈래가 frame.css 로 옮김) ══════════════════════════
   위 선 0 · 바깥 여백 0(마무리 아래 96 이 이음새) · 로고 줄 44 → 28 → 12열(왼쪽 3열 문의 → 24 → 채널 | 오른쪽 9열 사이트맵 5열)
   열 머리 14/600 먹 · 링크 15/400 #4d4a46 · 줄 간격 32(누름 칸 44 = 위아래 6 겹침) · 호버 = 먹 + 주황 밑줄 1.5(띄움 4)
   아래 띠: 48 → 가는 선 1px(푸터 안 유일한 선) → 20 → 사업자 정보 13/20.8 두 줄(뜻별) | 법적 링크 14 + © */
.ft.ft7 { margin-top: 0; border-top: 0; }
/* r10(반박 8 · CLS 0.0066): 첫 그리기 자리 추정 높이(home.css contain-intrinsic-block-size 1000px)를 실제 높이에 맞춤 — 섹션 배치가 풀릴 때 밀림 0 */
main > section.s7x:not(.cv-open) { contain-intrinsic-block-size: auto 480px; }
[data-flower-home] > footer.ft.ft7:not(.cv-open) { contain-intrinsic-block-size: auto 529px; }
@media (min-width: 768px) and (max-width: 1439px) { [data-flower-home] > footer.ft.ft7:not(.cv-open) { contain-intrinsic-block-size: auto 770px; } }
@media (max-width: 767px) { main > section.s7x:not(.cv-open) { contain-intrinsic-block-size: auto 440px; } [data-flower-home] > footer.ft.ft7:not(.cv-open) { contain-intrinsic-block-size: auto 470px; } }
.ft.ft7 .ft-in { max-width: 1440px; padding: 0 40px 40px; }
.ft.ft7 .ft-h, .ft.ft7 .ft-col h2 { display: block; margin: 0 0 12px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.ft.ft7 .ft-biz { max-width: none; font-size: 13px; line-height: 20.8px; color: var(--muted); }
.ft.ft7 .ft-biz span:nth-of-type(4)::before { content: '\A'; white-space: pre; }
.ft.ft7 .ft-copy { font-size: 14px; color: var(--muted); }
@media (min-width: 768px) {
  .ft.ft7 .ft-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 24px; row-gap: 24px; align-items: start; }
  .ft.ft7 .ft-side { display: contents; }
  .ft.ft7 .ft-logo { grid-column: 1 / -1; grid-row: 1; justify-self: start; min-height: 44px; margin: 0 0 4px; }
  .ft.ft7 .ft-side .ft-col:nth-of-type(1) { grid-column: 1 / span 3; grid-row: 2; margin-top: 0; }
  .ft.ft7 .ft-side .ft-col:nth-of-type(2) { grid-column: 1 / span 3; grid-row: 3; }
  .ft.ft7 .ft-map { grid-column: 4 / -1; grid-row: 2 / span 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; padding-top: 0; }
  .ft.ft7 .ft-col ul { display: grid; }
  .ft.ft7 .ft-col li > a { display: flex; align-items: center; width: max-content; max-width: 100%; min-height: 44px; margin: -6px 0; font-size: 15px; line-height: 22px; color: var(--sub); }
  .ft.ft7 .ft-col li > a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--fl); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
  .ft.ft7 .ft-status:not(:empty) { margin: 0 0 6px; }
  .ft.ft7 .ft-night { margin: 0 0 6px; font-size: 14px; line-height: 20px; color: var(--sub); }
  .ft.ft7 .ft-night a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-size: 14px !important; font-weight: 600 !important; color: var(--ink); }
  .ft.ft7 .ft-bot { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 40px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); }
  .ft.ft7 .ft-biz address br { display: none; }
  .ft.ft7 .ft-legal { column-gap: 20px; row-gap: 0; justify-content: flex-end; align-items: center; }
  .ft.ft7 .ft-legal li { line-height: 20.8px; }
  .ft.ft7 .ft-legal a { display: inline-flex; align-items: center; min-height: 44px; margin: -11.6px 0; font-size: 14px; color: var(--sub); }
  .ft.ft7 .ft-legal a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--fl); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
}
/* 1024~1439: 사이트맵 3열 × 두 줄(5열이면 열 폭이 좁아 '디지털장의사 비용·절차'가 끊김) · 줄 사이 24(열 간격과 같음 · 1024 높이 ≤ 760) */
@media (min-width: 768px) and (max-width: 1439px) {
  .ft.ft7 .ft-map { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
}
/* 768~1023: 안쪽 24 · 로고 → 4열 두 줄(문의 | 채널 | 서비스 | 플랫폼별 / 상황별 | 일하는 방식(2칸) | 회사·자료실) — 열 폭은 가장 긴 글에 맞춤
   (문의 = 메일 주소 한 줄 · 서비스 = '디지털장의사 비용·절차' 한 줄 · 일하는 방식 = '처리 기록과 예시의 차이' 한 줄) · 높이 ≤ 900 */
@media (min-width: 768px) and (max-width: 1023px) {
  .ft.ft7 .ft-in { padding: 0 24px 40px; }
  .ft.ft7 .ft-top { grid-template-columns: 1.35fr .75fr 1.1fr .9fr; grid-template-rows: auto auto auto; row-gap: 24px; }
  .ft.ft7 .ft-map { display: contents; }
  .ft.ft7 .ft-side .ft-col:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .ft.ft7 .ft-side .ft-col:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .ft.ft7 .ft-map .ft-col:nth-child(1) { grid-column: 3; grid-row: 2; }
  .ft.ft7 .ft-map .ft-col:nth-child(2) { grid-column: 4; grid-row: 2; }
  .ft.ft7 .ft-map .ft-col:nth-child(3) { grid-column: 1; grid-row: 3; }
  .ft.ft7 .ft-map .ft-col:nth-child(4) { grid-column: 2 / span 2; grid-row: 3; }
  .ft.ft7 .ft-map .ft-col:nth-child(5) { grid-column: 4; grid-row: 3; }
  .ft.ft7 .ft-bot { grid-template-columns: 1fr; row-gap: 12px; }
  .ft.ft7 .ft-legal { justify-content: flex-start; }
}
/* 폰: 위 여백 40 · 선 0 · 로고 48 → 펼침 7개 2열(줄 48 · 줄 사이에만 1px) → 12 → 사업자 정보 뜻별 4줄 → 4 → 법적 링크 두 줄(누름 48) */
@media (max-width: 767px) {
  .ft.ft7 { margin-top: 40px; }
  .ft.ft7 .ft-in { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .ft.ft7 .ft-logo { min-height: 48px; margin: 0; }
  .ft.ft7 .ft-side .ft-col { border-top: 0; }
  .ft.ft7 .ft-top:has(.ft-col[open]) .ft-side .ft-col + .ft-col { border-top: 1px solid var(--line); }
  .ft.ft7 .ft-col > summary i { font-size: 18px; }
  .ft.ft7 .ft-col > summary h2, .ft.ft7 .ft-col > summary .ft-h { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
  .ft.ft7 .ft-bot { margin-top: 12px; padding-top: 0; border-top: 0; row-gap: 4px; }
  .ft.ft7 .ft-biz { line-height: 20px; }
  .ft.ft7 .ft-biz span:nth-of-type(3)::before { content: '\A'; white-space: pre; }
  .ft.ft7 .ft-legal { column-gap: 16px; row-gap: 0; }
  .ft.ft7 .ft-legal::before { content: ''; order: 2; flex-basis: 100%; height: 0; }
  .ft.ft7 .ft-legal li:nth-child(-n+3) { order: 1; }
  .ft.ft7 .ft-legal li:nth-child(n+4) { order: 3; }
  .ft.ft7 .ft-legal a, .ft.ft7 .ft-copy { min-height: 48px; font-size: 14px; }
  .ft.ft7 .ft-legal a { color: var(--sub); }
}
@media (prefers-reduced-motion: reduce) {
  .s7x .btn-kakao, .s7x .btn-line, .s7x .s7x-ln { transition: none !important; }
}