/* ==================================================================
   편한 펫택시&피크닉 — 디자인 시스템

   뼈대 = 국내 쇼핑몰(쿠팡·지마켓) : 흰 배경, 상단 고정 탭,
          촘촘한 카드 그리드, 가로 스크롤 레일, 하단 고정 액션 바
   인상 = 다크 에디토리얼 : 풀블리드 검정 섹션, 초대형 타이포,
          얇은 구분선, 골드 옐로 포인트

   글자 크기는 아래 --fs-* 여섯 단계만 씁니다. 임의 크기를 쓰지 않습니다.
   색을 바꾸려면 :root 값만 고치면 전체에 반영됩니다.
   ================================================================== */

:root {
    /* 브랜드 — 골드 옐로 */
    --brand:      #F0A81C;
    --brand-hi:   #FFC24D;
    --brand-dark: #B4780A;
    --brand-deep: #8A5C05;
    --brand-soft: #FFF6E4;
    --brand-line: #F6DFAE;
    --cream:      #FEECBF;

    --danger:      #D93B40;
    --danger-hi:   #FF7A7E;
    --danger-dark: #A82B2F;
    --danger-soft: #FDF1F1;
    --danger-line: #F2D2D3;
    --naver:       #03C75A;
    --naver-dark:  #02A94C;

    /* 밝은 면 */
    --paper:   #FFFFFF;
    --paper-2: #FAF8F4;
    --paper-3: #F1EEE8;
    --ink:     #17150F;
    --ink-2:   #5C574C;
    --ink-3:   #918B7E;
    --line:    #EBE7DF;
    --line-2:  #D9D3C7;

    /* 어두운 면 */
    --dark:    #14120D;
    --dark-2:  #1F1C15;
    --dark-3:  #2B271D;
    --on-dark:   #FFFFFF;
    --on-dark-2: #ADA79A;
    --on-dark-3: #736E62;
    --line-dark: #322E24;

    /* 글자 크기 — 이 여섯 단계만 사용합니다 */
    --fs-11: 12px;     /* 캡션 · 꼬리말 */
    --fs-12: 13px;     /* 보조 설명 */
    --fs-13: 14px;     /* 작은 본문 · 탭 · 배지 */
    --fs-15: 16px;     /* 기본 본문 · 버튼 · 입력 (16px 미만이면 iOS 가 확대함) */
    --fs-17: 18px;     /* 카드 제목 · 강조 */
    --fs-20: 21px;     /* 소제목 */
    --t-sec:  clamp(23px, 6.2vw, 34px);   /* 섹션 헤드라인 */
    --t-hero: clamp(30px, 8.8vw, 54px);   /* 히어로 헤드라인 */

    /* 좌우 여백 — 본문과 가로 스크롤 목록이 같은 값을 씁니다 */
    --pad: 20px;

    /* 높이 */
    --hd:  56px;
    --tab: 0px;

    --r:    10px;
    --r-l:  16px;
    --r-xl: 22px;

    --kr: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
    --en: 'Oswald', var(--kr);

    --ease: cubic-bezier(.22, 1, .36, 1);
    --shadow:    0 1px 2px rgba(23,21,15,.05), 0 6px 20px rgba(23,21,15,.07);
    --shadow-lg: 0 4px 12px rgba(23,21,15,.09), 0 18px 48px rgba(23,21,15,.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--kr);
    font-size: var(--fs-15);
    line-height: 1.55;
    word-break: keep-all;
    overflow-x: hidden;
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }

::selection { background: var(--brand); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 3px; border-radius: 8px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }

