/* ==========================================================================
   몽땅식탁 (MONGTTANGSIGTAG) — 공통 스타일
   식문화 소셜벤처 소개 웹사이트 · Figma(node 3351-17597) 기준 재구현
   ========================================================================== */

:root {
    /* --- Figma 디자인 토큰 --- */
    --white: #ffffff;          /* gray0 */
    --gray1: #f9f9f9;
    --gray2: #ebebeb;
    --gray3: #cccccc;
    --gray4: #aaaaaa;
    --gray5: #8a8a8a;
    --gray6: #7b7b7b;
    --gray8: #6f6f6f;
    --gray9: #565656;
    --gray10: #2d2d2d;
    --ink: #22211e;            /* 헤드라인 진한 먹색 */
    --point: #fbba00;          /* 몽땅 노랑 */
    --point-strong: #f5a800;   /* hover */
    --soft-yellow: #fff3ce;    /* third 노랑 (서비스 섹션 배경) */
    --card-beige: #eee7da;     /* 카드 이미지 자리 배경 */
    --btn-text: #fffdf8;

    /* --- 하위 호환(about/service/contact에서 사용) --- */
    --point-soft: #fff6da;
    --point-soft2: var(--soft-yellow);
    --ink-2: #333333;
    --muted: #8b8b8b;
    --muted-2: #a6a6a6;
    --line: #ececec;
    --line-2: #e3e3e3;
    --bg: #ffffff;
    --bg-gray: #f2f2f2;
    --bg-stat: #f4f4f4;
    --radius: 16px;
    --radius-lg: 28px;

    --container: 1520px; /* 콘텐츠 1440 + 좌우 패딩 40*2 → 1920 화면에서 콘텐츠 여백 정확히 240 (Figma 일치) */
    --header-h: 80px;
    --font: "Wanted Sans Variable", "Wanted Sans", "Pretendard Variable",
            "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
            "Malgun Gothic", "맑은 고딕", sans-serif;
    --font-pre: "Pretendard Variable", "Pretendard", "Wanted Sans Variable",
            -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    color: var(--gray10);
    background: var(--white);
    line-height: 1.6;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 3vw, 40px); }

/* 공통 eyebrow / 헤딩 */
.eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: 0.28em;
    color: var(--gray8); text-transform: uppercase; display: block;
}
.section-title { font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1.4; color: var(--ink); letter-spacing: -0.01em; }

