/* 동그람 펫숍 — HOW: dogshop-france.com
   레퍼런스에서 유지: 얇은 색 띠 + 흰 헤더(왼쪽 워드마크 · 가운데 내비 · 현재 항목은 알약 · 오른쪽 아이콘) ·
   밝은 색 지면 위 왼쪽 정렬 굵은 둥근 산세리프 두 줄 제목(한 구절만 강조) · 본문 두 단락 · 알약 버튼 2개 ·
   오른쪽에 강아지 사진이 얹힌 지면 · 곡선 경계로 이어지는 어두운 띠(가운데 굵은 제목 + 강점 카드 3) ·
   그 아래 '설명 + 버튼 → 용품 줄' 이 두 번 되풀이되는 순서 · 밝고 명랑한 성격.
   바꾼 것: 색(분홍 352° → 라임 79°) · 손그림 낙서와 손글씨 낱말 → 둥근 사진 묶음과 알약 딱지 ·
   물결 경계 → 부채꼴 경계 · 그림자 얹은 흰 알약 → 채운 알약 + 테두리 알약 · 가로 캐러셀 → 격자. */
:root{
  --bg:#ffffff; --cream:#fae3b0; --cream-2:#fdf3dc; --cream-3:#f6ecd4;
  --lime:#8fb833; --lime-d:#6b8f22; --lime-w:#eef5dc;
  --dark:#2f2a21; --dark-2:#403828; --ink:#2f2a21; --muted:#6f675b; --line:#e8e0cf;
  --gold:#e0a32b;
  --dsp:"Baloo Bhaina 2","Pretendard Variable",sans-serif;
  --ko:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  --gut:clamp(16px,3vw,44px); --max:1300px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.75 var(--ko);letter-spacing:-.012em;word-break:keep-all;overflow-wrap:break-word;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:0;z-index:2000;background:var(--lime);color:var(--dark);padding:10px 14px}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ---------- 조판 ---------- */