.skip-link {
    position: fixed; top: -100px; left: 12px; z-index: 300;
    padding: 12px 18px; background: var(--ink); color: #fff;
    border-radius: var(--r); font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------ */
/* 아이콘 — 이모지 대신 씁니다. 색은 글자색을 따라갑니다.                 */
/* ------------------------------------------------------------------ */

.ic {
    width: 1em; height: 1em; flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
}
.ic-phone   { -webkit-mask-image: var(--m-phone);   mask-image: var(--m-phone); }
.ic-sms     { -webkit-mask-image: var(--m-sms);     mask-image: var(--m-sms); }
.ic-talk    { -webkit-mask-image: var(--m-talk);    mask-image: var(--m-talk); }
.ic-chev    { -webkit-mask-image: var(--m-chev);    mask-image: var(--m-chev); }
.ic-arrow   { -webkit-mask-image: var(--m-arrow);   mask-image: var(--m-arrow); }
.ic-check   { -webkit-mask-image: var(--m-check);   mask-image: var(--m-check); }
.ic-copy    { -webkit-mask-image: var(--m-copy);    mask-image: var(--m-copy); }
.ic-down    { -webkit-mask-image: var(--m-down);    mask-image: var(--m-down); }
.ic-close   { -webkit-mask-image: var(--m-close);   mask-image: var(--m-close); }
.ic-map     { -webkit-mask-image: var(--m-map);     mask-image: var(--m-map); }
.ic-doc     { -webkit-mask-image: var(--m-doc);     mask-image: var(--m-doc); }
/* 이용 목적 */
.ic-hosp    { -webkit-mask-image: var(--m-hosp);    mask-image: var(--m-hosp); }
.ic-groom   { -webkit-mask-image: var(--m-groom);   mask-image: var(--m-groom); }
.ic-plane   { -webkit-mask-image: var(--m-plane);   mask-image: var(--m-plane); }
.ic-box     { -webkit-mask-image: var(--m-box);     mask-image: var(--m-box); }
.ic-leaf    { -webkit-mask-image: var(--m-leaf);    mask-image: var(--m-leaf); }
.ic-home    { -webkit-mask-image: var(--m-home);    mask-image: var(--m-home); }
/* 특징 */
.ic-clock   { -webkit-mask-image: var(--m-clock);   mask-image: var(--m-clock); }
.ic-shield  { -webkit-mask-image: var(--m-shield);  mask-image: var(--m-shield); }
.ic-spray   { -webkit-mask-image: var(--m-spray);   mask-image: var(--m-spray); }

:root {
    --m-phone:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.4 0 .7-.2 1l-2.3 2.1z'/%3E%3C/svg%3E");
    --m-chev:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 5.6 9l1.4-1.4 5 5 5-5L18.4 9z'/%3E%3C/svg%3E");
    --m-talk:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.9 3 2.8 6.3 2.8 10.4c0 2.6 1.7 4.9 4.3 6.2-.2.7-.7 2.5-.8 2.9 0 0-.1.3.1.4.2.1.4 0 .4 0 .5-.1 3-2 3.7-2.5.5.1 1 .1 1.5.1 5.1 0 9.2-3.3 9.2-7.4S17.1 3 12 3z'/%3E%3C/svg%3E");
    --m-sms:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm3 6v2h2V9H7zm4 0v2h2V9h-2zm4 0v2h2V9h-2z'/%3E%3C/svg%3E");
    --m-arrow:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5 10.4 4l8 8-8 8L9 18.5 15.5 12z'/%3E%3C/svg%3E");
    --m-check:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 7.8 19 6.4z'/%3E%3C/svg%3E");
    --m-copy:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h8a3 3 0 0 1 3 3v10h-2V5a1 1 0 0 0-1-1H9V2z'/%3E%3Cpath d='M6 6h9a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H6z'/%3E%3C/svg%3E");
    --m-down:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.2l3.1-3.1 1.4 1.4-5.5 5.5-5.5-5.5 1.4-1.4L11 12.2V3zM4 18h16v2H4z'/%3E%3C/svg%3E");
    --m-close:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 10.6 5.3-5.3 1.4 1.4-5.3 5.3 5.3 5.3-1.4 1.4-5.3-5.3-5.3 5.3-1.4-1.4 5.3-5.3-5.3-5.3 1.4-1.4z'/%3E%3C/svg%3E");
    --m-map:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 4.5A2.5 2.5 0 1 0 12 11a2.5 2.5 0 0 0 0-4.5z'/%3E%3C/svg%3E");
    --m-doc:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zM8 13h8v2H8v-2zm0 4h8v2H8v-2z'/%3E%3C/svg%3E");

    --m-hosp:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14a2 2 0 0 1 2 2v16H3V5a2 2 0 0 1 2-2zm6 3v3H8v2h3v3h2v-3h3V9h-3V6h-2zm-2 11v4h2v-4H9zm4 0v4h2v-4h-2z'/%3E%3C/svg%3E");
    --m-groom:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 2 12 10.2 17.5 2H20l-6.7 10 1.6 2.4a3.8 3.8 0 1 1-1.6 1.2L12 13.7l-1.3 1.9a3.8 3.8 0 1 1-1.6-1.2L10.7 12 4 2h2.5zM7 17a1.8 1.8 0 1 0 0 3.6A1.8 1.8 0 0 0 7 17zm10 0a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z'/%3E%3C/svg%3E");
    --m-plane:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 15.5 13.5 11V5a1.5 1.5 0 0 0-3 0v6L3 15.5V17l7.5-2v4.2L8 21v1.2l4-.9 4 .9V21l-2.5-1.8V15l7.5 2v-1.5z'/%3E%3C/svg%3E");
    --m-box:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 6v12l9 4 9-4V6l-9-4zm0 2.2 6.3 2.8L12 9.8 5.7 7 12 4.2zM5 8.6l6 2.7v7.9l-6-2.7V8.6zm14 0v7.9l-6 2.7v-7.9l6-2.7z'/%3E%3C/svg%3E");
    --m-leaf:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3c.6 6.3-1.2 11-4.6 13.4-2.6 1.8-5.6 1.8-7.5.6l-2.5 2.5-1.4-1.4 2.5-2.5c-1.2-1.9-1.2-4.9.6-7.5C9.5 4.7 14 2.9 20 3zm-2.2 2.2c-4.2.2-7 1.7-8.6 4-1.1 1.6-1.3 3.4-.8 4.6l8.1-8.1 1.4 1.4-8.1 8.1c1.2.5 3 .3 4.6-.8 2.3-1.6 3.8-4.4 4-8.6l-.6-.6z'/%3E%3C/svg%3E");
    --m-home:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11h3v10h5v-6h4v6h5V11h3L12 3z'/%3E%3C/svg%3E");

    --m-clock:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm-1 3h2v5.4l3.5 2-1 1.7L11 13.6V7z'/%3E%3C/svg%3E");
    --m-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5.3v6.2c0 4.6 3.4 8.9 8 10.5 4.6-1.6 8-5.9 8-10.5V5.3L12 2zm-1.2 13.3-3.3-3.3 1.4-1.4 1.9 1.9 4.6-4.6 1.4 1.4-6 6z'/%3E%3C/svg%3E");
    --m-spray:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h5v2H9V2zM7 6h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm1 4v3h4v-3H8zm10-7h2v2h-2V3zm3 3h2v2h-2V6zm-3 3h2v2h-2V9zm3 3h2v2h-2v-2z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* 상단 바 + 카테고리 탭                                                 */
/* ------------------------------------------------------------------ */

.hd {
    position: sticky; top: 0; z-index: 120;
    background: rgba(255,255,255,.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(23,21,15,.08);
    transition: background-color .25s var(--ease);
}
/* 메뉴가 열리면 뒤가 비쳐 지저분해지지 않도록 불투명하게 */
body.nav-open .hd { background: rgba(255,255,255,.985); }
.hd-in { height: var(--hd); display: flex; align-items: center; gap: 8px; }
.hd-logo { display: flex; align-items: center; gap: 7px; flex: 0 1 auto; min-width: 0; min-height: 48px; padding-right: 4px; }
.hd-mark { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; }
.hd-name {
    font-size: var(--fs-15); font-weight: 800; letter-spacing: -.035em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-name em { font-style: normal; color: var(--brand-dark); }
.hd-sp { flex: 1 1 auto; }


.hd-cta {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 44px; padding: 0 14px; border-radius: 999px;
    background: var(--brand); color: var(--ink);
    font-size: var(--fs-12); font-weight: 700; white-space: nowrap;
}
.hd-cta:hover { background: var(--brand-hi); }
.hd-cta .ic { font-size: 13px; }

/* ------------------------------------------------------------------ */
/* 섹션 공통                                                            */
/* ------------------------------------------------------------------ */

.sec { padding: 28px 0 30px; scroll-margin-top: calc(var(--hd) + var(--tab)); }
/* 섹션 구분
   모바일에서는 실선 한 줄로는 잘 안 보여서 옅은 띠로 끊어 줍니다.
   데스크톱은 여백이 넓어 헤어라인으로 충분합니다. */
main .sec + .sec { border-top: 8px solid var(--paper-2); }
@media (min-width: 768px) {
    main .sec + .sec { border-top: 1px solid var(--line); }
}

.sec-head { margin-bottom: 12px; }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }

.eyebrow {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
    font-family: var(--en);
    font-size: var(--fs-11); font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--brand-dark);
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; flex: 0 0 auto; }

.sec-title {
    font-size: var(--t-sec); font-weight: 800; line-height: 1.24; letter-spacing: -.038em;
    text-wrap: balance; max-width: 20ch;
}
.sec-title em { font-style: normal; color: var(--brand-dark); }

.sec-desc { margin-top: 7px; font-size: var(--fs-13); line-height: 1.6; color: var(--ink-2); }
.sec-desc b { color: var(--ink); font-weight: 700; }

.more {
    display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
    min-height: 48px; padding: 0 2px;
    font-size: var(--fs-13); font-weight: 700; color: var(--ink-2);
}
.more .ic { font-size: 11px; }
.more:hover { color: var(--brand-dark); }

/* ------------------------------------------------------------------ */
/* 버튼                                                                */
/* ------------------------------------------------------------------ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 48px; padding: 13px 20px; border-radius: var(--r);
    font-size: var(--fs-15); font-weight: 800; line-height: 1.2; text-align: center;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn .ic { font-size: 16px; }
.btn-main  { background: var(--brand); color: var(--ink); }
.btn-main:hover { background: var(--brand-hi); }
.btn-naver { background: var(--naver); color: #fff; }
.btn-naver:hover { background: var(--naver-dark); }
.btn-line  { background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); }
.btn-line:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-ghost-d { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.26); }
.btn-ghost-d:hover { background: rgba(255,255,255,.18); }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 22px; }
.btn.is-done { background: var(--naver) !important; color: #fff !important; border-color: var(--naver) !important; }

/* ------------------------------------------------------------------ */
/* 히어로                                                              */
/* ------------------------------------------------------------------ */

.hero { position: relative; background: var(--dark); color: var(--on-dark); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .58; }
.hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,18,13,.42) 0%, rgba(20,18,13,.74) 52%, var(--dark) 100%);
}
.hero-in { position: relative; padding: 24px var(--pad) 22px; max-width: 1180px; margin: 0 auto; }