/* 이미지 플레이스홀더 (실제 에셋 교체 전) */
.ph {
    background: linear-gradient(135deg, #f3efe6, #efe9d8);
    display: flex; align-items: center; justify-content: center;
    color: #c9bfa6; font-size: 30px; overflow: hidden; position: relative;
}
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 600; font-size: 15px; line-height: 1; cursor: pointer;
    border: 0; border-radius: 999px; padding: 16px 32px; white-space: nowrap;
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn-yellow { background: var(--point); color: var(--gray10); }
.btn-yellow:hover { background: var(--point-strong); transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: var(--btn-text); }
.btn-dark:hover { background: #000; transform: translateY(-1px); }
.btn .arrow { font-size: 1.1em; line-height: 0; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--white);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.nav-logo img { height: 31px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: 36px; }
.nav-menu > li > a {
    font-size: 13.5px; font-weight: 500; color: var(--gray6); padding: 6px 0;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    transition: color .12s ease;
}
.nav-menu > li > a:hover, .nav-menu > li > a.active { color: var(--gray10); }
.nav-menu .caret { display: inline-flex; align-items: center; vertical-align: middle; color: inherit; transition: color .12s ease; }
.nav-menu .caret svg { width: 11px; height: auto; }

/* 드롭다운 */
.has-dropdown { position: relative; }
.dropdown {
    position: absolute; top: 100%; left: 0; transform: translateY(6px);
    background: #fff; border: 1px solid #f0f0f0; border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.10); padding: 8px; min-width: 176px;
    opacity: 0; visibility: hidden; transition: opacity .14s ease, transform .14s ease;
}
/* 트리거와 드롭다운 사이 투명 브릿지 — 마우스 내릴 때 hover가 끊겨 메뉴가 사라지는 것 방지 */
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 16px; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(4px); }
.dropdown a {
    /* 상위 네비(13.5px)와 같은 스케일 — Figma에 드롭다운 패널은 없어 네비 기준으로 맞춤 */
    display: block; padding: 10px 14px; border-radius: 10px;
    font-size: 13.5px; font-weight: 500; color: var(--gray6);
}
.dropdown a:hover { background: var(--gray2); color: var(--gray10); }

.nav-cta {
    flex: none; background: var(--point); color: var(--gray10);
    border-radius: 999px; padding: 11px 20px; font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; transition: background .12s ease, transform .12s ease;
}
.nav-cta:hover { background: var(--point-strong); transform: translateY(-1px); }
.nav-toggle {
    display: none; background: none; border: 0; cursor: pointer;
    width: 42px; height: 42px; margin-left: auto; color: var(--gray10);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; display: block; width: 22px; height: 2px; background: currentColor;
    border-radius: 2px; transition: transform .2s ease, opacity .2s ease; position: relative;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span::after { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Footer (공통) — Figma 4컬럼
   ========================================================================== */
.site-footer { background: var(--gray1); border-top: 1px solid var(--gray3); }
.site-footer .container { padding-top: 80px; padding-bottom: 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 44px 32px; flex-wrap: wrap; }
.f-brand { display: flex; gap: 28px; max-width: 430px; }
.f-logo img { width: 116px; height: auto; filter: brightness(0) invert(0.6); }
.f-desc { font-size: 14px; color: var(--gray8); line-height: 1.625; }
.f-contact dl { display: grid; grid-template-columns: auto auto; column-gap: 24px; row-gap: 16px; align-items: start; }
.f-contact dt { color: var(--gray5); font-size: 14px; font-weight: 500; white-space: nowrap; }
.f-contact dd { color: var(--gray5); font-size: 14px; font-weight: 400; line-height: 1.45; }
.f-contact dd a:hover { color: var(--gray9); text-decoration: underline; }
.f-nav { display: flex; flex-direction: column; gap: 16px; }
.f-nav a { color: var(--gray5); font-size: 14px; font-weight: 500; }
.f-nav a:hover { color: var(--gray9); }
.f-legal { display: flex; flex-direction: column; gap: 16px; }
.f-legal a { color: var(--gray5); font-size: 14px; font-weight: 500; }
.f-legal a:hover { color: var(--gray9); }
.f-sns { display: flex; gap: 12px; margin-top: 36px; }
.f-sns a {
    width: 36px; height: 36px; border-radius: 50%; background: var(--gray4);
    display: flex; align-items: center; justify-content: center; color: #fff;
    transition: background .12s ease;
}
.f-sns a:hover { background: var(--gray5); }
.f-sns svg { width: 18px; height: 18px; }
.footer-bottom {
    margin-top: 44px; padding-top: 28px; border-top: 1px solid #e5e5e5;
    font-size: 12px; color: var(--gray6);
}

/* ==========================================================================
   홈 (index) — Figma 01_홈
   ========================================================================== */
/* ----- Hero ----- */
.hero { padding-top: 0; }
.hero-photo { position: relative; border-radius: 40px; overflow: hidden; aspect-ratio: 1440 / 700; background: var(--card-beige); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 히어로 이미지 롤링(캐러셀) */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-dots { position: absolute; right: clamp(18px, 2.2vw, 30px); bottom: clamp(54px, 5vw, 70px); display: none; gap: 8px; z-index: 4; }
.hero-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.55); box-shadow: 0 0 4px rgba(0,0,0,.18); transition: width .3s ease, background .3s ease; }
.hero-dot.is-active { width: 24px; border-radius: 5px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

.hero-band {
    position: relative; width: 100vw; left: 50%; transform: translateX(-50%);
    margin-top: clamp(-70px, -3vw, -40px); z-index: 2; line-height: 0;
}
.hero-band-bg { display: block; width: 100%; height: auto; }
/* 아래 톱니 틈으로 흰 배경이 비치지 않도록, 밴드 하단 뒤에 연결 섹션과 같은 색을 깐다 */
.hero-band::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%;
    background: var(--soft-yellow); z-index: -1;
}
.hero-band-inner {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; line-height: 1.4;
    padding: 0 20px;
}
.hero-food {
    /* Figma: 물결선이 캐릭터 허리(약 66% 지점)를 지나도록 = 밴드 높이의 -34% */
    position: absolute; top: -34%; left: 50%; transform: translateX(-50%);
    width: clamp(175px, 16vw, 320px); height: auto; z-index: 3;
    border-radius: 10px;
}
.hero-band-inner .l1 { font-size: clamp(19px, 2.1vw, 40px); font-weight: 400; color: var(--gray10); }
.hero-band-inner .l2 { font-size: clamp(25px, 2.9vw, 56px); font-weight: 600; color: var(--gray10); letter-spacing: -0.02em; margin-top: 2px; }

/* ----- Services (몽땅식탁이 만드는 연결) ----- */
.home-connect { background-color: var(--soft-yellow); background-image: url("../img/connect-pattern-figma.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; padding: clamp(70px, 8.82vw, 134px) 0; }
.home-connect .head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 60px; }
.connect-grid { display: flex; justify-content: space-between; gap: 40px; }
.connect-card { flex: 1; display: flex; flex-direction: column; align-items: center; max-width: 424px; margin: 0 auto; }
.connect-blob { width: 100%; aspect-ratio: 424 / 380; }
.connect-blob img { width: 100%; height: 100%; object-fit: contain; }
.connect-badge {
    /* Figma 3382:10585 — padding 12px(사방 동일), 20px/lh15px/0.05em, 그림자 없음 */
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--point); border-radius: 999px; padding: 12px;
    font-family: var(--font-pre); font-size: clamp(15px, 1.32vw, 20px); font-weight: 600;
    line-height: 0.75; white-space: nowrap;
    color: var(--gray10); letter-spacing: 0.05em; margin-top: -16px; position: relative; z-index: 2;
}
.connect-title { margin-top: 16px; font-size: clamp(17px, 1.37vw, 20.8px); font-weight: 700; color: var(--ink); text-align: center; line-height: 1.375; max-width: 371px; }

/* ----- Archive (몽땅식탁 이야기) ----- */
.home-archive { padding: clamp(70px, 7.9vw, 120px) 0; }
.home-archive .head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 56px; }
.arc-block + .arc-block { margin-top: 64px; }
.arc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.arc-platform { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.arc-platform svg { width: 16px; height: 16px; }
.arc-more { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--gray10); }
.arc-more:hover { color: var(--point-strong); }

.insta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.insta-card .thumb { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--card-beige); }
.insta-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.insta-card .date { font-size: 11px; color: var(--gray5); margin-top: 12px; }
.insta-card .cap {
    font-size: 15px; font-weight: 600; color: var(--gray9); margin-top: 6px; line-height: 1.375;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.yt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.yt-card .thumb {
    aspect-ratio: 710 / 399; border-radius: 20px; overflow: hidden; position: relative; background: #ddd;
}
.yt-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.yt-card .thumb::after { content: ""; position: absolute; inset: 0; background: rgba(34,33,30,0.2); }
/* 자리 재생 중에는 딤 오버레이를 걷는다 — 안 걷으면 영상이 어두워지고 클릭도 가로챈다 */
.yt-card .thumb.is-playing::after { display: none; }
.yt-card .thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-card .play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
    width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.92);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}
.yt-card .play::before {
    content: ""; margin-left: 3px; width: 0; height: 0;
    border-style: solid; border-width: 8px 0 8px 15px; border-color: transparent transparent transparent var(--ink);
}
.yt-card .date { font-size: 11px; color: var(--gray5); margin-top: 16px; }
.yt-card .cap { font-size: 15px; font-weight: 600; color: var(--gray9); margin-top: 6px; }

/* ----- Results (함께 만든 식탁) ----- */
.home-results { background: var(--gray2); padding: 80px 0; }
.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.results-head .head { display: flex; flex-direction: column; gap: 8px; }
.results-head .note { font-family: var(--font-pre); font-size: 12.5px; color: var(--gray8); }
/* Figma 3382:10702 는 alignItems: flex-end — 아이콘 높이가 항목마다 달라도
   카드 아랫변이 한 줄로 맞고 아이콘만 제각기 솟는다.
   이게 없으면 위쪽 정렬이 되어 카드가 계단처럼 어긋난다. */
.stats-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; }
/* Figma 3382:10702 — 아이콘 크기와 카드에 파묻히는 깊이가 항목마다 다르다.
   일괄 120px/-40px 로 두면 특히 스마일이 80px→120px 로 50% 커진다.
   PNG 원본 비율이 피그마 프레임과 일치하므로 높이만 지정하면 폭은 따라온다. */
