/* v8 공통 — 머리글·펼침 메뉴·바닥글·배경 체계·하위 페이지
   레퍼런스: 티오더 [O] (서비스 펼침 판·하위 페이지 구성) · 태그히어 [T] (서비스 소개 펼침·하위 페이지·검정 바닥글) · 도도포인트 [D] (점주님 로그인·바닥글 정보 줄) */
:root{--bg-alt:#f5f6f8;--bg-tint:#fff6e9;--ft-bg:#111214}

/* ── 머리글: 글씨 17px [O][T] ── */
.hd{height:76px}
.hd .wrap{position:relative}
.gnb{gap:4px;font-size:17px;font-weight:600}
.gnb > a:not(.cta),.dd > button{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;border-radius:10px;font-size:17px;font-weight:600;color:inherit;transition:background .15s}
.gnb > a:not(.cta):hover,.dd:hover > button{background:rgba(255,255,255,.14)}
.hd.on .gnb > a:not(.cta):hover,.hd.on .dd:hover > button{background:#f2f3f5}
.dd > button svg{transition:transform .2s}
.dd:hover > button svg,.dd:focus-within > button svg{transform:rotate(180deg)}
.gnb .cta{height:44px;padding:0 22px;border-radius:12px;font-size:16px;font-weight:700;margin-left:10px}

/* ── 펼침 메뉴: 서비스 소개 [O] 큰 판(왼쪽 사진 칸 + 제목·설명 항목) ── */
.dd{position:static}
.dd-panel{position:absolute;top:70px;right:24px;width:700px;display:grid;grid-template-columns:200px 1fr;gap:24px;padding:24px;background:#fff;border:1px solid #e9ebee;border-radius:18px;box-shadow:0 18px 48px rgba(29,32,34,.12);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:none}
.dd-pic{display:block}
.dd-pic .pic{height:150px;border-radius:12px;background:#1d2022;overflow:hidden;display:flex;justify-content:center;padding-top:18px}
.dd-pic .pic img{width:118px;height:auto;border-radius:14px 14px 0 0;object-fit:cover;object-position:top}
.dd-pic span{display:block;margin-top:12px;font-size:15px;font-weight:600;line-height:22px;color:var(--sub)}
.dd-items{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;align-content:start}
.dd-items a{display:block;padding:14px 16px;border-radius:12px;transition:background .15s}
.dd-items a:hover{background:var(--bg-alt)}
.dd-items b{display:block;font-size:17px;font-weight:700;color:var(--ink);line-height:24px}
.dd-items small{display:block;margin-top:3px;font-size:14px;font-weight:500;color:var(--mute);line-height:20px}
.dd-items a.cur b{color:var(--accent-ink)}

/* 휴대폰·태블릿: 서랍 메뉴 안에서 펼침 */
@media (max-width:1024px){
  .gnb.open > a:not(.cta),.gnb.open .dd > button{width:100%;justify-content:space-between;height:auto;padding:16px 0;border-radius:0;border-bottom:1px solid var(--line);font-size:17px}
  .gnb.open > a:not(.cta):hover,.gnb.open .dd:hover > button{background:none}
  .gnb.open .dd-panel{position:static;display:none;width:auto;grid-template-columns:1fr;padding:6px 0 10px;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;border-radius:0}
  .gnb.open .dd.open .dd-panel{display:grid}
  .gnb.open .dd.open > button svg{transform:rotate(180deg)}
  .gnb.open .dd-pic{display:none}
  .gnb.open .dd-items{grid-template-columns:1fr}
  .gnb.open .dd-items a{padding:12px 14px;border:0}
  .gnb.open .cta{margin:16px 0 0}
}

/* ── 바닥글 [T] 검정 바탕 + [O] 사이트 맵·회사 정보 줄 ── */
.ft.ft8{background:var(--ft-bg);color:#9a9fa5;padding:76px 0 60px!important;font-size:14px;line-height:22px}
.f8-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.f8-brand .logo{color:#fff}
.f8-brand p{margin-top:16px;font-size:15px;color:#9a9fa5}
.f8-map{display:flex;gap:88px}
.f8-map div{display:flex;flex-direction:column;gap:12px;min-width:110px}
.f8-map b{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px}
.f8-map a{font-size:15px;color:#9a9fa5;transition:color .15s}
.f8-map a:hover{color:#fff}
.f8-co{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:72px}
.f8-name{font-size:17px;font-weight:700;color:#fff}
.f8-pol{display:flex;gap:24px}
.f8-pol a{font-size:14px;color:#b8bcc1}
.f8-pol strong{color:#fff;font-weight:700}
.f8-info{display:flex;flex-wrap:wrap;row-gap:6px;margin-top:16px;font-size:14px}
.f8-info div{display:flex;gap:8px;align-items:center}
.f8-info div:not(:last-child)::after{content:"";width:1px;height:12px;background:#3a3d42;margin:0 16px}
.f8-info dt{color:#6f747b}
.f8-info dd{color:#a8adb3}
.f8-info a{color:#a8adb3}
.f8-copy{margin-top:22px;font-size:13px;color:#6f747b}
@media (max-width:768px){
  .ft.ft8{padding:56px 0 44px!important}
  .f8-map{gap:40px}
  .f8-co{margin-top:48px}
  .f8-info{flex-direction:column}
  .f8-info div::after{display:none}
}

/* ── 메인 배경 체계: 흰색 · 연회색 하나 · 앰버 하나 · 어두운 사진 띠 ──
   첫 화면(사진) → 서비스(흰색) → 숫자(연회색) → 짠도장(앰버) → 업종(흰색) → 짠 매장(사진) → 질문(연회색) → 상담 띠(앰버) → 바닥글(검정) */
#service.svc-dark{background:#fff}
#facts{background:var(--bg-alt)}
#faq{background:var(--bg-alt)}
#faq .qa{background:#fff}

/* ── 하위 페이지 [O][T] ── */
.pv-hero{padding:150px 0 0;background:linear-gradient(180deg,var(--bg-tint) 0%,#fff 70%);text-align:center;overflow:hidden}
.pv-badge{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:700}
.pv-hero h1{margin-top:20px;font-size:50px;line-height:66px;font-weight:800;letter-spacing:-1.5px;color:var(--ink)}
.pv-hero .lead{margin-top:16px;font-size:19px;color:var(--sub)}
.pv-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.pv-ghost{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:17px;font-weight:600}
.pv-ghost:hover{border-color:var(--ink)}
.pv-stage{display:flex;justify-content:center;align-items:flex-start;gap:28px;height:470px;margin-top:64px;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.pv-note{max-width:680px;margin:8px auto 0;padding:18px 24px;border-radius:14px;background:var(--bg-alt);font-size:15px;color:var(--mute)}
.pv-hero .pv-note{margin-bottom:110px}

/* 휴대폰 틀: 실제 화면 캡처 · 실제 손님 화면(시연) */
.ph{flex:none;width:260px;border:10px solid #1d2022;border-radius:40px;background:#fff;overflow:hidden;box-shadow:0 30px 60px rgba(29,32,34,.16)}
.ph img{width:100%;height:auto}
.ph.side{width:224px;margin-top:64px}
.ph.ph-live{height:520px}
.ph.ph-live iframe{display:block;width:390px;height:812px;border:0;transform:scale(.6154);transform-origin:0 0;pointer-events:none}
.ph.pcw{width:620px;border-width:10px;border-radius:18px}

.pv-sec{padding:120px 0}
.pv-sec.alt{background:var(--bg-alt)}
.pv-hd h2{font-size:40px;line-height:54px;font-weight:800;letter-spacing:-1.2px;color:var(--ink)}
.pv-hd p{margin-top:12px;font-size:18px;color:var(--mute)}
.pv-hd.center{text-align:center}

/* 이유 줄: 글 + 회색 그림 칸 번갈아 [O] */
.pv-row{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center;margin-top:96px}
.pv-row.rev .pv-tx{order:2}
.pv-tx .tag{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--accent-ink)}
.pv-tx .tag svg{flex:none}
.pv-tx h3{margin-top:14px;font-size:32px;line-height:44px;font-weight:800;letter-spacing:-.8px;color:var(--ink)}
.pv-tx p{margin-top:14px;font-size:17px;line-height:1.7;color:var(--sub)}
.pv-tx .more{margin-top:24px}
.pv-box{position:relative;height:440px;border-radius:28px;background:var(--bg-alt);overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding-top:48px}
.alt .pv-box{background:#fff}
.pv-box .ph{width:250px;box-shadow:0 24px 48px rgba(29,32,34,.14)}
.pv-box.photo{padding:0}
.pv-box.photo img{width:100%;height:100%;object-fit:cover}
.pv-box.wide{padding:48px 0 0 48px;justify-content:flex-start}

/* 이유 카드 3장 [T] */
.pv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.pv-card{display:flex;flex-direction:column;padding:32px 28px 0;border-radius:24px;background:#fff;overflow:hidden}
.pv-card b{font-size:21px;line-height:30px;font-weight:800;color:var(--ink)}
.pv-card p{margin-top:10px;font-size:15px;line-height:1.65;color:var(--sub)}
.pv-card .peek{margin-top:auto;padding-top:28px;height:230px;display:flex;justify-content:center;overflow:hidden}
.pv-card .peek img{width:190px;height:auto;align-self:flex-start;border:8px solid #1d2022;border-bottom:0;border-radius:26px 26px 0 0}
.pv-card .big{margin:auto 0 32px;padding-top:28px;font-size:56px;line-height:1;font-weight:800;letter-spacing:-2px;color:var(--ink)}
.pv-card .big small{font-size:24px;margin-left:4px;letter-spacing:0}

/* 비교 두 장: 흰 카드 vs 검정 카드 [T] */
.pv-vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.vs{padding:40px 36px;border-radius:24px;background:var(--bg-alt)}
.alt .vs{background:#fff}
.vs.ours{background:#111214;color:#fff}
.vs .lb{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;background:#e9ebee;font-size:14px;font-weight:700;color:var(--sub)}
.vs.ours .lb{background:var(--accent);color:var(--on-accent)}
.vs h3{margin-top:18px;font-size:27px;line-height:38px;font-weight:800;letter-spacing:-.6px;color:var(--ink)}
.vs.ours h3{color:#fff}
.vs ul{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:14px}
.vs li{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--body)}
.vs.ours li{color:#e4e6e8}
.vs li svg{flex:none}

/* 사용 방법 3단계 [O] */
.pv-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.pv-steps h4{font-size:20px;line-height:28px;font-weight:800;color:var(--ink)}
.pv-steps p{margin-top:8px;min-height:50px;font-size:15px;line-height:1.65;color:var(--sub)}
.pv-steps .pv-box{height:300px;margin-top:20px;padding-top:32px;border-radius:22px}
.pv-steps .pv-box .ph{width:200px}
.pv-cta{display:flex;justify-content:center;margin-top:56px}

/* 자주 묻는 질문 + 홈으로 돌아가기 [T] */
.pv-faq .faq{margin-top:40px}
.pv-back{display:flex;justify-content:center;margin-top:72px}
.pv-back a{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:100px;background:var(--bg-alt);font-size:15px;font-weight:600;color:var(--sub)}
.alt .pv-back a{background:#fff}
.pv-back a:hover{color:var(--ink)}

@media (max-width:1024px){
  .pv-row{grid-template-columns:1fr;gap:32px;margin-top:72px}
  .pv-row.rev .pv-tx{order:0}
  .pv-cards,.pv-steps{grid-template-columns:1fr}
  .pv-vs{grid-template-columns:1fr}
  .ph.pcw{width:92%}
}
@media (max-width:768px){
  .pv-hero{padding-top:112px}
  .pv-hero h1{font-size:31px;line-height:42px;letter-spacing:-1px}
  .pv-hero .lead{font-size:16px}
  .pv-stage{height:400px;gap:12px;margin-top:44px}
  .pv-stage .ph.side{display:none}
  .pv-hero .pv-note{margin-bottom:72px}
  .pv-sec{padding:80px 0}
  .pv-hd h2{font-size:28px;line-height:39px}
  .pv-hd p{font-size:16px}
  .pv-tx h3{font-size:24px;line-height:34px}
  .pv-box{height:360px}
  .vs{padding:30px 24px}
  .vs h3{font-size:22px;line-height:31px}
}

/* 메인 서비스 카드 3장 같은 색(가운데만 갈색이던 것 통일) */
#service .tall a,#service .tall a:nth-child(2){background:#1b1d20}

/* ── 글씨 체계(레퍼런스 실측 기준) ──
   태그히어: 페이지 제목 48/700 · 구획 제목 40/700 · 카드 제목 22~28/700 · 설명 16~18/500
   티오더: 제목 28~44/700(가장 큰 제목만 800) · 설명 18~22/500 · 메뉴 15/500
   → 짠커넥트: 로고만 800, 제목 700, 작은 제목·단추·꼬리표 600, 설명 500, 긴 답변 400 */
/* 메뉴 */
.gnb > a:not(.cta),.dd > button{font-weight:500}
.dd-items b{font-size:16px;font-weight:600}
.gnb .cta{font-weight:600}
/* 꼬리표: 모든 구획 같은 크기·굵기 */
.eye,.tall a .t-eye{font-size:16px!important;font-weight:600!important;letter-spacing:0}
.p-eye,.pv-badge{height:32px;padding:0 13px;border-radius:8px;font-size:14px;font-weight:600}
.pv-tx .tag{font-size:16px;font-weight:600}
/* 첫 화면 제목 */
.s-txt h2{font-weight:700!important;letter-spacing:-1.2px}
.pv-hero h1{font-size:48px;line-height:64px;font-weight:700;letter-spacing:-1.4px}
.pv-hero .lead{font-size:19px;font-weight:500}
/* 구획 제목: 메인·하위 페이지 모두 40/54 · 700 (짠도장 구획 52/800 → 통일) */
.c-title h2,.facts h2,.biz-hd h2,.faq-hd,.st-text h2,.band h2,.pv-hd h2{font-size:40px!important;line-height:54px!important;font-weight:700!important;letter-spacing:-1.2px!important}
.c-title p,.pv-hd p,.band p{font-size:18px!important;font-weight:500}
/* 카드·줄 제목 */
.tall a h3{font-size:24px;line-height:34px;font-weight:700}
.pv-tx h3{font-size:30px;line-height:42px;font-weight:700;letter-spacing:-.8px}
.pv-card b{font-size:22px;line-height:32px;font-weight:700}
.vs h3{font-size:26px;line-height:36px;font-weight:700}
.pv-steps h4{font-size:20px;font-weight:700}
.st-text li strong{font-size:19px!important;font-weight:600!important}
.st-text li b{font-size:17px!important;font-weight:600!important}
.facts dt{font-size:17px;font-weight:600}
/* 숫자 */
.pv-card .big{font-size:48px;font-weight:700;letter-spacing:-1.5px}
.pv-card .big small{font-size:22px;font-weight:600}
/* 설명 글 */
.tall a p,.pv-tx p,.pv-card p,.pv-steps p,.facts p,.st-text li span,.biz p{font-weight:500}
.vs li{font-weight:500}
.vs .lb{font-weight:600}
/* 단추·링크 */
.more,.st-more,.tall a .t-more,.cta-strip .cta-btn,.s-ask .pill{font-weight:600!important}
.cta-strip h2{font-size:22px!important;font-weight:700!important}
.s-ask b{font-size:19px!important;font-weight:700!important}
.qa button{font-size:17px!important;font-weight:500}
/* 바닥글 */
.f8-map b,.f8-name{font-weight:600}
@media (max-width:768px){
  .c-title h2,.facts h2,.biz-hd h2,.faq-hd,.st-text h2,.band h2,.pv-hd h2{font-size:28px!important;line-height:39px!important}
  .pv-hero h1{font-size:31px;line-height:42px}
  .pv-tx h3{font-size:24px;line-height:34px}
  .c-title p,.pv-hd p,.band p{font-size:16px!important}
}

/* 사진 칸은 꽉 채움 · 회색 구획 안 질문 칸은 흰색 */
.pv-steps .pv-box.photo{padding:0}
.alt .qa{background:#fff!important}

/* 펼침 메뉴 그림 바뀜 · 올린 항목 바탕 표시 */
.dd-pic .pic img{transition:opacity .12s}
.dd-pic .pic img.sw{opacity:0}
.dd-items a.on{background:var(--bg-alt)}
/* 바닥글 높이 줄임(여백 과다 지적) */
.ft.ft8{padding:48px 0 36px!important}
.f8-co{margin-top:36px}
.f8-copy{margin-top:14px}
@media (max-width:768px){.ft.ft8{padding:40px 0 32px!important}.f8-co{margin-top:28px}}

/* ── 자주 묻는 질문 페이지 [T] 태그히어 질문 페이지: 가운데 제목·검색 / 왼쪽 분류·도움 칸 / 오른쪽 한 줄 목록 ── */
.fq-hero{padding:150px 0 56px;background:linear-gradient(180deg,var(--bg-tint) 0%,#fff 100%);text-align:center}
.fq-hero h1{font-size:48px;line-height:64px;font-weight:700;letter-spacing:-1.4px;color:var(--ink)}
.fq-search{display:flex;align-items:center;gap:12px;max-width:560px;height:60px;margin:36px auto 0;padding:0 24px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.fq-search:focus-within{border-color:var(--ink)}
.fq-search input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:17px;color:var(--ink)}
.fq-search input::placeholder{color:#a3a7ad}
.fq-body{padding:24px 0 120px}
.fq-body .wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
.fq-side{position:sticky;top:100px}
.fq-cats{display:flex;flex-direction:column;gap:4px}
.fq-cats button{height:48px;padding:0 16px;border-radius:10px;text-align:left;font-size:17px;font-weight:500;color:var(--sub)}
.fq-cats button:hover{color:var(--ink);background:var(--bg-alt)}
.fq-cats button.on{background:var(--ink);color:#fff;font-weight:600}
.fq-help{margin-top:40px}
.fq-help > b{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:12px}
.fq-help a{display:block;padding:18px 18px;border-radius:14px;background:var(--bg-alt);margin-top:8px}
.fq-help a:hover{background:#eceef1}
.fq-help strong{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.fq-help span{display:block;margin-top:4px;font-size:13px;color:var(--mute)}
.fq{border-bottom:1px solid #eceef0}
.fq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 8px;text-align:left;font-size:18px;font-weight:500;line-height:1.5;color:var(--ink)}
.fq button svg{flex:none;color:#a3a7ad;transition:transform .25s}
.fq.open button svg{transform:rotate(180deg)}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.fq-a > p{overflow:hidden;padding:0 8px;font-size:16px;line-height:1.75;color:var(--sub)}
.fq.open .fq-a{grid-template-rows:1fr}
.fq.open .fq-a > p{padding-bottom:26px}
.fq-empty{padding:48px 8px;color:var(--mute);font-size:16px}
@media (max-width:1024px){
  .fq-body .wrap{grid-template-columns:1fr;gap:20px}
  .fq-side{position:static}
  .fq-cats{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none}
  .fq-cats button{flex:none;height:40px;font-size:15px;border-radius:100px;background:var(--bg-alt)}
  .fq-help{display:none}
}
@media (max-width:768px){
  .fq-hero{padding:112px 0 36px}
  .fq-hero h1{font-size:31px;line-height:42px}
  .fq-search{height:52px;margin-top:24px}
  .fq button{font-size:16px;padding:20px 4px}
  .fq-body{padding-bottom:80px}
}

/* 지금 보는 페이지 메뉴 */
.hd.on .gnb > a.cur,.hd.on .dd > button.cur{background:#f2f3f5}

/* 펼침 메뉴 왼쪽 그림 가독성: 핵심 부분만 자른 2배 해상도 그림을 크게(118px → 176px) */
.dd-pic .pic{height:152px;padding:16px 12px 0;background:#1d2022}
.dd-pic .pic img{width:176px;height:138px;border-radius:12px 12px 0 0;object-fit:cover;object-position:top left;image-rendering:auto}

/* 첫 화면 배경: 흐림·어둡게는 사진 파일에 미리 입힘(실시간 흐림 효과가 넘길 때 끊김 원인) */
.story .bgi{filter:none!important}

/* 펼침 메뉴 그림: 휴대폰+알림 카드로 미리 만든 그림을 칸에 꽉 채움(티오더 펼침 판 방식) */
.dd-pic .pic{height:150px;padding:0;background:#17191b}
.dd-pic .pic img{width:100%;height:100%;border-radius:0;object-fit:cover}

/* 질문 페이지: 도움 칸 두 개 같은 크기 · 목록은 최소 왼쪽 칸 끝까지 */
.fq-help a{display:flex;flex-direction:column;justify-content:center;height:76px;padding:0 18px}
.fq-help span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fq-body .wrap{align-items:stretch}
.fq-side{align-self:start}

/* 첫 화면 배경: 긴 띠(화면 3배) 대신 사진 2장이 각자 움직임 · 세 번째 사본·짠패드 사본 안 씀 */
.story .pan{width:100%!important;transform:none!important}
.story .bgi{left:0!important;width:100%!important;will-change:transform}
.story .bgi:nth-child(3),.story .w-pad.copy{display:none!important}
/* 첫 화면 문구 조금 크게(티오더 첫 화면 52px 기준) */
.story .s-txt h2{font-size:52px!important;line-height:66px!important;letter-spacing:-1.4px}
.story .s-txt .sub{font-size:20px!important}
@media (max-width:900px){.story .s-txt h2{font-size:30px!important;line-height:40px!important}.story .s-txt .sub{font-size:15px!important}}
/* 제품 페이지 질문: 한 줄로(질문 페이지·티오더와 같게) */
.pv-faq .faq{grid-template-columns:1fr!important;max-width:880px;margin-left:auto;margin-right:auto}
.pv-faq .faq > div + div{margin-top:2px}

/* 첫 화면 문구 칸 폭: 키운 제목이 두 줄에 들어가게 */
@media (min-width:901px){.story .s-txt{max-width:560px!important}}

/* 로고: 심볼+글자 가로형(벡터) · 어두운 첫 화면에서는 흰 판, 흰 머리글에서는 사이트 색 판 */
.hd .logo{display:flex;align-items:center}
.hd .logo img{display:block;height:36px;width:auto}
.hd .logo .lg-c{display:none}
.hd.on .logo .lg-c{display:block}
.hd.on .logo .lg-w{display:none}
.f8-brand .logo img{display:block;height:38px;width:auto}
@media (max-width:768px){.hd .logo img{height:30px}}

/* 짠패드 인쇄 도안: 전부 가운데 정렬 · 새 로고 심볼 · 안내 문구 최소 */
.print{justify-content:flex-start;padding:24px 18px 16px!important}
.print .lg-sym{width:58px;height:auto}
.print .nfc{margin-top:22px!important}
.print .msg{margin-top:16px!important;font-size:16px!important;font-weight:700!important;text-align:center}
.print .qr{margin-top:auto!important;align-self:center!important;border-top:0!important;padding-top:0!important;display:block!important}
.print .qr img{width:52px!important;height:52px!important}
.print .brand{margin-top:8px;font-size:11px;font-weight:600;color:var(--mute);letter-spacing:.5px}

/* 휴대폰: 실제 아이폰처럼 상태 표시줄(시간·신호·와이파이·배터리)+카메라 홈 — 화면 위에 덮지 않고 그 아래로 화면을 내림 */
.ph{display:flex;flex-direction:column;border-radius:42px}
.ph::before{content:"";flex:none;display:block;aspect-ratio:390/48;width:100%;background:#fff url(status_island.svg) center top/100% auto no-repeat}
.ph.pcw{border-radius:18px}
.ph.pcw::before{display:none}
.ph.ph-live{height:auto}
.ph.ph-live iframe{flex:none}
/* 첫 화면 휴대폰(실제 손님 화면): 시간 글자 대신 상태 표시줄 그림 */
.s-phone .lv::before{content:""!important;left:0!important;right:0!important;top:0!important;height:28px;background:url(status.svg) center top/100% auto no-repeat;font-size:0}

/* 휴대폰 그림: 실제 아이폰 모양(상태 표시줄·카메라 홈·옆 버튼)을 미리 그린 그림 — 사이트에서 기울이거나 테두리를 그리지 않아 계단 현상 없음 */
.tall a img{transform:translateX(-50%)!important;width:50%!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 22px 36px rgba(0,0,0,.45))}
.tall a:hover img{transform:translateX(-50%) translateY(-12px)!important}
.st-art img{border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;width:340px!important;filter:drop-shadow(0 30px 46px rgba(0,0,0,.22))}
.st-art .s1{left:2%!important;top:30px!important}
.st-art .s2{right:0!important;top:110px!important}
@media (max-width:1024px){.st-art img{width:210px!important}}
.ph.mk{display:block;border:0;background:none;border-radius:0;box-shadow:none;overflow:visible}
.ph.mk::before{display:none}
.ph.mk img{filter:drop-shadow(0 22px 34px rgba(29,32,34,.16))}
.pv-box .ph.mk{box-shadow:none}
.pv-card .peek img{border:0!important;border-radius:0!important;width:210px!important}

/* 숫자 줄 4칸: 앱 설치 0 · 월 이용료 0원 · 장비 구입 초기 1회 · 유지보수 0원 */
.facts dl.f4{grid-template-columns:repeat(4,1fr)!important;gap:24px}
.facts dd small.pre,.pv-card .big small.pre{font-size:20px;margin:0 6px 0 0;color:var(--sub)}
.pv-cards.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.facts dl.f4{grid-template-columns:1fr 1fr!important}.pv-cards.c4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pv-cards.c4{grid-template-columns:1fr}}

/* 짠도장: 그린 도장 대신 실물 도장 사진(배경 지움) — 자리(130×214)와 닿는 위치(바닥)는 그대로 */
.w-stamp.real{height:214px;filter:drop-shadow(0 30px 24px rgba(0,0,0,.5))}
.w-stamp.real img{position:absolute;left:50%;bottom:0;height:300px;width:auto;transform:translateX(-50%)}

/* 짠패드: 그린 거치대 대신 실물 카드 거치대 사진에 짠패드 도안을 입힌 그림 */
.w-pad.real{width:250px;height:354px}
.w-pad.real > :not(.pad-img){display:none!important}
.w-pad.real .pad-img{position:absolute;left:0;bottom:0;width:250px;height:auto;filter:drop-shadow(-18px 24px 22px rgba(0,0,0,.45))}

/* 상담 신청 페이지 왼쪽 안내: 이름표(회색)와 내용(진하게)을 한 줄씩 나란히 — 가독성 */
.ap-text h1{font-size:44px!important;line-height:58px!important;font-weight:700!important;letter-spacing:-1.2px}
.ap-text > p{font-size:18px!important;font-weight:500;color:var(--sub)}
.ap-info{margin-top:44px;border-top:1px solid #e6e8eb}
.ap-info div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding:18px 2px;border-bottom:1px solid #eceef0}
.ap-info dt{font-size:15px;font-weight:600;color:var(--mute)}
.ap-info dd{font-size:16px;font-weight:500;line-height:1.6;color:var(--ink)}
.ap-info a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ap-form .hint{font-size:13px;font-weight:500;color:var(--mute)}
@media (max-width:900px){.ap-text h1{font-size:30px!important;line-height:41px!important}.ap-info div{grid-template-columns:88px minmax(0,1fr)}}

/* 짠 매장 구획: 가게 앞 유리창 사진 + 에폭시 둥근 사각 「짠커넥트 가맹점」 스티커 */
.band.store-band{background:#2a2c2e url(store_band.jpg) center 55%/cover no-repeat!important}
.sb-sticker{position:absolute;right:max(32px,calc(50% - 560px));top:50%;z-index:2;transform:translateY(-50%) perspective(900px) rotateY(-12deg) rotate(-3deg)}
.sb-sticker img{display:block;width:200px;height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
@media (max-width:768px){.sb-sticker{right:16px;top:auto;bottom:16px;transform:none}.sb-sticker img{width:96px}}

/* 상담 양식: 필수 표시(*)를 칸 이름 바로 옆에 */
.ap-form label:not(.ck){display:block}
.ap-form label:not(.ck) > input,.ap-form label:not(.ck) > select,.ap-form label:not(.ck) > textarea{display:block;width:100%;margin-top:8px}
.ap-form label:not(.ck) > .hint{display:block;margin-top:6px}
.ap-form label i{margin-left:2px}