.hero-h1 {
    font-size: var(--t-hero); font-weight: 800;
    line-height: 1.14; letter-spacing: -.045em; margin-bottom: 9px;
    text-wrap: balance; max-width: 16ch;
}
.hero-h1 em { font-style: normal; color: var(--brand-hi); }
.hero-p { font-size: var(--fs-13); line-height: 1.55; color: rgba(255,255,255,.72); margin-bottom: 18px; }
.hero-p b { color: #fff; font-weight: 700; }

/* 숫자 줄 — 박스 없이 얇은 세로선으로만 나눕니다 */
.hero-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    margin-top: 22px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.14);
}
.hero-stats li { position: relative; padding: 0 4px; text-align: center; }
.hero-stats li + li::before {
    content: ''; position: absolute; left: 0; top: 3px; bottom: 3px;
    width: 1px; background: rgba(255,255,255,.13);
}
.hero-stats .ic { display: none; }
.hero-stats b {
    display: block; font-size: var(--fs-17); font-weight: 700;
    line-height: 1.2; letter-spacing: -.035em; color: #fff;
}
.hero-stats span { display: block; margin-top: 3px; font-size: var(--fs-11); color: rgba(255,255,255,.56); }

.hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ------------------------------------------------------------------ */
/* 가로 스크롤 레일                                                     */
/* ------------------------------------------------------------------ */

.rail {
    display: flex; gap: 8px;
    overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px;
    scroll-padding-left: var(--pad);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 auto; scroll-snap-align: start; }

/* ------------------------------------------------------------------ */
/* 사진 카드 — 탭하면 확대                                              */
/* ------------------------------------------------------------------ */

.shot {
    position: relative; display: block; width: 100%;
    border: 0; padding: 0; overflow: hidden;
    border-radius: var(--r-l); background: var(--paper-3); cursor: zoom-in;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.shot:hover img { transform: scale(1.04); }

/* 모바일에는 hover 가 없으므로 확대 표시를 항상 띄웁니다 */
.shot::after {
    content: ''; position: absolute; top: 7px; right: 7px;
    width: 24px; height: 24px; border-radius: 50%;
    background-color: rgba(20,18,13,.5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4.3 4.3-1.4 1.4-4.3-4.3A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11zM9.5 7h2v2.5H14v2h-2.5V14h-2v-2.5H7v-2h2.5V7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 13px;
    backdrop-filter: blur(4px);
    opacity: .8; transition: opacity .2s var(--ease);
}
.shot:hover::after, .shot:focus-visible::after { opacity: 1; }

.shot-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 20px 10px 8px; text-align: left;
    background: linear-gradient(180deg, transparent, rgba(20,18,13,.84));
    color: #fff;
}
.shot-cap b { display: block; font-size: var(--fs-12); font-weight: 700; letter-spacing: -.025em; }
.shot-cap span { display: block; margin-top: 1px; font-size: var(--fs-11); color: rgba(255,255,255,.7); }

/* 펫크닉 안내 포스터 — 글자를 읽어야 하므로 다른 사진보다 크게,
   자르지 않고 원본 비율 그대로 보여 줍니다.
   모바일에서는 다른 사진들과 같이 옆으로 넘겨 봅니다. */
.poster-grid {
    display: flex; gap: 8px;
    overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px;
    scroll-padding-left: var(--pad);
}
.poster-grid::-webkit-scrollbar { display: none; }
.poster-grid > * { flex: 0 0 auto; width: 76%; max-width: 300px; scroll-snap-align: start; }
.poster-grid .shot { aspect-ratio: auto; background: var(--paper-2); }
.poster-grid .shot img { height: auto; }
.poster-grid .shot:hover img { transform: none; }
/* 포스터에 이미 제목이 있어 겹치는 캡션은 감춥니다 (확대 화면에는 그대로 나옵니다) */
.poster-grid .shot-cap { display: none; }

@media (min-width: 768px) {
    .poster-grid {
        display: grid; grid-template-columns: repeat(2, 1fr);
        gap: 18px; max-width: 900px;
        overflow: visible; margin: 0; padding: 0; align-items: start;
    }
    .poster-grid > * { width: auto; max-width: none; }
}

/* 사진 카드는 종류에 상관없이 한 규격을 씁니다.
   다음 카드가 살짝 보이게 잡아 옆으로 넘길 수 있음을 알려 줍니다. */
.photo-card { width: 68%; max-width: 280px; }
.photo-card .shot { aspect-ratio: 4 / 3; }


/* ------------------------------------------------------------------ */
/* 선언 문구 — 소독 · 병균 두 곳이 같은 형태를 씁니다                    */
/*   왼쪽 세로 막대 하나로만 구분하고, 강조 줄만 크게 키웁니다.          */
/* ------------------------------------------------------------------ */

.claim { display: flex; gap: 15px; margin: 18px 0 0; }
.claim::before {
    content: ''; flex: 0 0 auto; width: 3px;
    background: var(--brand); border-radius: 2px;
}
.claim-body p { font-size: var(--fs-13); line-height: 1.6; color: var(--ink-2); }
.claim-body p + p { margin-top: 10px; }
.claim-body .lead {
    font-size: clamp(19px, 5vw, 26px); font-weight: 800;
    line-height: 1.38; letter-spacing: -.042em; color: var(--ink);
    text-wrap: balance;
}
.claim-body .lead em { font-style: normal; color: var(--brand-dark); }

.claim-warn::before { background: var(--danger); }
/* 경고 문구는 폭 제한만 풀어 한 줄로 떨어지게 합니다. 글자 크기는 위와 동일 */
.claim-warn .claim-body { max-width: none; }
.claim-warn .lead em { color: var(--danger-dark); }

/* 사진 카드는 종류에 상관없이 한 규격을 씁니다.
   다음 카드가 살짝 보이게 잡아 옆으로 넘길 수 있음을 알려 줍니다. */
.photo-card { width: 68%; max-width: 280px; }
.photo-card .shot { aspect-ratio: 4 / 3; }




/* ------------------------------------------------------------------ */
/* 병균 경고                                                            */
/* ------------------------------------------------------------------ */



/* ------------------------------------------------------------------ */
/* 서비스 카드                                                          */
/* ------------------------------------------------------------------ */

.cards {
    display: flex; gap: 8px;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px;
    scroll-padding-left: var(--pad);
}
.cards::-webkit-scrollbar { display: none; }
.cards > * { flex: 0 0 auto; width: 60%; max-width: 240px; scroll-snap-align: start; }
.card {
    display: flex; flex-direction: column;
    padding: 12px 11px 13px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
    transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }
.card-ic {
    width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 9px;
    background: var(--brand-soft); border-radius: 11px;
    color: var(--brand-dark); font-size: 23px;
}
.card-t { font-size: var(--fs-15); font-weight: 800; letter-spacing: -.035em; margin-bottom: 3px; }
.card-d { font-size: var(--fs-11); line-height: 1.55; color: var(--ink-2); }


/* ------------------------------------------------------------------ */
/* 후기 — 네이버는 별점 없는 분류라 후기 글 자체를 그대로 보여 줍니다     */
/* ------------------------------------------------------------------ */


.rv {
    display: flex; flex-direction: column;
    width: 76%; max-width: 310px; padding: 15px 16px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
}
.rv-txt {
    flex: 1 1 auto;
    font-size: var(--fs-12); line-height: 1.6; color: var(--ink); white-space: pre-line;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-by {
    margin-top: 12px;
    font-size: var(--fs-11); font-weight: 700; color: var(--ink-3);
}
.rv-by b { color: var(--ink-2); font-weight: 700; }

/* 후기 페이지 목록 */
.rv-list { display: grid; gap: 8px; }
.rv-item { padding: 15px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); }
.rv-item .rv-txt { -webkit-line-clamp: unset; display: block; overflow: visible; font-size: var(--fs-13); }
.rv-reply {
    margin-top: 11px; padding: 10px 12px;
    background: var(--paper-2); border-radius: var(--r);
    font-size: var(--fs-12); line-height: 1.6; color: var(--ink-2); white-space: pre-line;
}
.rv-reply b { display: block; margin-bottom: 2px; font-size: var(--fs-11); font-weight: 800; color: var(--brand-deep); }

/* ------------------------------------------------------------------ */
/* 훈련사                                                               */
/* ------------------------------------------------------------------ */

.trainer { padding: 15px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); }
.trainer-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.trainer-av {
    width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--dark); color: var(--brand-hi); border-radius: 50%;
    font-family: var(--en); font-size: var(--fs-15); font-weight: 600;
}
.trainer-n { font-size: var(--fs-15); font-weight: 800; letter-spacing: -.035em; }
.trainer-r { font-size: var(--fs-11); color: var(--ink-2); margin-top: 1px; }