.stat-illust { display: flex; justify-content: center; position: relative; z-index: 2; }
.stat-illust img { height: 100%; width: auto; display: block; }
.stat-item:nth-child(1) .stat-illust { height: clamp(62px, 6.64vw, 101px); margin-bottom: calc(-1 * clamp(24px, 2.63vw, 40px)); }
.stat-item:nth-child(2) .stat-illust { height: clamp(74px, 7.89vw, 120px); margin-bottom: calc(-1 * clamp(36px, 3.95vw, 60px)); }
.stat-item:nth-child(3) .stat-illust { height: clamp(50px, 5.26vw, 80px);  margin-bottom: calc(-1 * clamp(24px, 2.63vw, 40px)); }
.stat-item:nth-child(4) .stat-illust { height: clamp(70px, 7.43vw, 113px); margin-bottom: calc(-1 * clamp(24px, 2.63vw, 40px)); }
.stat-card {
    background: var(--white); border-radius: 999px; width: 100%; min-height: 160px;
    padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.stat-num { font-family: var(--font-pre); font-size: clamp(34px, 3.4vw, 48px); font-weight: 700; color: var(--gray10); line-height: 1; }
.stat-label { font-family: var(--font-pre); font-size: 13px; font-weight: 600; color: var(--gray10); margin-top: 12px; }

/* ----- Partners (주요 파트너) ----- */
.home-partners { padding: clamp(70px, 7.9vw, 120px) 0; }
.home-partners .head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 60px; }
.partner-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.partner-track { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; row-gap: 32px; }
.partner-track img { height: clamp(40px, 4vw, 56px); width: auto; object-fit: contain; flex: none; margin: 0 clamp(24px, 2.8vw, 40px); }
.partner-track.is-rolling { flex-wrap: nowrap; justify-content: flex-start; width: max-content; row-gap: 0; will-change: transform; animation: partner-scroll var(--marquee-dur, 30s) linear infinite; }
.partner-marquee:hover .partner-track.is-rolling { animation-play-state: paused; }
/* 두 줄로 나뉘는 모바일에서 아랫줄 방향 */
.partner-track.is-reverse.is-rolling { animation-name: partner-scroll-rev; }
@keyframes partner-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes partner-scroll-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ----- Collaboration CTA (함께 건강한 식문화를 만들어요) ----- */
.home-collab { padding: clamp(70px, 7.9vw, 120px) 0; }
.collab-banner {
    background: var(--point); border-radius: clamp(40px, 6vw, 999px);
    padding: clamp(40px, 5vw, 56px) clamp(32px, 8vw, 120px);
    display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.collab-text { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.collab-text h2 { font-size: clamp(24px, 3vw, 40px); font-weight: 700; color: var(--ink); line-height: 1.4; }
.collab-text p { font-family: var(--font-pre); font-size: 14.5px; font-weight: 400; color: rgba(34,33,30,0.65); line-height: 1.63; }

/* ==========================================================================
   소개 (about)
   ========================================================================== */
.about-hero { position: relative; background: var(--card-beige); }
.about-hero-frame { position: relative; height: clamp(440px, 47.4vw, 720px); margin: 0; overflow: hidden; }
.about-hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.about-hero-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(34,33,30,0.85) 0%, rgba(34,33,30,0.7) 30%, rgba(34,33,30,0.25) 62%, rgba(0,0,0,0) 100%); }
.about-hero .container { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(36px, 5vw, 60px); z-index: 2; width: 100%; }
.about-hero h1 { color: #fff; font-size: clamp(26px, 3.95vw, 60px); font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; }

.about-history { padding: clamp(70px, 7.9vw, 120px) 0; }
.history-row { display: flex; gap: clamp(40px, 10vw, 152px); }
.history-row > h2 { font-size: clamp(28px, 2.6vw, 37px); font-weight: 700; color: var(--ink); flex: none; }
.history-list { display: flex; flex-direction: column; gap: 47px; max-width: 702px; flex: 1; }
.history-year { display: flex; gap: clamp(24px, 4.34vw, 66px); }
.history-year .yr { font-size: 24px; font-weight: 700; color: var(--ink); flex: none; min-width: 60px; }
.history-year ul { display: flex; flex-direction: column; gap: 16px; }
.history-year ul li { font-size: 15px; font-weight: 400; color: var(--gray9); line-height: 2; }

/* ==========================================================================
   서비스 (service)
   ========================================================================== */
.svc-hero { background: linear-gradient(180deg, #ffffff 0%, #fff9e8 58%, #fdd76b 100%); padding: clamp(40px, 5vw, 60px) 0 clamp(50px, 6vw, 90px); overflow: hidden; }
.svc-hero .row { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 67px); flex-wrap: wrap; }
.svc-phone { width: clamp(240px, 32vw, 460px); flex: none; }
.svc-phone img { width: 100%; height: auto; display: block; }
.svc-hero h1 { font-size: clamp(30px, 4vw, 60px); font-weight: 700; color: var(--ink); line-height: 1.4; letter-spacing: -0.02em; }
.svc-hero .stores { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.store-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: var(--btn-text); border-radius: 16px; padding: 14px 24px; }
.store-btn svg { width: 22px; height: 22px; flex: none; }
.store-btn .st { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.store-btn .sm { font-size: 10px; color: rgba(255,253,248,0.6); }
.store-btn .lg { font-size: 15px; font-weight: 600; }

.svc-feature { padding: clamp(70px, 8vw, 120px) 0; background: var(--btn-text); overflow: hidden; }
.svc-feature.alt { background: var(--point); }
.svc-feature .row { display: flex; align-items: center; justify-content: center; gap: clamp(32px, 5vw, 64px); flex-wrap: wrap; }
.svc-feature .fig { flex: none; max-width: 100%; }
.svc-feature .fig img { width: 100%; height: auto; display: block; }
.svc-fig-1 { width: clamp(320px, 42vw, 482px); }
.svc-fig-2 { width: clamp(340px, 50vw, 588px); }
.svc-fig-3 { width: clamp(320px, 42vw, 482px); }
.svc-feature h2 { font-family: var(--font-pre); font-size: clamp(23px, 2.6vw, 32px); font-weight: 700; color: var(--gray10); line-height: 1.4; letter-spacing: -0.02em; max-width: 480px; }
.svc-feature h2 .thin { font-weight: 500; }
.svc-feature.alt .ftext { text-align: right; }

/* ==========================================================================
   오프라인 서비스 (community) — Figma 03_오프라인서비스
   ========================================================================== */
/* Figma 3393:7955 — 섹션 800 안에서 구름 배너 top 79, 사진 bottom 693 → 위 79 / 아래 107 */
.comm-hero { position: relative; background: var(--point); overflow: hidden; padding: clamp(36px, 5.2vw, 79px) 0 clamp(44px, 7.04vw, 107px); }
.comm-hero .container { position: relative; }
/* Figma 3397:8527 — 단순 알약이 아니라 반지름 55.5px(=높이/2) 반원 범프가 이어진 구름 도형(732×111).
   사진(62.1vw)과 같은 "뷰포트 비율" 기준으로 묶어야 배너:사진 = Figma의 61%가 유지된다.
   배너 732/1920=38.1vw, 글자 48/1920=2.5vw, 겹침 84/1920=4.375vw — 셋을 같은 비율로 함께 줄여
   범프가 타원으로 찌그러지지 않게 한다. 모바일은 가독성을 위해 하한을 둔다. */
.comm-pill {
    display: flex; align-items: center; justify-content: center;
    width: clamp(280px, 38.1vw, 732px); aspect-ratio: 732 / 111;
    /* Figma: 구름 y79~190, 사진 y106 시작 → 사진이 구름 하단 84px(111px 중 76%)를 덮는다. */
    margin: 0 auto calc(-1 * clamp(32px, 4.375vw, 84px));
    position: relative; z-index: 3;
    background: url("../img/comm-pill-cloud.svg") center / 100% 100% no-repeat;
    color: var(--gray10); text-align: center; white-space: nowrap;
    font-size: clamp(17px, 2.5vw, 48px); font-weight: 600; line-height: 1.4;
}
/* Figma Mask group 3393:8426 = 1193×587.18.
   사진은 프레임 1920의 62.1%일 뿐이고 좌우 각 363px이 채소 컷아웃 자리다.
   컨테이너에 맡기면(=폭을 꽉 채우면) 밖으로 나가는 당근·비트가 화면 밖으로 잘리므로
   뷰포트 대비 비율로 묶어 어느 폭에서도 채소 공간이 함께 줄어들게 한다. */
.comm-hero-photo { position: relative; z-index: 2; width: min(1193px, 62.1vw); margin: 0 auto; }
.comm-hero-photo .cloud { width: 100%; height: auto; display: block; }
/* 채소 컷아웃 — 구름 사진 기준 %로 배치(어느 폭에서도 구름에 붙어 겹치게), Figma 좌표 기반 */
.veg { position: absolute; z-index: 3; pointer-events: none; height: auto; }
.veg-tomato { top: -25%; left: -17%; width: 27%; }
.veg-beet { top: 55%; left: -28%; width: 31%; }
.veg-carrot { top: 11%; right: -26%; width: 39%; }

/* ---------- 온라인/오프라인 서비스 전환 토글 ---------- */
.svc-switch-wrap { display: flex; justify-content: center; margin-bottom: clamp(24px, 3vw, 44px); }
.svc-switch { display: inline-flex; flex-direction: column; gap: 4px; padding: 8px; background: #fff; border: 1px solid #ebebeb; border-radius: 16px; box-shadow: 0 4px 4px rgba(129, 124, 115, .1); }
.svc-switch-btn { display: flex; align-items: center; min-width: 154px; height: 36px; padding: 0 15px; border-radius: 8px; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: #7b7b7b; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.svc-switch-btn:hover { color: #2d2d2d; }
.svc-switch-btn.is-active { background: #ebebeb; color: #2d2d2d; }

/* Figma 3397:8645 / 8671 / 8672 — 섹션 상하 여백 120px, 큰 사진 824×480(radius 32),
   본문 h2 40px/56px·p 20px/28.6px(모두 #22211E), 3장 썸네일 338×338(radius 20)·row gap 30px.
   컨테이너가 1520px에서 고정되므로 clamp 최대값도 1520 기준으로 도달시킨다(120/1520=7.9vw 등). */
.comm-sec { padding: clamp(48px, 7.9vw, 120px) 0; }
.comm-sec .row { display: flex; align-items: center; justify-content: space-between; gap: clamp(32px, 3vw, 46px); flex-wrap: wrap; }
.comm-sec .txt { flex: 1 1 340px; max-width: 580px; }
.comm-sec .txt h2 { font-size: clamp(22px, 2.63vw, 40px); font-weight: 700; color: var(--ink); line-height: 1.4; }
.comm-sec .txt p { font-size: clamp(15px, 1.32vw, 20px); color: var(--ink); line-height: 1.43; margin-top: 24px; }
/* flex-basis를 Figma 치수로 둬 사진이 제 폭을 먼저 확보하게 한다(넘치면 max-width에서 멈추고 잔여폭은 텍스트로) */
.comm-sec .media { flex: 1 1 824px; max-width: 824px; }
.comm-photo { width: 100%; border-radius: 32px; overflow: hidden; aspect-ratio: 824 / 480; background: var(--card-beige); }
.comm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comm-trio { display: flex; gap: clamp(14px, 1.97vw, 30px); flex: 1 1 1074px; max-width: 1074px; }
.comm-trio figure { flex: 1; min-width: 0; margin: 0; }
.comm-trio .comm-photo { aspect-ratio: 1 / 1; border-radius: 20px; }
/* 무한 롤링용 복제본 — 셋이 한 줄에 다 보이는 데스크톱에서는 필요 없다 */
.comm-trio .is-clone { display: none; }
.comm-trio figcaption { text-align: center; font-size: 13px; color: var(--gray8); margin-top: 12px; }

/* Figma 3397:8671 — 트리오 행은 사진 1074 + 간격 29 + 텍스트 337 로 1440 을 정확히 채운다.
   공용 값(.txt 340, gap 46)을 쓰면 합이 1460 이 되어 20px 넘쳐 텍스트가 아래 줄로 밀린다.
   flex-basis 0 + grow 를 피그마 비율로 주면 어떤 폭에서도 같은 비율로 나란히 유지된다. */
.comm-sec .row.trio-row { flex-wrap: nowrap; gap: clamp(16px, 1.97vw, 30px); }
.comm-sec .row.trio-row .comm-trio { flex: 1074 1 0; max-width: none; min-width: 0; }
.comm-sec .row.trio-row .txt { flex: 336 1 0; max-width: none; min-width: 0; }

/* ==========================================================================
   문의·협업 (contact)
   ========================================================================== */
.contact-hero { padding: 70px 0 60px; }
.contact-hero h1 { font-size: 44px; font-weight: 700; margin-top: 16px; }
.contact-hero p { font-size: 16px; color: var(--muted); margin-top: 18px; line-height: 1.7; }
.contact-section { background: var(--bg-gray); padding: 80px 0; }
/* 문의 콘텐츠(제목+폼)를 가운데 정렬된 940 컬럼으로 통일 — 헤더/푸터는 1440 셸 유지 */
.contact-hero .container,
.contact-section .container { max-width: 1020px; }
.contact-form { max-width: 940px; margin: 0; }
.cf-field { margin-bottom: 26px; }
.cf-field label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.cf-field label .req { color: var(--gray4); }
.cf-field input, .cf-field textarea {
    width: 100%; font: inherit; font-size: 15.5px; color: var(--gray10);
    background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; padding: 18px 20px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.cf-field textarea { min-height: 190px; resize: vertical; }
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--point); box-shadow: 0 0 0 3px rgba(251,186,0,0.16); }
.cf-consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
.cf-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--point-strong); flex: none; }
.cf-consent-text { display: flex; flex-direction: column; gap: 3px; }
.cf-consent-main { font-size: 14px; color: var(--gray8); }
.cf-consent-detail { font-size: 12px; color: var(--gray4); line-height: 1.5; }
.cf-consent a { color: var(--point-strong); text-decoration: underline; font-weight: 500; }
.cf-submit-row { display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex-wrap: wrap; }
.cf-submit-row .note { font-size: 13.5px; color: var(--muted); }
.cf-submit-row .btn { padding: 17px 40px; font-size: 16px; border-radius: 14px; }
.cf-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.cf-result { margin-top: 20px; text-align: right; font-size: 14.5px; font-weight: 600; display: none; }
.cf-result.show { display: block; }
.cf-result.ok { color: #1f7a3d; }
.cf-result.err { color: #c0392b; }
/* 전송 실패 시 뜨는 "메일로 바로 보내기" 대체 링크 */
.cf-fallback {
    display: inline-block; margin-top: 8px; padding: 10px 18px; border-radius: 999px;
    background: var(--point); color: var(--gray10); font-size: 14px; font-weight: 600;
}
.cf-fallback:hover { background: var(--point-strong); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .connect-grid { flex-wrap: wrap; }
    .connect-card { flex: 1 1 40%; }
    /* 좁은 화면에서는 nowrap 을 풀어 사진 3장 위 / 텍스트 아래로 쌓는다.
       그대로 두면 텍스트 칸이 23% 로 눌려 한 글자씩 끊긴다. */
    .comm-sec .row.trio-row { flex-wrap: wrap; }
    .comm-sec .row.trio-row .comm-trio,
    .comm-sec .row.trio-row .txt { flex: 1 1 100%; }
}
@media (max-width: 960px) {
    .footer-top { gap: 40px; }
    .f-brand { flex: 1 1 100%; }
    .insta-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { flex-wrap: wrap; }
    .stat-item { flex: 1 1 42%; }
    .svc-feature h2 { max-width: none; text-align: center; }
    .svc-feature.alt .ftext { text-align: center; }
    .svc-hero h1 { text-align: center; }
    .history-row { flex-direction: column; gap: 28px; }
    .results-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
    :root { --header-h: 64px; }
    /* 모바일: 62.1vw면 구름 사진이 너무 작아지므로 폭을 키우고,
       대신 채소 컷아웃을 안쪽으로 당겨 화면 밖으로 잘리지 않게 한다. */
    /* ---- 오프라인 서비스 (Figma 03_오프라인서비스_360 / 3414:10428) ----
       히어로는 360×360. 알약 291×44 를 y=59 에, 구름 사진 320 을 y=66.15 에 놓고
       채소 컷아웃 3개는 섹션 좌표로 배치한다.
       사진을 static 으로 만들어 채소가 .container(=화면 폭) 기준으로 잡히게 한다. */
    .comm-hero { padding: 16.39vw 0 25.25vw; }          /* Figma 59 / 90.9 */
    .comm-pill {
        width: 80.83vw;                                  /* Figma 291 */
        margin: 0 auto -10.24vw;                         /* 사진이 알약 아래 36.85 를 덮는다 */
        font-size: 20px;
    }
    .comm-hero-photo { position: static; width: 88.89vw; }   /* Figma 320, 가운데 = x20 */
    .veg-tomato { left: -4.17vw;  top: -18.61vw; width: 27.78vw; }   /* Figma 100 @-15,-8 */
    .veg-beet   { left: -7.78vw;  top:  31.11vw; width: 51.99vw; }   /* Figma 187 @-28,171 */
    .veg-carrot { left: 67.22vw;  top:  20.56vw; width: 46.58vw; right: auto; }  /* Figma 168 @242,133 */

    /* 본문 3개: 글 위 / 그림 아래, 섹션 위아래 60, 사이 20 */
    .comm-sec { padding: 60px 0; }
    .comm-sec .row { flex-direction: column; align-items: stretch; gap: 20px; }
    /* 가로 배치용 flex-basis(340/824/1074)가 세로로 바뀌면 "높이"로 읽혀
       글 블록이 340px 가 된다. 세로에서는 전부 내용만큼만 차지하게 푼다. */
    .comm-sec .row > * { flex: none; max-width: none; min-width: 0; }
    .comm-sec .row .txt { order: 1; }
    .comm-sec .row .media, .comm-sec .row .comm-trio { order: 2; }
    .comm-sec .txt h2 { font-size: 20px; }
    .comm-sec .txt p { font-size: 14px; line-height: 1.532; margin-top: 16px; }
    .comm-sec .media { flex: none; }
    .comm-photo { aspect-ratio: auto; height: 210px; border-radius: 24px; }

    /* 3장 썸네일: Figma 는 253.5 카드를 가운데 정렬로 둬 양옆 장이 걸쳐 보인다.
       한 장씩 가운데 세우는 캐러셀이라 자동으로 넘긴다(app.js). 손으로도 넘길 수 있다. */
    /* 가운데 장이 다 보이고 양옆 장이 걸쳐 보인다 (Figma). 첫 장 왼쪽에 빈칸이 생기지 않도록
       app.js 가 양 끝에 복제본을 붙여 끝없이 돌린다. */
    .comm-sec .row.trio-row .comm-trio {
        /* 1024 이하 규칙의 flex:1 1 100% 가 살아 있으면 트랙이 내용 폭(1976)만큼 벌어져
           페이지 전체가 가로로 밀린다. 폭을 못 박아 화면 안에서만 굴러가게 한다. */
        flex: none; width: 100%; min-width: 0;
        overflow-x: auto; gap: 22.5px; scroll-snap-type: x mandatory; scrollbar-width: none;
        padding-inline: calc((100% - 70.42vw) / 2);
    }
    .comm-sec .row.trio-row .comm-trio::-webkit-scrollbar { display: none; }
    .comm-trio figure { flex: 0 0 70.42vw; scroll-snap-align: center; }   /* Figma 253.5 */
    .comm-trio .is-clone { display: block; }
    .comm-trio .comm-photo { height: auto; aspect-ratio: 1 / 1; border-radius: 15px; }
    .comm-trio figcaption { font-size: 10px; margin-top: 9px; }
    .nav-menu {
        position: fixed; top: var(--header-h); left: 0; right: 0; margin: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--line); padding: 8px 24px 20px;
        transform: translateY(-140%); transition: transform .25s ease; box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    }
    .nav-menu.open { transform: translateY(0); }
    .nav-menu > li { border-bottom: 1px solid #f4f4f4; }
    .nav-menu > li > a { padding: 15px 0; font-size: 16px; }
    .dropdown { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 8px 12px; min-width: 0; }
    .dropdown::before { display: none; }
    .dropdown a { padding: 10px 0; }
    .nav-toggle { display: flex; align-items: center; justify-content: center; }
    .nav-cta { display: none; }
    /* ------------------------------------------------------------------
       홈 모바일 — Figma "01_홈_360" (3414:8901) 기준.
       모바일 프레임은 360 폭으로 그려져 있어 vw 계수는 값/360*100 이다.
       섹션 공통 여백은 데스크톱 clamp 하한(70px)이 아니라 Figma 그대로 60px.
       ------------------------------------------------------------------ */
    .home-connect, .home-archive, .home-results,
    .home-partners, .home-collab { padding: 60px 0; }
    .home-connect .section-title, .home-archive .section-title,
    .home-results .section-title, .home-partners .section-title { font-size: 20px; }

    /* 히어로 사진: Figma 360×330 — 화면 폭을 그대로 쓰고 모서리도 각지다 */
    .hero > .container { padding: 0; }
    .hero-photo { border-radius: 0; aspect-ratio: 360 / 330; }
    /* 밴드가 사진 아래 29px 을 덮는다(360 기준). 밴드 높이 144, 캐릭터 폭 178 */
    .hero-band { margin-top: clamp(-34px, -8.06vw, -26px); }
    /* 밴드 SVG(2213×311, 가로 7.1:1)는 상자에 "맞추는" 게 아니라 Figma 배치를 그대로
       재현해야 물결 크기가 맞는다. Figma 는 360 프레임 안에 SVG 를 1106.5×155.5 로 놓고
       x=-349, y=+4.5 지점부터 잘라 쓴다.
       object-fit 으로는 이 배율이 안 나온다 — fill 은 SVG 안쪽에서 레터박싱이 한 번 더 일어나
       노란 부분이 55px 만 그려지고(사진과 밴드 사이 흰 줄), cover 는 상자 높이에만 맞춰
       그려서 물결이 Figma 보다 촘촘해진다. 그래서 밴드 높이 기준으로 직접 계산한다. */
    .hero { overflow: hidden; }   /* 밴드 SVG 가 화면 밖으로 삐져나가는 부분을 잘라낸다 */
    .hero-band { --band-h: clamp(132px, 40vw, 168px); height: var(--band-h); }
    .hero-band-bg {
        position: absolute; max-width: none; height: auto;
        top:   calc(var(--band-h) *  0.03125);   /* Figma 4.5 / 144 */
        left:  calc(var(--band-h) * -2.42361);   /* Figma -349 / 144 */
        width: calc(var(--band-h) *  7.68403);   /* Figma 1106.5 / 144 */
    }

    /* 헤더 (Figma 3414:8902): 로고 93×24, 햄버거 아이콘 20×20.
       아이콘은 iwwa:menu — 선 12.92 길이 / 0.5 두께 / 3.625 간격 / #7B7B7B 로 가는 선이다.
       버튼 자체는 손가락이 닿아야 하므로 42×42 를 그대로 두고 그려지는 선만 맞춘다. */
    .nav-logo img { height: 24px; }
    .nav-toggle { color: var(--gray6); }
    .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
        width: 12.92px; height: 0.5px; border-radius: 0.25px;
    }
    .nav-toggle span::before { top: -3.625px; }
    .nav-toggle span::after { top: 3.625px; }
    .nav-toggle.open span::before { transform: translateY(3.625px) rotate(45deg); }
    .nav-toggle.open span::after { transform: translateY(-3.625px) rotate(-45deg); }
    .hero-band-inner { padding: 0 8px; }
    .hero-food { top: -34%; width: clamp(160px, 49.4vw, 212px); }
    .hero-band-inner .l1 { font-size: 16px; }
    .hero-band-inner .l2 { font-size: 24px; }

    /* Services 배경 무늬: 모바일은 아예 다른 에셋이다.
       데스크톱 connect-pattern-figma.svg 는 1920×1356 가로형이라
       세로로 긴 모바일 섹션에 cover 로 깔면 좌우가 잘려 무늬가 커 보인다.
       Figma 모바일(3414:9687)은 959×1630 세로형을 x=-308.82, y=-169.78 에 놓는다.
       360 기준 값을 vw 로 옮겨 화면 폭에 따라 같은 비율로 따라가게 한다. */
    .home-connect {
        background-image: url("../img/connect-pattern-mobile.svg");
        background-size: 266.35vw 452.70vw;      /* Figma 958.86 × 1629.73 / 360 */
        background-position: -85.78vw -47.16vw;  /* Figma x -308.82, y -169.78 / 360 */
    }

    /* Services: 카드 세로 스택. 제목-카드 20px, 카드끼리 32px */
    .home-connect .head { margin-bottom: 20px; }
    .connect-grid { gap: 32px; }
    .connect-card { flex: 1 1 100%; max-width: 360px; }

    /* Archive: 인스타 2×2(154×155, gap 12) + 유튜브 세로 2장(16:9, gap 12).
       Figma 모바일에는 날짜·캡션이 없다 — 썸네일만 보여주고 텍스트는 감춘다. */
    .home-archive .head { margin-bottom: 16px; }
    .arc-block + .arc-block { margin-top: 16px; }
    .arc-head { margin-bottom: 12px; }
    .insta-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .yt-grid { grid-template-columns: 1fr; gap: 12px; }
    .yt-card .thumb { border-radius: 16px; }
    /* 재생 버튼 (Figma 3414:8978): 원 44×44, 그림자 0 6px 12px -4px.
       아이콘은 CSS 로 그린 채운 삼각형이 아니라 18×18 외곽선 삼각형이다
       (2px 선, 끝이 둥글다). 그래서 더 크고 굵어 보인다. */
    .yt-card .play { width: 44px; height: 44px; box-shadow: 0 6px 12px -4px rgba(0,0,0,.1); }
    .yt-card .play::before {
        width: 18px; height: 18px; margin: 0; border: 0;
        background: url("../img/play.svg") no-repeat center / contain;
    }
    .insta-card .date, .insta-card .cap,
    .yt-card .date, .yt-card .cap { display: none; }

    /* Results: 기준 문구가 제목 옆이 아니라 숫자 카드 아래 가운데로 내려온다.
       display:contents 로 .results-head 를 걷어내 컨테이너 직계로 만든 뒤 순서를 바꾼다. */
    .home-results .container { display: flex; flex-direction: column; }
    .results-head { display: contents; }
    .results-head .head { order: 1; margin-bottom: 16px; }
    .stats-grid { order: 2; gap: 16px; }
    .results-head .note { order: 3; margin-top: 16px; text-align: center; }
    .stat-item { flex: 1 1 100%; }

    /* Partner (Figma 3414:9862): 로고 4개 / 3개 두 줄, 줄 간격 40.
       Figma 는 높이를 통일하지 않고 모든 로고를 원본의 0.4 배로 똑같이 줄인다 —
       높이를 하나로 맞추면 가로로 긴 로고(파트너3·7)만 두 배로 커져 비율이 무너진다.
       줄 나누기는 app.js 가 하고, 한 줄이 708px 라 화면에 안 들어가므로
       Figma 처럼 잘라내는 대신 줄마다 마퀴로 흘려보낸다(아랫줄은 반대 방향). */
    .home-partners .head { margin-bottom: 20px; }
    .partner-marquee { display: flex; flex-direction: column; gap: 40px; }
    .partner-track img { margin: 0 20px; }
    .partner-track img[src$="partner-1.png"] { height: 64px; }
    .partner-track img[src$="partner-2.png"] { height: 50px; }
    .partner-track img[src$="partner-3.png"] { height: 34px; }
    .partner-track img[src$="partner-4.png"] { height: 51px; }
    .partner-track img[src$="partner-5.png"] { height: 82px; }
    .partner-track img[src$="partner-6.png"] { height: 77px; }
    .partner-track img[src$="partner-7.png"] { height: 47px; }

    /* Collaboration: 카드가 작아지고(반경 20 / 안쪽 24) 버튼이 가로를 꽉 채운다 */
    .collab-banner {
        flex-direction: column; align-items: stretch;
        border-radius: 20px; padding: 24px; gap: 16px;
    }
    .collab-text h2 { font-size: 20px; }
    .collab-text p { font-size: 13px; line-height: 1.81; }
    .home-collab .btn { justify-content: center; height: 52px; padding: 0 20px; font-size: 13px; }

    /* ----- 푸터 (Figma 3414:9025) -----
       데스크톱은 4컬럼이지만 모바일은 전부 한 줄로 쌓이고 순서도 다르다:
       로고 → 메뉴 → 약관 → 회사정보 → SNS → 저작권.
       마크업 순서는 로고 → 회사정보 → 메뉴 → 약관(+SNS) 이라 order 로 바꾼다.
       SNS 는 .f-legal 안에 들어 있어서, 껍데기를 display:contents 로 걷어내
       링크와 SNS 에 각각 순서를 준다. */
    .site-footer .container { padding: 60px 16px; }
    .footer-top { flex-direction: column; align-items: stretch; gap: 10px; }
    .f-brand   { order: 1; margin-bottom: 10px; }
    .f-nav     { order: 2; gap: 10px; }
    .f-legal   { display: contents; }
    .f-legal a { order: 3; }
    .f-contact { order: 4; margin-top: 10px; }
    .f-sns     { order: 5; margin-top: 10px; }

    /* 브랜드 소개 문단은 Figma 모바일에 없다 — 두면 5~6줄이라 푸터 혼자 화면 하나를 더 먹는다 */
    .f-desc { display: none; }

    /* 회사정보: 대표·사업자등록번호만 라벨을 달고, 메일·주소는 라벨 없이 한 줄씩 */
    /* auto auto 로 두면 남는 폭을 두 칸이 나눠 가져 값이 화면 절반까지 밀린다.
       Figma 처럼 라벨 칸은 글자 폭만큼만 쓰고 값은 바로 16px 옆에 붙인다. */
    .f-contact dl { grid-template-columns: max-content 1fr; row-gap: 8px; column-gap: 16px; }
    .f-contact dt:nth-of-type(n+3) { display: none; }
    .f-contact dd:nth-of-type(n+3) { grid-column: 1 / -1; }

    /* Figma 모바일에는 저작권 위 구분선이 없다 */
    .footer-bottom { margin-top: 12px; padding-top: 0; border-top: 0; }
    .contact-hero h1 { font-size: 30px; }

    /* 온라인 서비스 히어로 (Figma 3414:10061): 섹션 위아래 60,
       폰+말풍선 합성본 313.83 폭, 그 아래 11 띄우고 제목 24(위 16),
       스토어 버튼은 320 을 8 간격으로 둘이 반씩 나눠 갖고 높이 56. */
    .svc-hero { padding: 60px 0; }
    .svc-hero .row { flex-direction: column; align-items: stretch; gap: 11px; }
    .svc-phone { width: 87.18vw; margin: 0 auto; }   /* Figma 313.83 / 360 */
    .svc-hero .htext { text-align: center; }
    .svc-hero h1 { font-size: 24px; padding-top: 16px; }
    .svc-hero .stores { gap: 8px; margin-top: 20px; flex-wrap: nowrap; }
    .svc-hero .store-btn { flex: 1 1 0; min-width: 0; height: 56px; padding: 16px; gap: 12px; }

    /* 기능 3개 (Figma 3414:10101 / 10106 / 10381) — 모바일은 셋 다 같은 틀이다.
       글이 위, 왼쪽 정렬 20px, 사이 20px, 섹션 위아래 60.
       데스크톱은 그림·글이 좌우로 번갈아 놓여 섹션마다 마크업 순서가 달라서
       위아래를 order 로 고정한다. */
    .svc-feature { padding: 60px 0; }
    .svc-feature .row { flex-direction: column; align-items: flex-start; gap: 20px; }
    .svc-feature .ftext { order: 1; }
    /* max-width:100% 를 풀어야 Figma 크기가 나온다 — 2번은 일부러 화면 밖으로 넘긴다 */
    .svc-feature .fig { order: 2; max-width: none; }
    .svc-feature h2, .svc-feature.alt .ftext { text-align: left; }
    .svc-feature h2 { font-size: 20px; }
    .svc-fig-1 { width: 88.61vw; }    /* Figma 319 / 360 */
    .svc-fig-2 { width: 109.16vw; }   /* Figma 392.98 — 오른쪽으로 넘겨 섹션에서 잘린다 */
    /* 3번은 PNG 에 그림자 여백이 같이 들어 있다(카드 290.84×227, 파일 333.67×269.67).
       여백을 음수 마진으로 걷어내야 카드가 왼쪽 20 에 서고 섹션 높이도 Figma 와 맞는다. */
    .svc-fig-3 { width: 92.69vw; margin: -2.96vw -5.95vw -8.87vw; }

    /* 소개 히어로 (Figma 3414:9959): 프레임 360×400.
       사진은 3024×4032 세로 원본인데 Figma 는 이걸 610 폭까지 키운 뒤
       세로 가운데 띠(원본의 8.8%~65.0% 구간)만 보여준다.
       cover 는 폭 360 에 맞춰 그리니 Figma 보다 1.69 배 작게(덜 확대되어) 나온다.
       object-fit 으로는 이 배율이 안 나와서 크기·위치를 직접 준다. */
    .about-hero-frame { height: clamp(368px, 111.11vw, 480px); }
    .about-hero-frame img {
        position: absolute; max-width: none;
        width: 169.44vw;    /* Figma 610 / 360 */
        height: auto;
        left: -31.11vw;     /* Figma x -112 / 360 */
        top: -35.95vw;      /* 잘라낸 띠의 위쪽까지 올려 원본 기준으로 맞춘 값 */
    }
    .about-hero h1 { font-size: 24px; }
    .about-hero .container { bottom: 28px; }
    .history-year { flex-direction: column; gap: 8px; }
    .history-year .yr { font-size: 20px; }
    /* ---- 문의·협업 (Figma 04_문의/협업_360 / 3414:9459) ----
       위아래 여백이 32 로 확 줄고, 입력칸·글자도 데스크톱보다 한 단계씩 작다. */
    .contact-hero { padding: 32px 0; }
    .contact-hero h1 { font-size: 20px; margin-top: 0; }
    .contact-hero p { font-size: 15px; line-height: 1.4; margin-top: 16px; }
    .contact-section { background: #E8E6DF; padding: 32px 0; }
    .cf-field { margin-bottom: 16px; }
    .cf-field label { font-size: 13.5px; font-weight: 400; margin-bottom: 8px; }
    .cf-field input, .cf-field textarea {
        height: 56px; padding: 14px 16px; border-radius: 14px;
        border-color: rgba(34, 33, 30, 0.11);
    }
    .cf-field textarea { height: auto; min-height: 140px; }
    .cf-submit-row { justify-content: stretch; gap: 12px; }
    .cf-submit-row .note { font-size: 12px; }
    .cf-submit-row .btn { width: 100%; height: 54px; padding: 0 20px; border-radius: 16px; }
    .cf-result { text-align: center; }
}
/* Figma 모바일(360)은 인스타를 2×2 로 유지한다 — 1열로 풀면 4장이 세로로 쌓여
   아카이브 섹션만 화면 3개 분량이 된다. 밴드 글자도 모바일 값(16/24)을 그대로 쓴다. */

/* ==========================================================================
   법적 문서 모달 (웹사이트 전용)
   terms/*.html 원본 페이지는 앱 스토어·앱 웹뷰가 참조하므로 절대 건드리지 않는다.
   여기서는 사이트 안의 링크만 가로채 같은 문서를 팝업으로 보여준다.
   ========================================================================== */
.doc-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 4vw, 40px); }
.doc-modal[hidden] { display: none; }
.doc-modal-backdrop { position: absolute; inset: 0; background: rgba(34,33,30,.55); opacity: 0; transition: opacity .2s ease; }
.doc-modal.is-open .doc-modal-backdrop { opacity: 1; }
.doc-modal-panel {
    position: relative; display: flex; flex-direction: column;
    width: 100%; max-width: 900px; max-height: 88vh;
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    opacity: 0; transform: translateY(12px) scale(.985);
    transition: opacity .2s ease, transform .2s ease;
}
.doc-modal.is-open .doc-modal-panel { opacity: 1; transform: none; }
.doc-modal-head { flex: none; display: flex; align-items: center; gap: 14px; padding: 18px clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--line); }
.doc-modal-head h2 { flex: 1; margin: 0; font-size: clamp(17px, 2vw, 21px); font-weight: 700; color: var(--gray10); letter-spacing: -0.02em; }
.doc-modal-close { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--gray2); color: var(--gray10); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s ease; }
.doc-modal-close:hover { background: #e0e0e0; }
.doc-modal-close svg { width: 16px; height: 16px; }
.doc-modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) 40px; color: var(--gray8); line-height: 1.75; }
.doc-modal-status { padding: 56px 0; text-align: center; color: var(--gray6); font-size: 14px; }
body.doc-modal-open { overflow: hidden; }