.en-h{font:800 clamp(28px,3.3vw,46px)/1.12 var(--dsp);letter-spacing:-.005em;color:var(--dark)}
.ko-h{margin-top:8px;font:700 clamp(17px,1.6vw,21px)/1.45 var(--ko);color:var(--lime-d)}
.lead{margin-top:16px;color:var(--muted);font-size:16px;max-width:54ch}
.btn{display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 26px;border-radius:999px;background:var(--lime);color:var(--dark);font:700 16px/1 var(--dsp);text-decoration:none;transition:background .2s,transform .2s}
.btn small{font:600 13px/1 var(--ko);opacity:.72}
.btn:hover{background:var(--lime-d);color:#fff;transform:translateY(-2px)}
.btn.line{background:transparent;color:var(--dark);border:2px solid var(--dark)}
.btn.line:hover{background:var(--dark);color:var(--cream)}
.btn.pale{background:var(--cream);color:var(--dark)}
.btn.pale:hover{background:#fff;color:var(--dark)}
.u-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 16px/1 var(--dsp);color:var(--lime-d);text-decoration:none;border-bottom:2px solid var(--lime);width:max-content}
.u-link span{font:600 14px/1 var(--ko);color:var(--muted)}
.u-link:hover{color:var(--dark);border-color:var(--dark)}

/* ---------- 상단 띠 + 헤더 ---------- */
.topline{background:var(--lime);color:var(--dark);text-align:center;font:600 12.5px/1 var(--ko);padding:10px var(--gut);letter-spacing:-.01em}
.hd{position:relative;z-index:50;display:flex;align-items:center;gap:20px;min-height:86px;padding:10px var(--gut);background:#fff;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;flex-direction:column;justify-content:center;min-height:48px;gap:0;text-decoration:none;flex:none}
.brand b{font:800 26px/1.05 var(--dsp);letter-spacing:-.02em;color:var(--dark)}
.brand i{font:600 11.5px/1 var(--ko);font-style:normal;letter-spacing:.24em;color:var(--lime-d)}
.gnav{margin:0 auto}
.gnav ul{display:flex;gap:8px}
/* 2026-09-27 메뉴 한 언어 — 동네 강아지 용품점이라 한글만 */
.gnav a{display:flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;padding:9px 18px;border-radius:999px;font:700 15.5px/1.25 var(--ko);letter-spacing:-.02em;color:var(--dark);transition:background .2s}
.gnav a:hover{background:var(--lime-w)}
.gnav a[aria-current]{background:var(--lime);color:var(--dark)}
.hd-r{display:flex;align-items:center;gap:2px}
.hd-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--dark)}
.hd-ic:hover{background:var(--lime-w);color:var(--lime-d)}
.hd-ic svg{width:23px;height:23px}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;border:0;background:none;color:var(--dark);cursor:pointer;padding:0 10px}
.burger i{display:block;height:2.6px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7.6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.6px) rotate(-45deg)}
.mobile-nav{position:fixed;top:var(--mm-top,110px);left:0;right:0;bottom:0;z-index:1000;background:var(--cream-2);color:var(--dark);padding:12px 20px 120px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.mobile-nav.open{opacity:1;visibility:visible}
body.mm-open{overflow:hidden}
.mm-list a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:16px 0;border-bottom:1px solid var(--line);font:800 24px/1.2 var(--ko);letter-spacing:-.03em;color:var(--dark);text-decoration:none}
.mm-list a[aria-current]{color:var(--lime-d)}
.mm-note{margin-top:20px;font-size:14px;color:var(--muted)}
.mm-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.mm-cta a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:999px;background:var(--lime);color:var(--dark);font-weight:700;text-decoration:none}
.mm-cta a:last-child{background:#fff;border:2px solid var(--dark)}
.mm-cta svg{width:18px;height:18px}

/* ---------- 첫 화면 (레퍼런스: 밝은 지면 · 왼쪽 글 · 오른쪽 사진) ---------- */
.hero{background:var(--cream);padding:clamp(34px,4.4vw,66px) 0 0}
.hero-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(30px,4vw,54px);display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(24px,3.6vw,56px);align-items:center}
.hero h1{font:800 clamp(30px,3.1vw,42px)/1.16 var(--dsp);letter-spacing:-.01em;color:var(--dark);isolation:isolate}
.hero h1 em{font-style:normal;position:relative;display:inline-block;color:var(--dark);padding:0 .12em}
.hero h1 em::before{content:"";position:absolute;left:0;right:0;top:.16em;bottom:.1em;background:var(--lime);border-radius:14px 10px 16px 12px;transform:rotate(-1.2deg);z-index:-1}
.hero .k{margin-top:16px;font:700 clamp(17px,1.6vw,21px)/1.55 var(--ko);color:var(--lime-d)}
.hero p.body{margin-top:12px;font-size:16.5px;line-height:1.9;color:var(--dark-2);max-width:46ch}
.hero-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.hero-art{position:relative;min-height:340px}
.hero-art .main{border-radius:190px 190px 34px 34px;overflow:hidden;background:var(--cream-3);box-shadow:0 18px 40px rgba(47,42,33,.14)}
.hero-art .main img{width:100%;aspect-ratio:1/1.02;object-fit:cover;object-position:center 32%}
.bub{position:absolute;border-radius:50%;overflow:hidden;border:6px solid var(--cream);background:var(--cream-3)}
.bub img{width:100%;height:100%;object-fit:cover}
.bub-a{width:38%;aspect-ratio:1;left:-6%;bottom:16%}
.bub-b{width:29%;aspect-ratio:1;right:-4%;top:6%}
.tagchips{position:absolute;left:0;right:0;bottom:-14px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tagchips li{background:#fff;border:2px solid var(--dark);border-radius:999px;padding:6px 14px;font:700 13px/1.3 var(--dsp);color:var(--dark)}
.tagchips li:nth-child(2){background:var(--lime);border-color:var(--lime)}
.tagchips li:nth-child(3){background:var(--gold);border-color:var(--gold)}

/* 부채꼴 경계 (레퍼런스의 물결 경계를 다른 형태로) */
.scallop{height:26px;background-color:var(--dark);background-image:radial-gradient(circle at 13px 0,var(--cream) 13px,transparent 13.5px);background-size:26px 26px;background-repeat:repeat-x}
.scallop.up{background-color:var(--cream);background-image:radial-gradient(circle at 13px 26px,var(--dark) 13px,transparent 13.5px)}

/* ---------- 어두운 띠: 가운데 제목 + 폭이 다른 카드 3 ---------- */
.band{background:var(--dark);color:#fff;padding:clamp(44px,7.2vw,104px) 0 clamp(46px,5.4vw,80px);text-align:center}
.band h2{font:800 clamp(26px,3.2vw,44px)/1.14 var(--dsp);color:var(--cream)}
.band .k{margin-top:10px;font:600 16px/1.6 var(--ko);color:#d9d1bf}
.band-row{margin-top:36px;display:grid;grid-template-columns:1.32fr .82fr 1fr;gap:20px;text-align:left}
.bcard{border:2px solid var(--lime);border-radius:30px 12px 30px 12px;padding:26px 26px 30px;background:var(--dark-2)}
.bcard:nth-child(2){border-color:var(--cream);border-radius:12px 30px 12px 30px}
.bcard:nth-child(3){border-color:var(--gold);border-radius:30px}
.bcard h3{font:800 21px/1.25 var(--dsp);color:#fff}
.bcard h3 span{display:block;margin-top:4px;font:700 14px/1.4 var(--ko);color:var(--lime)}
.bcard:nth-child(2) h3 span{color:var(--cream)}
.bcard:nth-child(3) h3 span{color:var(--gold)}
.bcard p{margin-top:12px;font-size:14.5px;line-height:1.8;color:#ded6c4}

/* ---------- 설명 + 버튼 ---------- */
.sec{padding:clamp(52px,6vw,88px) 0}
.say{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:24px clamp(28px,4vw,64px);align-items:start}
.say .lead{margin-top:0}
.say .btn{margin-top:22px}
.tint{background:var(--cream-2)}

/* ---------- 용품 격자 (레퍼런스 가로 캐러셀 → 격자) ---------- */
.goods{margin-top:34px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.good{grid-column:span 2;display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.good:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(47,42,33,.13)}
.good img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--cream-3)}
.good .t{padding:16px 20px 22px}
.good .tag{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--lime-w);color:var(--lime-d);font:700 12px/1.5 var(--ko)}
.good .en{margin-top:9px;font:800 19px/1.2 var(--dsp);color:var(--dark)}
.good .ko{margin-top:3px;font:600 14px/1.45 var(--ko);color:var(--muted)}
.good .pr{margin-top:10px;font:700 16px/1 var(--ko);color:var(--dark)}
.good.wide{grid-column:span 3}
.good.wide img{aspect-ratio:16/9}
.good.tall{grid-column:span 3}
.good.tall img{aspect-ratio:16/11}
.good.big{grid-column:span 4}
.good.big img{aspect-ratio:16/8}
.good.big .en{font-size:24px}
.good.small{grid-column:span 2}

/* ---------- 매장 한 칸 ---------- */
.storeline{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(26px,4vw,60px);align-items:center}
.storeline figure{border-radius:28px;overflow:hidden;background:var(--cream-3)}
.storeline figure img{width:100%;aspect-ratio:16/11;object-fit:cover}
.checks{margin-top:22px;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;font-size:15.5px;line-height:1.75}
.checks li::before{content:"";width:20px;height:20px;margin-top:5px;border-radius:50%;background:var(--lime)}

/* ---------- 하위 페이지 ---------- */
.sub{position:relative;background:var(--cream)}
.sub-in{max-width:var(--max);margin:0 auto;padding:clamp(28px,3.6vw,54px) var(--gut) clamp(34px,4vw,60px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(22px,3.4vw,52px);align-items:center}
.sub-in h1{font:800 clamp(30px,3.8vw,52px)/1.12 var(--dsp);color:var(--dark)}
.sub-in .k{margin-top:12px;font:700 17px/1.55 var(--ko);color:var(--lime-d)}
.sub-in p.body{margin-top:12px;font-size:15.5px;line-height:1.9;color:var(--dark-2);max-width:46ch}
.sub-art{border-radius:34px 140px 34px 140px;overflow:hidden;background:var(--cream-3)}
.sub-art img{width:100%;aspect-ratio:16/10;object-fit:cover}

.tbl{width:100%;border-collapse:separate;border-spacing:0;margin-top:28px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}
.tbl caption{text-align:left;font:600 15px/1.5 var(--ko);color:var(--muted);padding-bottom:10px}
.tbl th{background:var(--lime);color:var(--dark);font:700 14px/1.4 var(--ko);text-align:left;padding:14px 18px}
.tbl td{padding:15px 18px;border-top:1px solid var(--line);font-size:15px}
.tbl tr:nth-child(even) td{background:var(--cream-2)}
.steps{margin-top:30px;display:grid;gap:18px}
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:14px 30px;padding:22px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step h3{font:800 20px/1.25 var(--dsp);color:var(--dark)}
.step h3 span{display:block;margin-top:4px;font:700 14.5px/1.4 var(--ko);color:var(--lime-d)}
.step p{font-size:15.5px;line-height:1.85;color:var(--dark-2)}
.note{margin-top:26px;padding:22px 26px;background:var(--lime-w);border-radius:20px;color:var(--dark-2);font-size:15px;line-height:1.8}
.acc{margin-top:28px;border-top:1px solid var(--line)}
.acc .q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--dark);font:700 16px/1.5 var(--ko);text-align:left;cursor:pointer}
.acc .q::after{content:"+";font:700 24px/1 var(--dsp);color:var(--lime-d)}
.acc li.open .q::after{content:"–"}
.acc .a{display:none;padding:4px 0 20px;border-bottom:1px solid var(--line);font-size:15px;color:var(--muted);line-height:1.85}
.acc li.open .a{display:block}
.vdl{margin-top:24px;display:grid}
.vdl>div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px dashed var(--line)}
.vdl dt{font:700 13px/1.6 var(--dsp);letter-spacing:.06em;text-transform:uppercase;color:var(--lime-d)}
.vdl dd{font-size:15.5px}
.vdl dd a{border-bottom:1px solid var(--lime);text-decoration:none}

/* ---------- 푸터 ---------- */
.ft{background:var(--dark);color:#e6dfd0;padding:clamp(48px,5vw,74px) var(--gut) 40px}
.ft-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.4fr 1.1fr .65fr;gap:40px}
.ft-mark{display:flex;flex-direction:column}
.ft-mark b{font:800 27px/1.05 var(--dsp);color:var(--cream)}
.ft-mark i{font:600 12px/1 var(--ko);font-style:normal;letter-spacing:.2em;color:var(--lime)}
.ft-ko{margin-top:14px;color:#c9c2b2;max-width:36ch}
.ft-sns{display:flex;gap:4px;margin-top:18px}
.ft-sns a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--lime)}
.ft-sns a:hover{background:var(--dark-2)}
.ft-sns svg{width:22px;height:22px}
.ft-info{display:grid;gap:8px;align-content:start}
.ft-info div{display:flex;gap:14px}
.ft-info dt{flex:0 0 74px;font:700 12.5px/1.9 var(--dsp);letter-spacing:.08em;text-transform:uppercase;color:var(--lime)}
.ft-info dd{font-size:15px;color:#f0eade}
.ft-info a{text-decoration:none;border-bottom:1px solid var(--lime)}
.ft-col{display:grid;gap:2px;align-content:start}
.ft-col a{display:flex;align-items:center;gap:8px;min-height:44px;color:#f0eade;font:700 16px/1.5 var(--dsp);text-decoration:none}
.ft-col a span{font:500 13px/1 var(--ko);color:#b3ac9c}
.ft-col a:hover{color:var(--lime)}
.ft-legal{max-width:var(--max);margin:42px auto 0;padding-top:22px;border-top:1px solid var(--dark-2);font-size:12.5px;line-height:1.85;color:#a49d8d}
.cta-bar{display:none}

/* ---------- 등장 ---------- */
.js .pop{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .pop.go{opacity:1;transform:none}
.js .pop-stag>*{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.js .pop-stag.go>*{opacity:1;transform:none}
.js .pop-stag.go>*:nth-child(2){transition-delay:.07s}
.js .pop-stag.go>*:nth-child(3){transition-delay:.14s}
.js .pop-stag.go>*:nth-child(4){transition-delay:.21s}
html.reduce .js .pop,html.reduce .js .pop-stag>*{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .js .pop,.js .pop-stag>*{opacity:1;transform:none;transition:none}
  .good:hover{transform:none}
}

/* ---------- 반응 ---------- */
@media (max-width:1180px){
  .gnav{display:none}
  .burger{display:flex}
  .d-only{display:none}
  .hd-r{margin-left:auto}
  .goods{grid-template-columns:repeat(4,minmax(0,1fr))}
  .good.big,.good.wide,.good.tall{grid-column:span 2}
  .ft-grid{grid-template-columns:1.2fr 1fr}
  .ft-col{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero-in,.say,.storeline,.sub-in,.step,.band-row{grid-template-columns:minmax(0,1fr)}
  .hero-art{min-height:0;margin-top:20px}
  .hero-art .main{border-radius:150px 150px 28px 28px}
  .bub-a{width:32%;left:-2%}
  .bub-b{width:26%;right:0}
  .tagchips{position:static;margin-top:26px;justify-content:flex-start}
  .band-row{gap:14px}
  .goods{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .good,.good.big,.good.wide,.good.tall,.good.small{grid-column:span 1}
  .good img{aspect-ratio:1/1}
  .good.big img,.good.wide img,.good.tall img{aspect-ratio:1/1}
  .good.big .en{font-size:19px}
  .sub-art{border-radius:28px 90px 28px 90px}
  .tbl{display:block;border:0;background:none;border-radius:0}
  .tbl caption{display:block}
  .tbl thead{display:none}
  .tbl tbody,.tbl tr,.tbl td{display:block;width:auto}
  .tbl tr{background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px 4px;margin-bottom:12px}
  .tbl tr:nth-child(even) td{background:none}
  .tbl td{border:0;padding:8px 16px}
  .tbl td::before{content:attr(data-label);display:block;font:700 12px/1.6 var(--ko);letter-spacing:.04em;color:var(--lime-d)}
  .ft-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .ft-col{grid-column:auto;grid-template-columns:minmax(0,1fr)}
  .cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;display:grid;grid-template-columns:1.25fr 1fr 1fr;background:#fff;border-top:1px solid var(--line)}
  .cta-bar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:58px;color:var(--dark);font:700 14px/1 var(--ko);text-decoration:none}
  .cta-bar a:first-child{background:var(--lime)}
  .cta-bar svg{width:18px;height:18px}
  body{padding-bottom:58px}
}
@media (max-width:420px){
  .brand b{font-size:22px}
  .hero h1{font-size:30px}
  .bub-a{width:34%}
}