.cert { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 11px; }
.cert li {
    padding: 4px 8px; background: var(--brand-soft); border-radius: 6px;
    font-size: var(--fs-11); font-weight: 700; color: var(--brand-deep); letter-spacing: -.025em;
}
.career { padding-top: 4px; border-top: 1px solid var(--line); }
.career li {
    display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
    padding: 10px 0; font-size: var(--fs-12); color: var(--ink-2);
}
.career li + li { border-top: 1px solid var(--line); }
.career .cy { font-family: var(--en); font-size: var(--fs-11); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.career.is-folded li:nth-child(n+5) { display: none; }
.career-more {
    display: block; width: 100%; min-height: 48px; margin-top: 12px; padding: 12px;
    background: var(--paper-2); border-radius: var(--r);
    font-size: var(--fs-12); font-weight: 700; color: var(--ink-2);
}
.career-more:hover { background: var(--paper-3); color: var(--ink); }

/* ------------------------------------------------------------------ */
/* 문의 · 푸터                                                          */
/* ------------------------------------------------------------------ */

.contact { display: grid; gap: 8px; }
.contact-item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 12px 13px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
    text-align: left; transition: border-color .15s var(--ease);
}
.contact-item:hover { border-color: var(--brand); }
.contact-ic {
    width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand-dark); border-radius: 11px; font-size: 21px;
}
.contact-ic.is-naver { background: #E7F9EE; color: var(--naver-dark); }
.contact-ic.is-kakao { background: #FEF3C3; color: #3C1E1E; }
.contact-b { flex: 1 1 auto; min-width: 0; }
.ct-k { display: block; font-size: var(--fs-11); font-weight: 700; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-v { display: block; font-size: var(--fs-15); font-weight: 800; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-item > .ic-arrow { font-size: 13px; color: var(--ink-3); }

.ft {
    padding: 26px 0 30px;
    background: var(--dark); color: var(--on-dark-2);
    text-align: center;
}

/* 네이버 지도 — 정보 줄 위에 따로 둡니다 */
.ft-map {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 48px; margin-bottom: 20px; padding: 10px 18px;
    background: var(--dark-3); border-radius: 999px;
    font-size: var(--fs-12); font-weight: 700; color: #fff;
}
.ft-map:hover { background: var(--line-dark); }
.ft-map .ic { font-size: 14px; color: var(--brand-hi); }

/* 사업장 정보 — 가운데 정렬 한 줄. 좁은 화면에서는 자연스럽게 넘어갑니다. */
.ft-line {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 4px 0;
    padding-top: 20px; border-top: 1px solid var(--line-dark);
    font-size: var(--fs-11); line-height: 1.7;
}
.ft-mark { width: 18px; height: 18px; border-radius: 5px; margin-right: 7px; }
.ft-line b { color: #fff; font-weight: 700; letter-spacing: -.02em; }
.ft-line span { display: inline-flex; align-items: center; }
/* 항목 사이 가운뎃점 */
.ft-line b ~ span::before,
.ft-line span + span::before {
    content: '·'; margin: 0 7px; color: var(--on-dark-3);
}
.ft-copy { margin-top: 10px; font-size: var(--fs-11); color: var(--on-dark-3); }

/* 세 버튼을 완전히 같은 크기로 나눕니다.
   min-width:0 이 없으면 글자 길이에 따라 폭이 달라집니다. */

/* ------------------------------------------------------------------ */
/* 전화 · 문자 — 영업점 선택 시트                                        */
/* ------------------------------------------------------------------ */

.sheet-back {
    position: fixed; inset: 0; z-index: 190;
    background: rgba(20,18,13,.52); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .22s var(--ease);
}
.sheet-back.is-on { opacity: 1; pointer-events: auto; }

.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    max-height: 88dvh; overflow-y: auto;
    padding: 6px 16px calc(16px + env(safe-area-inset-bottom));
    background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(102%); transition: transform .3s var(--ease);
}
.sheet.is-on { transform: none; }
.sheet-grip { width: 38px; height: 4px; margin: 6px auto 13px; background: var(--line-2); border-radius: 99px; }
.sheet-t { font-size: var(--fs-17); font-weight: 800; letter-spacing: -.035em; }
.sheet-d { margin: 4px 0 14px; font-size: var(--fs-12); color: var(--ink-2); line-height: 1.5; }

.branch { display: grid; gap: 8px; }
.branch-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 13px 15px;
    background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-l);
    text-align: left; transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.branch-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.branch-item.is-main { border-color: var(--brand); border-width: 2px; padding: 12px 14px; }
/* 오픈채팅 주소가 아직 없는 영업점 */
.branch-item.is-off { background: var(--paper-2); border-style: dashed; cursor: default; }
.branch-item.is-off:hover { border-color: var(--line-2); background: var(--paper-2); }
.branch-item.is-off .branch-tel { color: var(--ink-3); }
.branch-b { flex: 1 1 auto; min-width: 0; }

/* 윗줄 : 지점 이름 (작게) / 아랫줄 : 번호 (크게) */
.branch-n {
    display: flex; align-items: center; gap: 5px;
    font-size: var(--fs-11); font-weight: 700; color: var(--ink-3); letter-spacing: -.02em;
}
.branch-n .pill {
    padding: 1px 5px; border-radius: 3px;
    background: var(--brand); color: var(--ink);
    font-size: 9.5px; font-weight: 800; letter-spacing: 0;
}
.branch-tel {
    display: block; margin-top: 2px;
    font-size: var(--fs-17); font-weight: 800; color: var(--ink); letter-spacing: -.02em;
}
.branch-item > .ic-arrow { font-size: 13px; color: var(--ink-3); }

/* 데스크톱 안내 — 전화 걸기가 안 되는 환경 */
.sheet-note {
    display: none; align-items: center; gap: 7px;
    margin-bottom: 12px; padding: 10px 12px;
    background: var(--paper-2); border-radius: var(--r);
    font-size: var(--fs-11); line-height: 1.5; color: var(--ink-2);
}
.sheet-note .ic { font-size: 14px; color: var(--brand-dark); flex: 0 0 auto; }
.sheet-note b { color: var(--ink); font-weight: 800; }
body.is-desktop .sheet-note { display: flex; }
body.is-desktop .branch-item > .ic-arrow { display: none; }

/* ------------------------------------------------------------------ */
/* 사진 확대 (라이트박스)                                                */
/* ------------------------------------------------------------------ */

.lb {
    position: fixed; inset: 0; z-index: 250; display: none;
    background: rgba(8,7,5,.97); touch-action: none;
    -webkit-user-select: none; user-select: none;
}
.lb.is-on { display: block; }
body.lb-open { overflow: hidden; }

.lb-stage { position: absolute; inset: 0; overflow: hidden; }
.lb-img {
    position: absolute; top: 50%; left: 50%;
    max-width: 100vw; max-height: 100dvh;
    transform-origin: center center; will-change: transform; cursor: grab;
}
.lb-img.is-drag { cursor: grabbing; }

.lb-bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    background: linear-gradient(180deg, rgba(8,7,5,.8), transparent);
    color: #fff;
}
.lb-count { font-family: var(--en); font-size: var(--fs-12); font-weight: 500; letter-spacing: .08em; color: rgba(255,255,255,.75); }
.lb-sp { flex: 1 1 auto; }
.lb-btn {
    width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center;
    background: rgba(255,255,255,.13); border-radius: 50%; color: #fff; font-size: 19px;
}
.lb-btn:hover { background: rgba(255,255,255,.25); }

.lb-cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 24px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgba(8,7,5,.88));
    color: #fff; text-align: center;
}
.lb-cap b { display: block; font-size: var(--fs-13); font-weight: 700; letter-spacing: -.025em; }
.lb-cap span { display: block; margin-top: 2px; font-size: var(--fs-11); color: rgba(255,255,255,.62); }