/* 불러온 문서 본문 — terms/privacy.html 인라인 스타일과 동일한 위계를 모달 안에서 재현 */
.doc-modal-body h2 { font-size: clamp(17px, 2vw, 20px); color: var(--gray10); font-weight: 700; letter-spacing: -0.01em; margin: 36px 0 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.doc-modal-body > :first-child { margin-top: 0; }
.doc-modal-body h3 { font-size: 15.5px; color: var(--gray10); font-weight: 600; margin: 22px 0 8px; }
.doc-modal-body p { margin: 0 0 12px; font-size: 15px; }
.doc-modal-body ul, .doc-modal-body ol { margin: 0 0 14px; padding-left: 22px; font-size: 15px; }
.doc-modal-body li { margin-bottom: 7px; }
.doc-modal-body a { color: #b47f00; text-decoration: underline; }
.doc-modal-body strong { color: var(--gray10); }
.doc-modal-body .doc-meta { color: var(--gray5); font-size: 13.5px; margin: 0 0 8px; }
.doc-modal-body .doc-intro { background: #faf9f6; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 0 0 8px; font-size: 14.5px; }
.doc-modal-body .doc-intro strong { font-weight: 600; }
.doc-modal-body .note { font-size: 13px; color: var(--gray5); background: #fff8e6; border-left: 3px solid var(--point); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 12px 0; }
.doc-modal-body .tbl-scroll { overflow-x: auto; }
.doc-modal-body table.tbl { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 14px; }
.doc-modal-body table.tbl th, .doc-modal-body table.tbl td { border: 1px solid var(--line); padding: 10px 13px; text-align: left; vertical-align: top; }
.doc-modal-body table.tbl th { background: #faf9f6; color: var(--gray10); font-weight: 600; white-space: nowrap; }

@media (max-width: 768px) {
    .doc-modal { padding: 0; align-items: stretch; }
    .doc-modal-panel { max-width: none; max-height: none; height: 100%; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .doc-modal-backdrop, .doc-modal-panel { transition: none; }
}