.lb-nav {
    position: absolute; top: 50%; z-index: 2;
    width: 42px; height: 42px; margin-top: -21px;
    display: none; place-items: center;
    background: rgba(255,255,255,.13); border-radius: 50%; color: #fff; font-size: 16px;
}
.lb-nav:hover { background: rgba(255,255,255,.27); }
.lb-prev { left: 12px; transform: scaleX(-1); }
.lb-next { right: 12px; }

/* ------------------------------------------------------------------ */
/* 견적 요청 폼                                                         */
/* ------------------------------------------------------------------ */

.qfield { display: block; margin-bottom: 12px; }
/* 그리드 칸 안의 날짜·시간 입력이 칸보다 넓어져 넘치지 않게 합니다.
   그리드 자식은 기본값이 min-width:auto 라서 내용 최소폭에 밀립니다. */
.qrow-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qrow-2 > * { min-width: 0; }
.qlabel { display: block; margin-bottom: 5px; font-size: var(--fs-12); font-weight: 800; letter-spacing: -.025em; }
.qlabel em { font-style: normal; font-weight: 500; color: var(--ink-3); margin-left: 4px; }

.qform input[type="text"],
.qform input[type="date"],
.qform input[type="time"],
.qform textarea {
    width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 12px 13px;
    background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
    font: inherit; font-size: var(--fs-15); color: var(--ink);
}

/* 날짜·시간은 기기 기본 UI 라 폭이 제멋대로 잡힙니다. 직접 눌러 맞춥니다. */
.qform input[type="date"],
.qform input[type="time"] {
    -webkit-appearance: none; appearance: none;
    display: block; text-align: left;
}
.qform input[type="date"]::-webkit-date-and-time-value,
.qform input[type="time"]::-webkit-date-and-time-value { text-align: left; }
.qform input[type="date"]::-webkit-calendar-picker-indicator,
.qform input[type="time"]::-webkit-calendar-picker-indicator { margin-left: 0; opacity: .55; }
.qform input::placeholder, .qform textarea::placeholder { color: var(--ink-3); }
.qform input:focus, .qform textarea:focus { border-color: var(--brand); outline: none; }
.qform textarea { resize: vertical; line-height: 1.6; }

.qaddr { display: flex; gap: 6px; }
.qaddr input { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.qsearch {
    flex: 0 0 auto; min-height: 48px; padding: 0 15px;
    background: var(--ink); border-radius: var(--r);
    font-size: var(--fs-12); font-weight: 700; color: #fff; white-space: nowrap;
}
.qsearch:hover { background: var(--brand-dark); }
.qdetail { margin-top: 6px; }

/* 왕복 스위치 */
.qtrip {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 13px; margin-bottom: 12px;
    background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-l);
    cursor: pointer;
}
.qtrip.is-on { border-color: var(--brand); background: var(--brand-soft); }
.qtrip input { position: absolute; opacity: 0; width: 0; height: 0; font-size: 16px; }
.qtrip-box {
    width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--paper); border: 2px solid var(--line-2); border-radius: 7px;
    color: transparent; font-size: 13px;
    transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.qtrip.is-on .qtrip-box { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.qtrip-b { flex: 1 1 auto; }
.qtrip-t { display: block; font-size: var(--fs-13); font-weight: 800; letter-spacing: -.025em; }
.qtrip-d { display: block; margin-top: 1px; font-size: var(--fs-11); color: var(--ink-2); }

/* 복귀 정보 — 왕복을 켜야 나타납니다 */
.qreturn {
    display: none; padding: 13px 12px 1px; margin-bottom: 12px;
    background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r-l);
}
.qreturn.is-on { display: block; animation: slideDown .28s var(--ease); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.qreturn-hd {
    display: flex; align-items: center; gap: 6px; margin-bottom: 11px;
    font-size: var(--fs-12); font-weight: 800; color: var(--brand-deep);
}

.qty {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 12px; margin-bottom: 6px;
    background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
}
.qty.is-set { border-color: var(--brand); background: var(--brand-soft); }
.qty-k { flex: 1 1 auto; font-size: var(--fs-13); font-weight: 700; }
.qty-btn {
    width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--paper); border: 1px solid var(--line-2); border-radius: 50%;
    font-size: var(--fs-17); font-weight: 700; line-height: 1; color: var(--ink-2);
}
.qty-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.qty-v { min-width: 24px; text-align: center; font-family: var(--en); font-size: var(--fs-17); font-weight: 600; }
.qty-u { min-width: 30px; font-size: var(--fs-11); color: var(--ink-3); }
.qhint { margin-top: 5px; font-size: var(--fs-11); color: var(--ink-3); line-height: 1.5; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    min-height: 48px; padding: 8px 16px;
    background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px;
    font-size: var(--fs-12); font-weight: 700; color: var(--ink-2);
}
.chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip.is-on { background: var(--brand); border-color: var(--brand); color: var(--ink); }


.quote-actions { display: grid; gap: 8px; margin-top: 18px; }
.quote-actions[hidden] { display: none; }

/* 복사·다운로드를 마치면 그 자리에 나타납니다 */
#q-send { margin-top: 18px; }
#q-send[hidden] { display: none; }
.quote-guide {
    margin-top: 10px; padding: 10px 13px;
    background: var(--brand-soft); border-radius: var(--r);
    font-size: var(--fs-12); line-height: 1.6; color: var(--ink-2);
}
.quote-guide b { color: var(--brand-deep); }

/* ------------------------------------------------------------------ */
/* 견적서 보내기 — 복사·다운로드를 마친 뒤에 나타납니다                  */
/* ------------------------------------------------------------------ */

.sendbox {
    position: relative; z-index: 2;
    margin-top: 14px; padding: 16px 15px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: var(--r-l);
    animation: sendIn .32s var(--ease);
}
.sendbox[hidden] { display: none; }
/* 모바일은 하단 고정 바의 '견적 보내기' 로 접수하므로 이 영역은 감춥니다 */
@media (max-width: 767px) { .sendbox { display: none; } }
@keyframes sendIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.sendbox-t {
    display: flex; align-items: center; gap: 7px;
    font-size: var(--fs-15); font-weight: 800; color: var(--brand-deep);
}
.sendbox-t .ic { font-size: 17px; }
.sendbox-d { margin: 4px 0 14px; font-size: var(--fs-12); line-height: 1.55; color: var(--ink-2); }

.sendgroup + .sendgroup { margin-top: 8px; }
.sendhead {
    display: flex; align-items: center; gap: 9px;
    width: 100%; min-height: 52px; padding: 12px 14px;
    background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
    font-size: var(--fs-13); font-weight: 800; color: var(--ink); text-align: left;
    transition: border-color .15s var(--ease);
}
.sendhead:hover { border-color: var(--brand); }
.sendhead .ic-lead { font-size: 17px; color: var(--brand-dark); flex: 0 0 auto; }
.sendhead .sh-t { flex: 1 1 auto; }
.sendhead .ic-chev { font-size: 16px; color: var(--ink-3); transition: transform .25s var(--ease); }
.sendgroup.is-open .sendhead { border-color: var(--brand); background: var(--paper); border-radius: var(--r) var(--r) 0 0; }
.sendgroup.is-open .sendhead .ic-chev { transform: rotate(180deg); }

.sendlist { display: grid; gap: 6px; padding: 8px; background: var(--paper); border: 1px solid var(--brand); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
.sendlist[hidden] { display: none; }
.senditem {
    display: flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 9px 12px;
    background: var(--paper-2); border: 1px solid transparent; border-radius: 8px;
    text-align: left; transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.senditem:hover { background: var(--brand-soft); }
.senditem:hover { border-color: var(--brand); }
.senditem-b { flex: 1 1 auto; min-width: 0; }
.senditem-n { display: block; font-size: var(--fs-11); font-weight: 700; color: var(--ink-3); }
.senditem-v { display: block; margin-top: 1px; font-size: var(--fs-13); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.senditem > .ic-arrow { font-size: 12px; color: var(--ink-3); }
.senditem.is-off { background: transparent; border: 1px dashed var(--line-2); cursor: default; }
.senditem.is-off .senditem-v { color: var(--ink-3); }
.senditem.is-off:hover { background: transparent; }
.senditem .pill {
    padding: 2px 6px; border-radius: 4px;
    background: var(--line); color: var(--ink-3);
    font-size: 9.5px; font-weight: 800;
}

/* ------------------------------------------------------------------ */
/* 이용 절차                                                            */
/* ------------------------------------------------------------------ */

.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.steps li { display: grid; grid-template-columns: 26px 1fr; gap: 9px; align-items: baseline; padding: 11px 13px; background: var(--paper); }
.steps b { font-family: var(--en); font-size: var(--fs-13); font-weight: 500; color: var(--brand-dark); }
.steps .st { font-size: var(--fs-13); font-weight: 800; letter-spacing: -.025em; }
.steps .sd { grid-column: 2; font-size: var(--fs-11); color: var(--ink-2); line-height: 1.5; }

/* ------------------------------------------------------------------ */
/* 데스크톱 확장                                                        */
/* ------------------------------------------------------------------ */

@media (min-width: 768px) {
    .claim { gap: 20px; margin-top: 26px; }
    .claim-body { max-width: 760px; }
    :root { --hd: 60px; --fs-11: 12.5px; --fs-12: 13.5px; --fs-13: 14.5px; --fs-15: 16px; --fs-17: 19px; --fs-20: 23px; }
    :root { --pad: 24px; }

    .hd-mark { width: 30px; height: 30px; }
    .hd-cta { min-height: 44px; padding: 0 17px; font-size: var(--fs-13); }
    .tab { padding: 0 18px; }

    .sec { padding: 54px 0; }
        .sec-head { margin-bottom: 22px; }
    .sec-desc { max-width: 58em; }  /* ch 는 한글 폭과 안 맞아 em 을 씁니다 */

    .hero-in { padding: 88px 24px 74px; max-width: 760px; margin: 0 auto; text-align: center; }
    .hero-h1 { max-width: none; margin-left: auto; margin-right: auto; }
        .hero-h1 { margin-bottom: 14px; }
    .hero-p { margin-bottom: 30px; }
    .hero-stats { max-width: 460px; margin: 30px auto 0; padding-top: 20px; }
    .hero-cta { grid-template-columns: repeat(2, minmax(0, 180px)); justify-content: center; gap: 10px; }



    .rail { margin: 0; padding-left: 0; padding-right: 0; gap: 14px; }
    .photo-card { width: 290px; max-width: none; }
    .rv { width: 310px; }

    
    
    .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; overflow: visible; margin: 0; padding: 0; }
    .cards > * { width: auto; max-width: none; }
    .card { padding: 18px 17px; }
    .card-ic { width: 46px; height: 46px; font-size: 26px; margin-bottom: 12px; }



    .rv-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .rv-item { padding: 20px 22px; }

    .trainer { padding: 24px 26px; }

    /* 문의 수단 네 개를 한 줄에 놓습니다 */
    .contact { grid-template-columns: repeat(4, 1fr); }

    /* 버튼과 안내문은 위 입력란과 같은 폭을 씁니다 */
    .quote-actions { grid-template-columns: 1fr 1fr; }
    .steps { grid-template-columns: repeat(5, 1fr); }
    .steps li { grid-template-columns: 1fr; gap: 3px; padding: 15px; }
    .steps .sd { grid-column: 1; }

    .sheet {
        left: 50%; right: auto; bottom: auto; top: 50%;
        width: 410px; max-width: calc(100vw - 40px);
        transform: translate(-50%, -46%) scale(.97);
        border-radius: var(--r-xl); padding: 22px 24px 24px; opacity: 0;
        transition: transform .24s var(--ease), opacity .24s var(--ease);
    }
    .sheet.is-on { transform: translate(-50%, -50%); opacity: 1; }
    .sheet-grip { display: none; }

    .lb-nav { display: grid; }
    }

@media (min-width: 1024px) {
    :root { --t-hero: 62px; --t-sec: 36px; }
}

/* ------------------------------------------------------------------ */
/* 견적서 인쇄 (PDF 저장)                                                */
/* ------------------------------------------------------------------ */

.quote-sheet { display: none; }

@media print {
    body > *:not(.quote-sheet) { display: none !important; }
    html, body { height: auto !important; overflow: visible !important; background: #fff !important; padding: 0 !important; }
    body { font-size: 10.5pt; line-height: 1.6; color: #1B1913; }
    .quote-sheet { display: block !important; }

    /* 머리말 */
    .psheet-head {
        display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
        padding-bottom: 14px; border-bottom: 1.4pt solid #14120D;
    }
    .psheet-brand { font-size: 13pt; font-weight: 800; letter-spacing: -.02em; }
    .psheet-brand span { color: #B4780A; }
    .psheet-tag { margin-top: 4px; font-size: 8.5pt; color: #857F71; letter-spacing: .01em; }
    .psheet-head-r { text-align: right; white-space: nowrap; }
    .psheet-title { font-size: 21pt; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
    .psheet-date { margin-top: 7px; font-size: 9pt; color: #857F71; }

    /* 본문 — 세로줄 없이 가로 헤어라인만 씁니다 */
    .psheet-table { width: 100%; margin-top: 24px; }
    .psheet-table th,
    .psheet-table td {
        border: 0; border-bottom: .5pt solid #E4E0D8;
        padding: 9px 0; font-size: 10.5pt; line-height: 1.55;
        text-align: left; vertical-align: top;
    }
    .psheet-table th { width: 104px; padding-right: 16px; color: #8A8478; font-weight: 600; white-space: nowrap; }
    .psheet-table td { font-weight: 500; }

    /* 구간 제목 — 색 채운 막대 대신 작은 캡션과 굵은 줄 */
    .psheet-table tr.grp th {
        width: auto; padding: 24px 0 6px;
        border-bottom: 1pt solid #14120D;
        font-size: 8.5pt; font-weight: 800; letter-spacing: .14em;
        color: #B4780A; text-transform: uppercase;
    }
    .psheet-table tr.grp:first-child th { padding-top: 0; }

    /* 꼬리말 */
    .psheet-foot {
        margin-top: 28px; padding: 14px 16px;
        background: #FBF7EF; border-radius: 5px;
        font-size: 9pt; line-height: 1.75; color: #4A463D;
    }
    .psheet-foot p { font-weight: 600; }
    .psheet-contact {
        margin-top: 9px; padding-top: 9px;
        border-top: .5pt solid #EBE0C7;
        font-weight: 400 !important; color: #857F71;
    }

    @page { size: A4; margin: 18mm 16mm; }
}

/* ------------------------------------------------------------------ */
/* 등장 애니메이션 · 모션 최소화                                         */
/* ------------------------------------------------------------------ */

.rise { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.rise.is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .rise { opacity: 1; transform: none; }
    .card:hover, .shot:hover img { transform: none; }
}

/* ------------------------------------------------------------------ */
/* 레일 스와이프 — 데스크톱에서도 끌어서 넘길 수 있게                    */
/* ------------------------------------------------------------------ */

.rail-box { position: relative; }
.rail.is-grab { cursor: grab; }
.rail.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.rail.is-grabbing * { pointer-events: none; }

.rail-btn {
    position: absolute; top: 34%; z-index: 3;
    width: 44px; height: 44px; display: none; place-items: center;
    background: rgba(255,255,255,.96); border: 1px solid var(--line-2);
    border-radius: 50%; box-shadow: var(--shadow);
    color: var(--ink); font-size: 15px;
    transition: opacity .15s var(--ease), background-color .15s var(--ease);
}
.rail-btn:hover { background: #fff; border-color: var(--brand); color: var(--brand-dark); }
.rail-btn[disabled] { opacity: .3; pointer-events: none; }
.rail-prev { left: -12px; transform: scaleX(-1); }
.rail-next { right: -12px; }

@media (min-width: 768px) { .rail-btn { display: grid; } }


/* ------------------------------------------------------------------ */
/* 네비게이션                                                           */
/*   모바일 : 화면을 덮는 전체 시트 — 크게, 넉넉하게                     */
/*   데스크톱 : 헤더 안에 가로로 펼쳐지는 알약 목록                      */
/* ------------------------------------------------------------------ */

.nav-fold {
    width: 48px; height: 48px; flex: 0 0 auto;
    display: grid; place-items: center; margin-right: -8px;
    border-radius: 12px; color: var(--ink);
    transition: background-color .2s var(--ease);
}
.nav-fold:hover { background: rgba(23,21,15,.055); }
.nav-fold:active { background: rgba(23,21,15,.1); }

/* 두 줄이 X 로 접히는 메뉴 아이콘 */
.nav-burger { position: relative; display: block; width: 20px; height: 13px; }
.nav-burger i {
    position: absolute; left: 0; width: 20px; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: top .2s var(--ease), transform .36s cubic-bezier(.32,.72,0,1);
}
.nav-burger i:nth-child(1) { top: 0; }
.nav-burger i:nth-child(2) { top: 11px; }
body.nav-open .nav-burger i:nth-child(1) { top: 5.5px; transform: rotate(45deg); }
body.nav-open .nav-burger i:nth-child(2) { top: 5.5px; transform: rotate(-45deg); }

/* ── 모바일 : 헤더 아래로 떨어지는 간결한 드롭다운 ── */
.navpanel {
    position: fixed; left: 0; right: 0; top: var(--hd); z-index: 115;
    max-height: calc(100dvh - var(--hd)); overflow-y: auto; overscroll-behavior: contain;
    padding: 4px var(--pad) 12px;
    background: rgba(255,255,255,.985);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(23,21,15,.10);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s var(--ease), transform .26s var(--ease), visibility .22s;
}
body.nav-open .navpanel { opacity: 1; visibility: visible; transform: none; }

.navlist { display: flex; flex-direction: column; }
.navlist .tab {
    display: flex; align-items: center;
    min-height: 50px; padding: 8px 2px;
    font-size: var(--fs-15); font-weight: 600; letter-spacing: -.03em;
    color: var(--ink);
    opacity: 0; transform: translateY(-5px);
    transition: opacity .26s var(--ease), transform .26s var(--ease), color .15s var(--ease);
}
.navlist .tab.is-on { color: var(--brand-dark); font-weight: 700; }
.navlist .tab:active { opacity: .5; }

/* 하나씩 차례로 나타납니다 */
body.nav-open .navlist .tab { opacity: 1; transform: none; }
body.nav-open .navlist .tab:nth-child(1) { transition-delay: .02s; }
body.nav-open .navlist .tab:nth-child(2) { transition-delay: .05s; }
body.nav-open .navlist .tab:nth-child(3) { transition-delay: .08s; }
body.nav-open .navlist .tab:nth-child(4) { transition-delay: .11s; }
body.nav-open .navlist .tab:nth-child(5) { transition-delay: .14s; }
body.nav-open .navlist .tab:nth-child(6) { transition-delay: .17s; }
body.nav-open .navlist .tab:nth-child(7) { transition-delay: .20s; }

/* ── 데스크톱 : 헤더 바로 아래로 펼쳐지는 가로 목록 ── */
@media (min-width: 768px) {
    .navpanel {
        position: sticky; top: var(--hd); bottom: auto; z-index: 118;
        display: block; padding: 0;
        background: rgba(255,255,255,.93);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid transparent; box-shadow: none;
        overflow: hidden;
        opacity: 1; visibility: visible; transform: none;
        max-height: 0;
        transition: max-height .4s cubic-bezier(.32,.72,0,1), border-color .3s var(--ease);
    }
    body.nav-open .navpanel { max-height: 80px; border-bottom-color: rgba(23,21,15,.08); }

    .navlist {
        flex-direction: row; justify-content: center; gap: 4px;
        padding: 10px 24px 12px;
    }
    .navlist .tab {
        min-height: 44px; padding: 10px 16px; border-radius: 999px;
        font-size: var(--fs-13); font-weight: 500; letter-spacing: -.015em;
        opacity: 1; transform: none;
    }
    .navlist .tab::after { display: none; }
    .navlist .tab:hover { background: rgba(23,21,15,.05); }
    .navlist .tab.is-on { background: var(--brand-soft); color: var(--brand-deep); font-weight: 700; }
}

@media (prefers-reduced-motion: reduce) {
    .navpanel, .navlist .tab { transition: none; }
    .navlist .tab { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* 터치 피드백 — 모바일에는 hover 가 없으므로 :active 로 즉시 반응합니다  */
/* transform · opacity 만 써서 GPU 로 처리합니다.                        */
/* ------------------------------------------------------------------ */

.btn:active,
.hd-cta:active,
.chip:active,
.qsearch:active,
.career-more:active,
.rail-btn:active,
.lb-btn:active,
.qty-btn:active { transform: scale(.97); }

.card:active,
.contact-item:active,
.branch-item:active { transform: scale(.985); opacity: .9; }

.shot:active { opacity: .88; }
.navlist .tab:active { opacity: .6; }

.btn, .hd-cta, .chip, .qsearch, .career-more, .rail-btn, .lb-btn, .qty-btn,
.card, .contact-item, .branch-item, .shot, .navlist .tab {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}


/* ------------------------------------------------------------------ */
/* 주소 검색 레이어                                                     */
/* ------------------------------------------------------------------ */

.addr-back {
    position: fixed; inset: 0; z-index: 220;
    display: none; align-items: flex-end; justify-content: center;
    background: rgba(20,18,13,.55);
    backdrop-filter: blur(3px);
}
.addr-back.is-on { display: flex; }

.addr-modal {
    display: flex; flex-direction: column;
    width: 100%; max-width: 480px;
    height: 84dvh; max-height: 640px;
    background: var(--paper);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: addrUp .28s var(--ease);
}
@keyframes addrUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.addr-hd {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 10px 14px 18px;
    border-bottom: 1px solid var(--line);
}
.addr-t { font-size: var(--fs-15); font-weight: 800; letter-spacing: -.03em; }
.addr-x {
    width: 48px; height: 48px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 12px; color: var(--ink-2); font-size: 18px;
}
.addr-x:hover { background: var(--paper-2); color: var(--ink); }
.addr-box { flex: 1 1 auto; min-height: 0; }
.addr-box > div { width: 100% !important; height: 100% !important; }

@media (min-width: 768px) {
    .addr-back { align-items: center; }
    .addr-modal { border-radius: var(--r-xl); height: 620px; }
}

/* ------------------------------------------------------------------ */
/* 견적 요청 — 단계 카드                                                */
/* ------------------------------------------------------------------ */

.qstep {
    margin-bottom: 12px; padding: 16px 15px 15px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
}
.qstep-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.qstep-n {
    width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--ink); color: #fff; border-radius: 50%;
    font-family: var(--en); font-size: var(--fs-11); font-weight: 600; letter-spacing: 0;
}
.qstep-t { font-size: var(--fs-15); font-weight: 800; letter-spacing: -.03em; }
.qstep .qfield:last-child { margin-bottom: 0; }


/* 수량을 한 장으로 묶어 줄로 구분합니다 */
.qty-group { border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.qty-group .qty {
    margin: 0; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}
.qty-group .qty:last-child { border-bottom: 0; }
.qty-group .qty.is-set { background: var(--brand-soft); }

:root {
}

.germ .eyebrow { color: var(--danger-dark); }
.germ .sec-title em { color: var(--danger); }


/* ------------------------------------------------------------------ */
/* 아주 좁은 화면 (320px 대) — 상단 바가 넘치지 않게 조입니다            */
/* ------------------------------------------------------------------ */

@media (max-width: 360px) {
    :root { --pad: 16px; }
    .hd-in { gap: 6px; }
    .hd-name { font-size: var(--fs-13); }
    .hd-cta { padding: 0 11px; font-size: var(--fs-11); }
    .hd-cta .ic { font-size: 12px; }
    .nav-fold { width: 44px; }
}




/* ------------------------------------------------------------------ */
/* 선언 문구 — 좁은 데스크톱에서도 한 줄로 떨어지게 크기를 맞춥니다      */
/* 세 문구가 항상 같은 크기를 쓰도록 함께 조절합니다.                    */
/* ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 959px) {
    .claim-body .lead { font-size: 22px; }
}

/* 줄이 넘어갈 때 한 단어만 남지 않도록 고르게 나눕니다 */
.claim-body p { text-wrap: pretty; }


/* 좁은 데스크톱에서 문의 수단 네 개가 눌리지 않도록 조입니다 */
@media (min-width: 768px) and (max-width: 899px) {
    .contact { gap: 6px; }
    .contact-item { gap: 8px; padding: 11px 10px; }
    .contact-ic { width: 34px; height: 34px; font-size: 18px; border-radius: 9px; }
    .contact-item > .ic-arrow { display: none; }
}