:root{--ink:#f2f3f5;--bg:#0f1112;--bg2:#171a1c;--muted:#9aa1a8;--line:#262b2e;--accent:#4c8dff;--navbg:rgba(15,17,18,.8)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'NanumSquareNeo',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:clip;overflow-wrap:anywhere}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:700}
a{color:inherit}
header.nav{position:sticky;top:0;z-index:30;background:var(--navbg);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-size:21px;font-weight:800;letter-spacing:-.02em}
.nav .cta{background:var(--ink);color:var(--bg);padding:11px 22px;border-radius:6px;text-decoration:none;font-size:13px;font-weight:700;transition:transform .2s}
.nav .cta:hover{transform:translateY(-2px)}
.nav .co-menu{display:flex;gap:26px;margin-left:auto;margin-right:24px}
.nav .co-menu a{text-decoration:none;color:var(--ink);font-size:14px;opacity:.82;transition:color .2s,opacity .2s}
.nav .co-menu a:hover{color:var(--accent);opacity:1}
@media(max-width:860px){.nav .co-menu{display:none}}
/* hero */
.hero{padding:96px 0 80px;border-bottom:1px solid var(--line)}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(38px,5.6vw,76px);font-weight:900;line-height:1.04;letter-spacing:-.04em;margin:20px 0 22px}
.hero p{color:var(--muted);font-size:clamp(15px,1.4vw,18px);max-width:38ch}
.hero .img{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.hero .img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1.2s ease}
.hero:hover .img img{transform:scale(1)}
section{padding:104px 0}
.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2.sec{font-size:clamp(26px,3vw,42px);font-weight:800;letter-spacing:-.03em;margin:14px 0 8px}
.lead{color:var(--muted);max-width:52ch;margin-bottom:48px}
.cms-optional:empty{display:none}
/* tags */
.tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.tags span{border:1px solid var(--line);background:var(--bg2);border-radius:999px;padding:12px 22px;font-size:15px;font-weight:600;transition:border-color .2s,color .2s}
.tags span:hover{border-color:var(--accent);color:var(--accent)}
/* projects */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proj{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg2);transition:transform .3s ease,border-color .3s ease}
.proj:hover{transform:translateY(-6px);border-color:var(--accent)}
.proj .ph{aspect-ratio:4/3;background:var(--bg2);background-size:cover;background-position:center;overflow:hidden}
.proj .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.proj:hover .ph img{transform:scale(1.07)}
.proj .body{padding:18px 20px}
.proj .body b{font-weight:700}.proj .body p{color:var(--muted);font-size:13px;margin-top:4px}
/* services */
.svc{display:grid;grid-template-columns:1fr;gap:16px}
.svc .c{border-top:2px solid var(--accent);padding:26px 0 0}
.svc .c h3{font-size:20px;font-weight:800;margin-bottom:8px}
.svc .c p{color:var(--muted);font-size:15px}
/* faq */
.faq .list{display:grid;grid-template-columns:1fr;gap:16px}
.faq details{border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:12px;background:var(--bg2);overflow:hidden;transition:border-color .25s}
.faq details[open]{border-color:var(--accent)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:22px 24px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex:0 0 auto;width:26px;height:26px;line-height:24px;text-align:center;border:1px solid var(--line);border-radius:7px;color:var(--accent);font-size:18px;font-weight:700;transition:transform .25s,border-color .25s}
.faq details[open] summary .ic{transform:rotate(45deg);border-color:var(--accent)}
.faq details .a{color:var(--muted);font-size:15px;line-height:1.7;padding:0 24px 22px 64px}
/* contact */
.contact .grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px;align-items:center}
.contact dl.contact-cards{display:grid;grid-template-columns:1fr;gap:12px;font-size:16px}
.contact dt{color:var(--muted)}
.contact-phone{color:inherit;text-decoration:none;font:inherit}
.contact-phone:hover{text-decoration:underline;text-underline-offset:3px}
.contact .call a{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-size:18px;font-weight:700;padding:18px 32px;border-radius:10px;transition:transform .2s}
.contact .call a:hover{transform:translateY(-3px)}
footer{padding:48px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer .ft{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer b{color:var(--ink);font-weight:700}
@media(prefers-reduced-motion:no-preference){
.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
}
@media(max-width:860px){.hero .grid,.contact .grid{grid-template-columns:1fr;gap:28px}.cards,.svc,.faq .list{grid-template-columns:1fr}}
@media(max-width:640px){.wrap{padding:0 20px}section{padding:64px 0}.hero{padding:56px 0}}
/* --- 공통 문의 모달(sf-iq) --- */
.sf-iq-fab{position:fixed;right:20px;bottom:20px;z-index:9998;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;background:#2563eb;color:#ffffff;font:600 15px/1 'NanumSquareNeo',system-ui,sans-serif;padding:15px 22px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .18s ease,box-shadow .18s ease}
.sf-iq-fab:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.sf-iq-fab .sf-iq-dot{width:8px;height:8px;border-radius:50%;background:#ffffff;opacity:.9}
.sf-iq-back{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,17,20,.55);backdrop-filter:blur(3px)}
.sf-iq-back.open{display:flex}
.sf-iq-modal{width:100%;max-width:460px;background:#fff;color:#16181c;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(14px) scale(.98);opacity:0;transition:transform .26s cubic-bezier(.2,.7,.2,1),opacity .26s ease;font-family:'NanumSquareNeo',system-ui,sans-serif;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.sf-iq-back.open .sf-iq-modal{transform:none;opacity:1}
.sf-iq-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:24px 24px 6px}
.sf-iq-head h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:0}
.sf-iq-head p{margin:6px 0 0;color:#6b7078;font-size:13px}
.sf-iq-x{flex:none;width:34px;height:34px;border:0;background:#f1f2f4;border-radius:10px;cursor:pointer;font-size:18px;color:#444;line-height:1}
.sf-iq-x:hover{background:#e6e8ea}
.sf-iq-body{padding:14px 24px 24px}
.sf-iq-field{margin-top:14px}
.sf-iq-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#33373d}
.sf-iq-field input,.sf-iq-field textarea{width:100%;border:1px solid #d9dce0;border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;color:#16181c;background:#fff;transition:border-color .18s,box-shadow .18s}
.sf-iq-field textarea{min-height:96px;resize:vertical}
.sf-iq-field input:focus,.sf-iq-field textarea:focus{outline:0;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb22}
.sf-iq-submit{margin-top:18px;width:100%;border:0;cursor:pointer;background:#2563eb;color:#ffffff;font:700 16px/1 'NanumSquareNeo',system-ui,sans-serif;padding:15px;border-radius:12px;transition:filter .18s,transform .12s}
.sf-iq-submit:hover{filter:brightness(1.05)}
.sf-iq-submit:active{transform:translateY(1px)}
.sf-iq-submit[disabled]{opacity:.6;cursor:default}
.sf-iq-note{margin-top:12px;font-size:12px;color:#8a8f96;text-align:center}
.sf-iq-note a{color:#2563eb}
.sf-iq-ok,.sf-iq-err{display:none;padding:8px 0 4px}
.sf-iq-ok.show,.sf-iq-err.show{display:block}
.sf-iq-ok{text-align:center}
.sf-iq-ok .sf-iq-check{width:54px;height:54px;border-radius:50%;background:#2563eb;color:#ffffff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:6px auto 14px}
.sf-iq-ok h4{font-size:18px;margin:0 0 6px}
.sf-iq-ok p{color:#6b7078;font-size:14px;margin:0}
.sf-iq-err{color:#c0392b;font-size:13px;text-align:center}
/* 플로팅 레일(전화/문의/지도/TOP) */
.sf-iq-rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:9998;display:flex;flex-direction:column;gap:10px}
.sf-iq-r{width:54px;height:54px;border-radius:14px;border:0;cursor:pointer;background:#fff;color:#16181c;font:700 12px/1 'NanumSquareNeo',system-ui,sans-serif;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .16s ease,filter .16s}
.sf-iq-r:hover{transform:translateY(-2px);filter:brightness(.97)}
.sf-iq-r-on{background:#2563eb;color:#ffffff}
.sf-iq-r[data-sf-top]{opacity:0;transform:translateY(10px) scale(.85);pointer-events:none;transition:opacity .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1)}
.sf-iq-r[data-sf-top].sf-show{opacity:1;transform:none;pointer-events:auto}
@media(max-width:520px){.sf-iq-fab{right:14px;bottom:14px;padding:13px 18px;font-size:14px}.sf-iq-modal{max-width:none}.sf-iq-rail{right:12px;gap:8px}.sf-iq-r{width:46px;height:46px;font-size:11px;border-radius:12px}}
/* --- 인라인 상담문의 섹션(sf-ct) --- */
/* 폰트는 상속받는다 — 여기만 Pretendard 로 박으면 다른 활자를 쓰는 시안에서 이 블록만 따로 논다 */
.sf-ct{box-sizing:border-box;width:100%;padding:clamp(56px,8vw,104px) 20px;background:#f0f4fe;font-family:inherit;color:#16181c;word-break:keep-all;overflow-wrap:anywhere}
.sf-ct *{box-sizing:border-box}
.sf-ct-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:start}
.sf-ct-eyebrow{display:block;width:56px;height:2px;border-radius:1px;background:#2563eb;margin:0 0 16px}
.sf-ct-info h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;margin:0 0 14px;line-height:1.2}
.sf-ct-lead{font-size:15px;line-height:1.7;color:#525860;margin:0 0 26px;max-width:36ch}
.sf-ct-meta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.sf-ct-meta li{display:flex;gap:14px;align-items:baseline;font-size:15px;line-height:1.5}
.sf-ct-meta .k{flex:none;width:64px;font-size:12px;font-weight:700;color:#9097a0;letter-spacing:.04em}
.sf-ct-meta a{color:inherit;text-decoration:none}
.sf-ct-meta a:hover{text-decoration:underline}
.sf-ct-dir{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.sf-ct-dir a{display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none;border:1px solid rgba(37,99,235,0.28);color:#2563eb;background:#fff;transition:border-color .15s,background .15s}
.sf-ct-dir a:hover{border-color:#2563eb}
.sf-ct-form{background:#fff;border-radius:18px;padding:clamp(24px,3vw,36px);box-shadow:0 24px 60px rgba(16,18,22,.10);border:1px solid rgba(16,18,22,.06)}
.sf-ct-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sf-ct-field{margin-bottom:16px}
.sf-ct-field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:#33373d}
.sf-ct-field label .req{color:#2563eb;margin-left:3px}
.sf-ct-field input,.sf-ct-field textarea{width:100%;border:1px solid #d9dce0;border-radius:11px;padding:13px 15px;font:inherit;font-size:15px;color:#16181c;background:#fbfbfc;transition:border-color .16s,box-shadow .16s,background .16s}
.sf-ct-field textarea{min-height:118px;resize:vertical}
.sf-ct-field input:focus,.sf-ct-field textarea:focus{outline:0;border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,0.16)}
.sf-ct-agree{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#6b7078;margin:4px 0 18px;line-height:1.5}
.sf-ct-agree input{flex:none;width:17px;height:17px;margin-top:1px;accent-color:#2563eb}
.sf-ct-submit{width:100%;border:0;cursor:pointer;background:#2563eb;color:#ffffff;font-family:inherit;font-weight:800;font-size:16.5px;line-height:1;letter-spacing:.01em;padding:17px;border-radius:12px;box-shadow:0 8px 20px rgba(37,99,235,0.32);transition:filter .16s,transform .1s,box-shadow .16s}
.sf-ct-submit:hover{filter:brightness(1.08);box-shadow:0 10px 26px rgba(37,99,235,0.4)}
.sf-ct-submit:active{transform:translateY(1px)}
.sf-ct-submit[disabled]{opacity:.6;cursor:default}
.sf-ct-msg{margin-top:13px;font-size:13.5px;text-align:center;display:none}
.sf-ct-msg.show{display:block}
.sf-ct-msg.ok{color:#2563eb;font-weight:600}
.sf-ct-msg.err{color:#c0392b}
@media(max-width:780px){.sf-ct-inner{grid-template-columns:1fr;gap:30px}.sf-ct-row{grid-template-columns:1fr}}
.sf-map{margin:20px 0}
.sf-map+*{margin-top:18px}
.sf-map-embed{width:100%;aspect-ratio:16/9;min-height:240px;border-radius:10px;overflow:hidden;position:relative;background:#e9ecef}
.sf-map-embed iframe,.sf-map-embed>div{width:100%!important;height:100%!important;border:0}
/* 카카오 '지도 퍼가기'(roughmap) 보정.
   퍼가기 위젯은 [지도] + [로드뷰·길찾기·kakaomap 표기 바 32px] + [주소·전화 84px] 로 쌓인다.
   컨테이너에 그냥 100% 를 물리면 아래 두 덩이가 잘려 나가 로드뷰·길찾기가 사라지고
   kakaomap 출처 표기까지 없어진다. 지도 높이에서 바 높이를 빼 둘 다 보이게 한다.
   주소·전화 줄은 페이지에 이미 같은 정보가 있어 중복이라 감춘다. */
.sf-map-embed .root_daum_roughmap{width:100%!important;height:100%!important}
.sf-map-embed .root_daum_roughmap .wrap_map{width:100%!important;height:calc(100% - 32px)!important}
.sf-map-embed .root_daum_roughmap .cont{display:none!important}
.sf-map-embed .root_daum_roughmap .map_border{display:none!important}
.sf-map-embed .root_daum_roughmap .map{border-radius:0!important}
.sf-map-fallback{border:1px solid rgba(128,128,128,.28);border-radius:10px;padding:22px}
.sf-map-addr{font-size:15px;line-height:1.6;display:flex;gap:10px;align-items:baseline}
.sf-map-pin{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;opacity:.55;border:1px solid currentColor;border-radius:6px;padding:3px 7px}
.sf-map-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.sf-map-links a{display:inline-block;border:1px solid var(--line,#ddd);border-radius:10px;padding:10px 16px;font-size:13px;text-decoration:none;color:inherit}
.sf-map-links a:hover{border-color:var(--ink,#333);opacity:1}
.sf-draggable{cursor:grab;scroll-behavior:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sf-draggable::-webkit-scrollbar{display:none}
.sf-draggable.sf-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.sf-draggable img{-webkit-user-drag:none;user-drag:none}
.sf-lb-clickable{cursor:zoom-in}
.sf-lb{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;background:rgba(8,9,11,.92);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sf-lb.open{display:flex}
.sf-lb img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none}
.sf-lb-btn{position:absolute;border:0;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;width:52px;height:52px;border-radius:50%;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .16s}
.sf-lb-btn:hover{background:rgba(255,255,255,.24)}
.sf-lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.sf-lb-next{right:18px;top:50%;transform:translateY(-50%)}
.sf-lb-close{top:18px;right:18px;width:46px;height:46px;font-size:22px}
.sf-lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);font:600 13px/1 'NanumSquareNeo',system-ui,sans-serif;letter-spacing:.04em}
@media(max-width:560px){.sf-lb-btn{width:44px;height:44px;font-size:20px}.sf-lb-prev{left:8px}.sf-lb-next{right:8px}}
.sf-yt{position:relative;width:100%;aspect-ratio:16/9;background:#0a0a0a center/cover no-repeat;border-radius:14px;overflow:hidden;cursor:pointer}
.sf-yt::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);transition:background .2s}
.sf-yt:hover::after{background:rgba(0,0,0,.05)}
.sf-yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:78px;height:78px;border-radius:50%;background:rgba(18,18,20,.74);display:flex;align-items:center;justify-content:center;transition:transform .18s,background .18s;pointer-events:none}
.sf-yt:hover .sf-yt-play{transform:translate(-50%,-50%) scale(1.08);background:#e02f2f}
.sf-yt-play svg{width:30px;height:30px;margin-left:4px;fill:#fff}
.sf-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.sf-video{display:block;width:100%;border-radius:14px;overflow:hidden;background:#000}
.sf-video video{display:block;width:100%;height:auto}

/* --- Momoria warm refinement 2026-08-12 --- */
:root{
  --ink:#4b3a31;
  --bg:#fff9f1;
  --bg2:#faecd9;
  --muted:#806d60;
  --line:#ead7c1;
  --accent:#ce7e55;
  --accent-deep:#925438;
  --paper:#fffefa;
  --soft:#fff2e4;
  --sage:#aeb99b;
  --honey:#d9aa63;
  --navbg:rgba(255,249,241,.94)
}
::selection{background:#f0c9aa;color:#3b2b24}
body{background:var(--bg);color:var(--ink)}
.wrap{max-width:1180px}
.kicker{color:var(--accent-deep);letter-spacing:.22em}
header.nav{
  background:var(--navbg);
  border-bottom-color:rgba(146,84,56,.12);
  box-shadow:0 6px 24px rgba(111,75,49,.055)
}
.nav .wrap{height:74px}
.brand{color:var(--accent-deep)}
.nav .co-menu a{color:var(--ink);opacity:.78}
.nav .co-menu a:hover{color:var(--accent-deep)}
.nav .cta{
  background:var(--accent-deep);
  color:#fffaf4;
  border-radius:999px;
  padding:12px 23px;
  box-shadow:0 8px 18px rgba(146,84,56,.2)
}
.nav .cta:hover{box-shadow:0 11px 24px rgba(146,84,56,.27)}

.hero{
  padding:88px 0 96px;
  background:#fffaf3;
  border-bottom-color:var(--line)
}
.hero .wrap{max-width:1360px}
.hero .grid{grid-template-columns:1fr;gap:46px;align-items:start}
.hero .grid>div:first-child{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  column-gap:64px;
  row-gap:14px;
  align-items:start
}
.hero .grid>div:first-child>.kicker{grid-column:1/-1}
.hero h1{
  grid-column:1;
  grid-row:2/4;
  max-width:11em;
  margin:16px 0 0;
  font-family:'MaruBuri','NanumSquareNeo',serif;
  font-size:clamp(40px,4.6vw,64px);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.045em;
  text-wrap:balance
}
.hero p{
  grid-column:2;
  grid-row:2;
  max-width:38ch;
  padding-top:20px;
  color:var(--muted);
  font-size:clamp(16px,1.35vw,18px);
  line-height:1.85
}
.hero .img{
  position:relative;
  aspect-ratio:1774/680;
  border:1px solid rgba(146,84,56,.14);
  border-radius:24px;
  background:var(--soft);
  box-shadow:0 28px 64px rgba(120,83,53,.16)
}
.hero .img::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:rgba(230,171,107,.025)
}
.hero .img img{transform:none;filter:none;object-fit:cover;object-position:center}
.hero:hover .img img{transform:none}
.tags{grid-column:2;grid-row:3;gap:10px;margin-top:8px}
.tags span{
  border-color:#ebcbb2;
  background:#fff2e6;
  color:#654c3f;
  padding:10px 17px;
  font-size:14px;
  box-shadow:0 5px 14px rgba(111,75,49,.045)
}
.tags span:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--paper)}
.tags span:nth-child(2){background:#f2f4e8;border-color:#d6ddc1}
.tags span:nth-child(3){background:#fff7dc;border-color:#ead8a7}

section{padding:112px 0}
h2.sec{
  font-family:'MaruBuri','NanumSquareNeo',serif;
  font-weight:700;
  line-height:1.25;
  color:#3f3029
}
.lead{color:var(--muted)}
#projects{background:var(--paper)}
.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:none}
.proj{
  display:block;
  border-color:var(--line);
  border-radius:20px;
  background:var(--paper);
  box-shadow:0 14px 36px rgba(91,61,43,.075)
}
.proj:hover{transform:translateY(-4px);border-color:#d7a481;box-shadow:0 20px 44px rgba(91,61,43,.12)}
.proj .ph{
  aspect-ratio:16/9;
  background-color:#f3e7d8;
  background-image:none;
  background-size:cover;
  background-position:center;
  border-right:0;
  border-bottom:1px solid var(--line)
}
.proj .body{display:block;padding:18px 20px 20px}
.proj .body b{color:#4f3b31;font-size:15px;letter-spacing:-.01em}
.proj .body p{color:var(--muted);font-size:12.5px;margin-top:3px}

.alt{background:var(--bg2);border-color:var(--line)}
.svc{gap:18px;margin-top:42px}
.svc .c{
  min-height:0;
  padding:28px 24px;
  border:1px solid rgba(146,84,56,.13);
  border-top:4px solid var(--accent);
  border-radius:18px;
  background:rgba(255,254,250,.9);
  box-shadow:0 12px 30px rgba(91,61,43,.06);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease
}
.svc .c{display:grid;grid-template-columns:minmax(190px,.34fr) 1fr;align-items:center;column-gap:32px}
.svc .c:nth-child(2),.svc .c:nth-child(5){background:#f5f5e9;border-top-color:var(--sage)}
.svc .c:nth-child(3){background:#fff5e0;border-top-color:var(--honey)}
.svc .c:hover{transform:translateY(-4px);border-color:#c99878;box-shadow:0 17px 38px rgba(91,61,43,.1)}
.svc .c h3{color:#49352b;font-size:19px;line-height:1.45}
.svc .c p{color:var(--muted);margin-top:0;justify-self:end;text-align:right}

.pride{background:#f8ead8;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pride-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.pride-head h2{margin-bottom:0}
.pride-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
.pride-item{
  min-height:194px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  padding:24px;
  border:1px solid rgba(146,84,56,.13);
  border-radius:18px;
  background:rgba(255,254,250,.9);
  box-shadow:0 12px 28px rgba(91,61,43,.055)
}
.pride-item:nth-child(2){background:#f5f5e9}
.pride-item:nth-child(3){background:#fff5e0}
.pride-item:nth-child(4){background:#fff0e5}
.pride-no{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  color:var(--accent-deep);
  border:1px solid #e8c6ad;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em
}
.pride-item h3{
  margin:0;
  color:#4b382f;
  font-family:'MaruBuri','NanumSquareNeo',serif;
  font-size:clamp(17px,1.45vw,20px);
  font-weight:700;
  line-height:1.55;
  letter-spacing:-.025em
}

.faq{background:#fff8ef}
.faq .lead{margin-bottom:0}
.faq .list{gap:18px;margin-top:44px}
.faq details{
  border-color:var(--line);
  border-top-color:var(--accent);
  border-radius:16px;
  background:var(--paper);
  box-shadow:0 10px 28px rgba(91,61,43,.055)
}
.faq details[open]{border-color:#c99878;box-shadow:0 14px 34px rgba(91,61,43,.09)}
.faq summary{color:#49352b;padding:23px 24px}
.faq summary .ic{border-color:#d7bba5;color:var(--accent-deep);background:var(--soft)}
.faq details[open] summary .ic{border-color:var(--accent)}
.faq details .a{color:var(--muted)}

.sf-ct{background:#f7e8d5;color:var(--ink)}
.sf-ct-eyebrow{background:var(--accent)}
.sf-ct-info h2{font-family:'MaruBuri','NanumSquareNeo',serif;color:#3f3029}
.sf-ct-lead{color:var(--muted)}
.sf-ct-meta .k{color:#917a6c}
.sf-ct-dir a{border-color:#d8b99f;color:var(--accent-deep);background:var(--paper)}
.sf-ct-dir a:hover{border-color:var(--accent);background:#fff8f0}
.sf-ct-form{
  border-color:rgba(125,64,42,.12);
  background:var(--paper);
  box-shadow:0 24px 60px rgba(91,61,43,.12)
}
.sf-ct-field label{color:#503d33}
.sf-ct-field label .req{color:var(--accent)}
.sf-ct-field input,.sf-ct-field textarea{border-color:#ddcbbb;color:var(--ink);background:#fffaf4}
.sf-ct-field input:focus,.sf-ct-field textarea:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(165,91,59,.15)}
.sf-ct-agree{color:#76655b}
.sf-ct-agree input{accent-color:var(--accent-deep)}
.sf-ct-submit{
  background:var(--accent-deep);
  color:#fffaf4;
  box-shadow:0 9px 22px rgba(125,64,42,.26)
}
.sf-ct-submit:hover{box-shadow:0 12px 28px rgba(125,64,42,.34)}
.sf-ct-msg.ok{color:var(--accent-deep)}

.contact{background:var(--paper)}
.contact-card{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:16px;padding:18px 20px;border:1px solid #e1cfbd;border-radius:16px;background:#fffaf4;box-shadow:0 9px 24px rgba(91,61,43,.06);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.contact-card:hover{transform:translateY(-2px);border-color:#c99878;box-shadow:0 13px 30px rgba(91,61,43,.1)}
.contact-card dt{font-size:13px;font-weight:700;letter-spacing:.04em}
.contact-card dd{color:var(--ink);font-weight:600;line-height:1.55}
.contact .sf-map-embed{height:440px;min-height:0;aspect-ratio:auto}
@media(max-width:860px){.contact .sf-map-embed{height:380px}}
.contact dt{color:#907b6e}
.contact .call a{
  background:var(--accent-deep);
  color:#fffaf4;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(125,64,42,.22)
}
.sf-map-embed{border:1px solid var(--line);border-radius:18px;background:#eadfD3;box-shadow:0 14px 34px rgba(91,61,43,.08)}
.sf-map-links a{border-color:var(--line);background:var(--soft);color:var(--ink)}
.sf-map-links a:hover{border-color:var(--accent);color:var(--accent-deep)}

footer{border-top:0;background:#3b2b24;color:#cfbfb3}
footer b{color:#fff9f1}

.sf-iq-fab{background:var(--accent-deep);color:#fffaf4;box-shadow:0 10px 26px rgba(70,43,31,.28)}
.sf-iq-fab:hover{box-shadow:0 14px 32px rgba(70,43,31,.34)}
.sf-iq-back{background:rgba(57,39,31,.56)}
.sf-iq-modal{background:var(--paper);color:var(--ink);border:1px solid rgba(125,64,42,.14);box-shadow:0 30px 80px rgba(61,39,29,.34)}
.sf-iq-head p,.sf-iq-ok p{color:var(--muted)}
.sf-iq-x{background:var(--soft);color:var(--ink)}
.sf-iq-x:hover{background:#ead9c9}
.sf-iq-field label{color:#503d33}
.sf-iq-field input,.sf-iq-field textarea{border-color:#ddcbbb;color:var(--ink);background:#fffaf4}
.sf-iq-field input:focus,.sf-iq-field textarea:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(165,91,59,.15)}
.sf-iq-submit{background:var(--accent-deep);color:#fffaf4}
.sf-iq-note{color:#8c776b}
.sf-iq-note a{color:var(--accent-deep)}
.sf-iq-ok .sf-iq-check{background:var(--accent-deep);color:#fffaf4}
.sf-iq-r{border:1px solid rgba(125,64,42,.12);background:var(--paper);color:var(--ink);box-shadow:0 7px 20px rgba(70,43,31,.18)}
.sf-iq-r-on{background:var(--accent-deep);color:#fffaf4;border-color:var(--accent-deep)}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(165,91,59,.38);
  outline-offset:3px
}

@media(max-width:860px){
  .hero{padding:76px 0 72px}
  .hero .grid{grid-template-columns:1fr;gap:38px}
  .hero .grid>div:first-child{grid-template-columns:1fr;column-gap:0;row-gap:0}
  .hero .grid>div:first-child>.kicker,.hero h1,.hero p,.hero .tags{grid-column:1;grid-row:auto}
  .hero h1{max-width:12em;margin:18px 0 22px}
  .hero p{padding-top:0}
  .hero .tags{margin-top:28px}
  .cards{grid-template-columns:1fr}
  .proj{grid-template-columns:1fr}
  .proj .ph{border-right:0;border-bottom:1px solid var(--line)}
  .svc{margin-top:34px}
  .svc .c{min-height:0}
  .pride-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  .nav .wrap{height:66px}
  .brand{font-size:19px}
  .nav .cta{padding:10px 16px;font-size:12px}
  section{padding:72px 0}
  .hero{padding:62px 0 68px}
  .hero h1{font-size:clamp(34px,10.4vw,44px);margin-top:18px}
  .hero p{font-size:15.5px;line-height:1.78}
  .hero .img{border-radius:20px;box-shadow:0 20px 44px rgba(91,61,43,.14)}
  .tags{margin-top:28px}
  .tags span{padding:9px 13px;font-size:13px}
  .proj{border-radius:18px}
  .proj .body{padding:17px 18px 19px}
  .svc .c{grid-template-columns:1fr;gap:8px;padding:23px 20px;border-radius:16px}
  .svc .c p{margin-top:0}
  .pride-grid{grid-template-columns:1fr;gap:13px;margin-top:32px}
  .pride-item{min-height:0;gap:20px;padding:21px;border-radius:16px}
  .faq .list{margin-top:32px}
  .faq summary{padding:20px 18px;font-size:16px;align-items:flex-start}
  .faq details .a{padding:0 18px 20px 58px;font-size:14px}
  .contact-card{grid-template-columns:78px minmax(0,1fr);gap:12px;padding:16px;border-radius:14px}
  .contact .sf-map-embed{height:320px}
  .sf-map-embed{border-radius:14px}
  .contact .call a{width:100%;padding:16px 22px;text-align:center;font-size:16px}
  footer{padding-bottom:94px}
}

/* --- 2026-08-12 warm illustrated hero background --- */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fff9f1
}
.hero::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0 0 auto;
  height:clamp(540px,48vw,690px);
  background:url('../img/hero-dogs-meadow-20260812.jpg') center bottom/cover no-repeat;
  opacity:.9;
  pointer-events:none
}
.hero::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:
    linear-gradient(180deg,rgba(255,252,246,.12) 0%,rgba(255,249,239,.04) 40%,rgba(255,249,241,.76) 57%,#fff9f1 72%),
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.28),transparent 50%);
  pointer-events:none
}
.hero .wrap{position:relative;z-index:2}
.hero .grid{gap:clamp(96px,9vw,142px)}
.hero .grid>div:first-child{
  position:relative;
  z-index:3;
  padding:clamp(30px,3.2vw,46px) clamp(28px,4vw,56px);
  border:1px solid rgba(151,92,58,.16);
  border-radius:28px;
  background:rgba(255,252,247,.88);
  box-shadow:0 24px 60px rgba(105,71,48,.14),inset 0 1px 0 rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(12px) saturate(112%);
  backdrop-filter:blur(12px) saturate(112%)
}
.hero .grid>div:first-child::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:12px;
  border:1px solid rgba(198,139,96,.12);
  border-radius:20px;
  pointer-events:none
}
.hero h1{
  color:#432f27;
  text-shadow:0 2px 0 rgba(255,255,255,.72),0 9px 28px rgba(86,55,39,.08)
}
.hero p{color:#695449}
.hero .kicker{
  width:max-content;
  padding:7px 13px;
  border:1px solid rgba(160,91,55,.16);
  border-radius:999px;
  background:rgba(255,246,236,.78);
  box-shadow:0 6px 16px rgba(95,61,43,.06)
}
.hero .tags span{
  background:rgba(255,253,249,.88);
  box-shadow:0 7px 18px rgba(92,60,42,.07)
}
.hero .img{
  z-index:4;
  border-color:rgba(133,78,48,.22);
  box-shadow:0 34px 80px rgba(91,61,43,.21),0 8px 24px rgba(91,61,43,.12)
}

@media(max-width:860px){
  .hero::before{
    height:720px;
    background-position:center bottom;
    opacity:.86
  }
  .hero::after{
    background:linear-gradient(180deg,rgba(255,251,245,.12) 0%,rgba(255,249,241,.08) 50%,#fff9f1 70%)
  }
  .hero .grid{gap:112px}
  .hero .grid>div:first-child{padding:32px;border-radius:24px}
}

@media(max-width:640px){
  .hero::before{
    height:760px;
    background-position:50% bottom;
    background-size:auto 650px
  }
  .hero .grid{gap:102px}
  .hero .grid>div:first-child{
    padding:26px 22px 28px;
    border-radius:21px;
    background:rgba(255,252,247,.91);
    box-shadow:0 20px 46px rgba(105,71,48,.13)
  }
  .hero .grid>div:first-child::before{inset:9px;border-radius:15px}
  .hero .kicker{padding:6px 11px}
}

@media(prefers-reduced-motion:reduce){
  .hero .img,.hero .grid>div:first-child{transition:none}
}

/* --- 2026-08-12 cloud hero continuation --- */
.hero::before{
  inset:0;
  height:auto;
  background-image:url('../img/hero-dogs-clouds-20260812-v2.jpg');
  background-size:cover;
  background-position:center 44%;
  opacity:.92
}
.hero::after{
  background:
    linear-gradient(180deg,rgba(255,252,247,.18) 0%,rgba(255,250,243,.06) 34%,rgba(255,249,241,.13) 62%,rgba(255,249,241,.28) 100%),
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.2),transparent 46%)
}
.hero .grid>div:first-child{
  border-color:rgba(151,92,58,.11);
  background:rgba(255,253,249,.66);
  box-shadow:0 22px 54px rgba(105,71,48,.09),inset 0 1px 0 rgba(255,255,255,.68);
  -webkit-backdrop-filter:blur(8px) saturate(106%);
  backdrop-filter:blur(8px) saturate(106%)
}
.hero .grid>div:first-child::before{border-color:rgba(198,139,96,.08)}

@media(max-width:860px){
  .hero::before{
    inset:0;
    height:auto;
    background-size:cover;
    background-position:center 46%;
    opacity:.9
  }
  .hero::after{
    background:linear-gradient(180deg,rgba(255,251,245,.16) 0%,rgba(255,249,241,.07) 48%,rgba(255,249,241,.24) 100%)
  }
  .hero .grid>div:first-child{background:rgba(255,253,249,.72)}
}

@media(max-width:640px){
  .hero::before{
    inset:0;
    height:auto;
    background-size:auto 152%;
    background-position:center top
  }
  .hero .grid>div:first-child{
    background:rgba(255,253,249,.76);
    box-shadow:0 18px 42px rgba(105,71,48,.1)
  }
}

/* --- 2026-08-12 open cloud hero layout --- */
.hero .grid{gap:clamp(124px,10.5vw,168px)}
.hero .grid>div:first-child{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none
}
.hero .grid>div:first-child::before{display:none}
.hero .grid>div:first-child>.kicker{margin:0 0 2px 12px}
.hero h1{
  align-self:stretch;
  margin:0;
  padding:clamp(30px,3.2vw,44px) clamp(28px,3.4vw,46px);
  border:1px solid rgba(151,92,58,.1);
  border-radius:26px;
  background:rgba(255,253,249,.67);
  box-shadow:0 20px 46px rgba(96,65,47,.09),inset 0 1px 0 rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(8px) saturate(106%);
  backdrop-filter:blur(8px) saturate(106%)
}
.hero p{
  max-width:none;
  padding:25px 27px;
  border:1px solid rgba(151,92,58,.09);
  border-radius:21px;
  background:rgba(255,253,249,.61);
  box-shadow:0 16px 36px rgba(96,65,47,.075);
  -webkit-backdrop-filter:blur(7px) saturate(105%);
  backdrop-filter:blur(7px) saturate(105%)
}
.hero .tags{align-self:start;margin-top:10px}
.hero .tags span{background:rgba(255,253,249,.7)}
.hero .img{
  width:min(100%,1100px);
  justify-self:center;
  border:8px solid rgba(255,252,247,.72);
  box-shadow:0 34px 80px rgba(91,61,43,.2),0 8px 24px rgba(91,61,43,.11)
}

/* Services: calm sage and ivory */
#services{
  background:#eef1e7;
  border-color:#d8dfcb
}
#services .kicker{color:#6e7959}
#services h2.sec{color:#3f4938}
#services .lead{color:#6f7568}
#services .svc .c{
  border-color:rgba(108,122,87,.16);
  border-top-color:#89966f;
  background:rgba(255,255,249,.78);
  box-shadow:0 12px 28px rgba(67,79,54,.065)
}
#services .svc .c:nth-child(2n){background:#f8f5e8;border-top-color:#a9b48d}
#services .svc .c:nth-child(3n){background:#e8eddf;border-top-color:#788566}
#services .svc .c:hover{border-color:#98a57d;box-shadow:0 17px 36px rgba(67,79,54,.11)}
#services .svc .c h3{color:#46513d}
#services .svc .c p{color:#6f7568}

/* Why Momoria: warm peach and apricot */
.pride{
  background:#f6dfd2;
  border-color:#e9c8b6
}
.pride .kicker{color:#a4573b}
.pride h2.sec{color:#59382d}
.pride-item{
  border-color:rgba(164,87,58,.13);
  background:rgba(255,251,246,.84);
  box-shadow:0 12px 28px rgba(112,63,43,.07)
}
.pride-item:nth-child(2){background:#f9e9df}
.pride-item:nth-child(3){background:#fff1e2}
.pride-item:nth-child(4){background:#f3d5c5}
.pride-no{background:#a85f43;color:#fffaf5}
.pride-item h3{color:#59392e}

@media(max-width:860px){
  .hero .grid{gap:128px}
  .hero .grid>div:first-child{row-gap:14px}
  .hero .grid>div:first-child>.kicker{margin:0 0 3px 9px}
  .hero h1{
    margin:0;
    padding:30px 28px;
    border-radius:23px;
    background:rgba(255,253,249,.7)
  }
  .hero p{
    margin:0;
    padding:23px 25px;
    border-radius:19px;
    background:rgba(255,253,249,.65)
  }
  .hero .tags{margin-top:6px}
  .hero .img{width:min(94%,720px);border-width:6px}
}

@media(max-width:640px){
  .hero .grid{gap:122px}
  .hero h1{margin:0;padding:26px 22px;border-radius:20px}
  .hero p{padding:20px 21px;border-radius:18px}
  .hero .tags{margin-top:4px}
  .hero .img{width:94%;border-width:5px}
}

/* --- 2026-08-12 restore text-left / image-right hero --- */
@media(min-width:861px){
  .hero{padding:84px 0 92px}
  .hero .grid{
    grid-template-columns:minmax(0,1.08fr) minmax(380px,.82fr);
    gap:clamp(40px,5vw,72px);
    align-items:center
  }
  .hero .grid>div:first-child{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    max-width:680px;
    padding:clamp(32px,3.2vw,46px);
    border:1px solid rgba(151,92,58,.1);
    border-radius:28px;
    background:rgba(255,253,249,.64);
    box-shadow:0 22px 54px rgba(96,65,47,.09),inset 0 1px 0 rgba(255,255,255,.68);
    -webkit-backdrop-filter:blur(8px) saturate(106%);
    backdrop-filter:blur(8px) saturate(106%)
  }
  .hero .grid>div:first-child>.kicker{margin:0 0 18px}
  .hero h1{
    width:auto;
    max-width:10.5em;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    font-size:clamp(40px,4.25vw,64px)
  }
  .hero p{
    width:100%;
    max-width:39ch;
    margin:26px 0 0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none
  }
  .hero .tags{margin-top:26px}
  .hero .tags span{background:rgba(255,253,249,.76)}
  .hero .img{
    width:min(100%,500px);
    justify-self:end;
    align-self:center;
    border-width:6px;
    border-radius:24px;
    box-shadow:0 28px 68px rgba(91,61,43,.18),0 7px 20px rgba(91,61,43,.1)
  }
}

@media(max-width:860px){
  .hero .grid{
    grid-template-columns:1fr;
    gap:108px
  }
  .hero .grid>div:first-child{
    display:flex;
    flex-direction:column;
    align-items:flex-start
  }
  .hero .img{width:min(88%,620px)}
}

@media(max-width:640px){
  .hero .grid{gap:104px}
  .hero .img{width:88%}
}

/* --- 2026-08-12 airy hero: reveal more cloud artwork --- */
.pride{
  background:#faece5;
  border-color:#efd8cc
}

@media(min-width:861px){
  .hero .grid{
    grid-template-columns:minmax(0,1fr) minmax(350px,.72fr);
    gap:clamp(64px,7vw,104px)
  }
  .hero .grid>div:first-child{
    max-width:620px;
    padding:clamp(28px,2.8vw,40px);
    border-color:rgba(255,255,255,.44);
    background:linear-gradient(135deg,rgba(255,253,249,.47),rgba(255,250,243,.34));
    box-shadow:0 20px 48px rgba(96,65,47,.075),inset 0 1px 0 rgba(255,255,255,.56);
    -webkit-backdrop-filter:blur(5px) saturate(104%);
    backdrop-filter:blur(5px) saturate(104%)
  }
  .hero h1{
    text-shadow:0 2px 0 rgba(255,255,255,.62),0 8px 24px rgba(77,49,36,.1)
  }
  .hero p{
    color:#5e493f;
    text-shadow:0 1px 0 rgba(255,255,255,.5)
  }
  .hero .tags span{
    background:rgba(255,253,249,.58);
    box-shadow:0 6px 15px rgba(92,60,42,.055)
  }
  .hero .img{
    width:min(100%,460px);
    border:5px solid rgba(255,252,247,.62);
    box-shadow:0 24px 58px rgba(91,61,43,.16),0 6px 18px rgba(91,61,43,.085)
  }
}

@media(max-width:860px){
  .hero h1{
    background:rgba(255,253,249,.52);
    box-shadow:0 17px 40px rgba(96,65,47,.075);
    -webkit-backdrop-filter:blur(5px) saturate(104%);
    backdrop-filter:blur(5px) saturate(104%)
  }
  .hero p{
    background:rgba(255,253,249,.46);
    box-shadow:0 13px 31px rgba(96,65,47,.06);
    -webkit-backdrop-filter:blur(5px) saturate(104%);
    backdrop-filter:blur(5px) saturate(104%)
  }
  .hero .tags span{background:rgba(255,253,249,.58)}
  .hero .img{width:min(82%,560px)}
}

@media(max-width:640px){
  .hero .img{width:82%}
}

/* --- 2026-08-12 place cloud dogs below hero content --- */
.hero::before{
  background-size:cover;
  background-position:center 18%
}
.hero::after{
  background:
    linear-gradient(180deg,rgba(255,252,247,.18) 0%,rgba(255,250,243,.04) 36%,rgba(255,249,241,.07) 74%,rgba(255,249,241,.16) 100%),
    radial-gradient(circle at 50% 8%,rgba(255,255,255,.2),transparent 44%)
}

@media(min-width:861px){
  .hero{
    min-height:800px;
    padding:72px 0 250px
  }
  .hero .grid{
    align-items:start;
    gap:clamp(62px,7vw,106px)
  }
  .hero .grid>div:first-child{
    max-width:600px;
    padding:clamp(26px,2.5vw,36px)
  }
  .hero .grid>div:first-child>.kicker{margin-bottom:14px}
  .hero h1{font-size:clamp(38px,3.85vw,58px)}
  .hero p{margin-top:22px}
  .hero .tags{margin-top:22px}
  .hero .img{
    width:min(100%,440px);
    margin-top:68px
  }
}

@media(max-width:860px){
  .hero{
    min-height:1050px;
    padding-bottom:240px
  }
  .hero::before{
    background-size:auto 125%;
    background-position:center top
  }
  .hero .grid{gap:48px}
  .hero .img{width:min(78%,520px)}
}

@media(max-width:640px){
  .hero{
    min-height:980px;
    padding-bottom:210px
  }
  .hero::before{
    background-size:auto 162%;
    background-position:center top
  }
  .hero .grid{gap:42px}
  .hero .img{width:78%}
}

/* --- 2026-08-12 larger main photo / stronger dog focus --- */
.hero::before{
  background-size:auto 112%;
  background-position:center top;
  opacity:.98;
  filter:saturate(1.06) contrast(1.035)
}
.hero::after{
  background:
    linear-gradient(180deg,rgba(255,252,247,.14) 0%,rgba(255,250,243,.025) 36%,rgba(255,249,241,.035) 75%,rgba(255,249,241,.1) 100%),
    radial-gradient(circle at 50% 7%,rgba(255,255,255,.15),transparent 42%)
}

@media(min-width:861px){
  .hero{
    min-height:820px;
    padding:72px 0 250px
  }
  .hero .grid{
    grid-template-columns:minmax(0,.98fr) minmax(430px,.92fr);
    gap:clamp(46px,5vw,78px)
  }
  .hero .img{
    width:min(100%,540px);
    margin-top:46px
  }
}

@media(max-width:860px){
  .hero::before{
    background-size:auto 158%;
    background-position:center top
  }
  .hero .img{width:min(90%,620px)}
}

@media(max-width:640px){
  .hero::before{
    background-size:auto 170%;
    background-position:center top
  }
  .hero .img{width:90%}
}

@media(min-width:861px){
  .hero::before{
    background-size:cover;
    background-position:center 18%
  }
}

/* --- 2026-08-12 premium responsive dog artwork --- */
.hero::before{
  background-image:url('../img/hero-dogs-premium-wide-20260812.jpg');
  background-size:cover;
  background-position:center bottom;
  opacity:1;
  filter:none
}
.hero::after{
  background:
    linear-gradient(180deg,rgba(255,252,247,.12) 0%,rgba(255,250,243,.025) 52%,rgba(255,249,241,.055) 100%),
    radial-gradient(circle at 50% 8%,rgba(255,255,255,.12),transparent 44%)
}

@media(min-width:861px){
  .hero{
    min-height:790px;
    padding:68px 0 230px
  }
  .hero::before{
    background-size:cover;
    background-position:center bottom
  }
  .hero .grid>div:first-child{
    background:linear-gradient(135deg,rgba(255,253,249,.56),rgba(255,250,243,.4));
    -webkit-backdrop-filter:blur(6px) saturate(105%);
    backdrop-filter:blur(6px) saturate(105%)
  }
  .hero .img{margin-top:40px}
}

@media(max-width:860px){
  .hero{
    min-height:1040px;
    padding-bottom:260px
  }
  .hero::before{
    background-image:url('../img/hero-dogs-premium-mobile-20260812.jpg');
    background-size:cover;
    background-position:center bottom
  }
  .hero::after{
    background:linear-gradient(180deg,rgba(255,251,246,.12) 0%,rgba(255,250,244,.02) 58%,rgba(255,249,241,.045) 100%)
  }
}

@media(max-width:640px){
  .hero{
    min-height:1040px;
    padding-bottom:245px
  }
  .hero::before{
    background-size:cover;
    background-position:center bottom
  }
}

/* --- 2026-08-12 premium artwork final positioning --- */
.hero::before{
  background-image:url('../img/hero-dogs-premium-wide-v2-20260812.jpg')
}

@media(min-width:861px){
  .hero{
    min-height:800px;
    padding:62px 0 205px
  }
  .hero .grid>div:first-child{
    max-width:590px;
    padding:30px 34px
  }
  .hero h1{font-size:clamp(37px,3.65vw,55px)}
  .hero p{margin-top:18px}
  .hero .tags{margin-top:18px}
  .hero .img{
    width:min(100%,540px);
    margin-top:32px
  }
}

@media(max-width:860px){
  .hero{
    min-height:1050px;
    padding-bottom:235px
  }
  .hero::before{
    background-image:url('../img/hero-dogs-premium-mobile-v2-20260812.jpg')
  }
}

@media(max-width:640px){
  .hero{
    min-height:1040px;
    padding-bottom:225px
  }
}

/* --- 2026-08-12 open hero copy / larger main photo --- */
.hero .grid>div:first-child{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none
}
.hero .grid>div:first-child::before{display:none}
.hero h1,
.hero p{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none
}
.hero h1{
  text-shadow:0 2px 0 rgba(255,255,255,.72),0 7px 20px rgba(83,53,38,.12)
}
.hero p{
  text-shadow:0 1px 0 rgba(255,255,255,.72),0 4px 14px rgba(83,53,38,.08)
}

@media(min-width:861px){
  .hero .grid{
    grid-template-columns:minmax(0,.92fr) minmax(500px,1fr);
    gap:clamp(40px,4.5vw,68px)
  }
  .hero .grid>div:first-child{
    max-width:620px;
    padding:0
  }
  .hero .img{
    width:min(100%,640px);
    margin-top:32px
  }
}

@media(max-width:860px){
  .hero .img{width:min(100%,680px)}
}

@media(max-width:640px){
  .hero .img{width:100%}
}

/* --- 2026-08-13 translucent instant-photo / single corner tape --- */
html body .hero .grid>.img{
  width:min(100%,420px)!important;
  max-width:420px!important;
  aspect-ratio:6/5;
  justify-self:end;
  margin-top:18px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  rotate:-2.05deg
}
.hero .img::before{
  content:none;
  display:none
}
.hero .img::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  right:-18px;
  bottom:auto;
  left:auto;
  width:92px;
  height:32px;
  border:0;
  border-radius:2px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.13) 0 1px,transparent 1px 4px),
    linear-gradient(90deg,rgba(220,194,147,.82),rgba(242,219,176,.9) 55%,rgba(204,174,123,.82));
  box-shadow:0 3px 8px rgba(89,62,43,.11);
  clip-path:polygon(2% 9%,97% 0,100% 86%,6% 100%,0 82%);
  transform:rotate(42deg);
  opacity:.84;
  pointer-events:none
}
.hero .img img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  box-sizing:border-box;
  border:10px solid rgba(255,249,240,.64);
  border-bottom-width:22px;
  border-radius:4px;
  object-fit:cover;
  object-position:50% 55%;
  filter:saturate(.92) contrast(.99) brightness(1.035);
  box-shadow:
    0 20px 44px rgba(91,61,43,.16),
    0 5px 12px rgba(91,61,43,.09),
    inset 0 0 0 1px rgba(255,255,255,.18)
}

@media(min-width:861px){
  .hero .grid{
    grid-template-columns:minmax(0,1fr) minmax(360px,.68fr);
    gap:clamp(64px,7vw,112px);
    align-items:start
  }
}

@media(max-width:860px){
  html body .hero .grid>.img{
    width:min(82%,350px)!important;
    max-width:350px!important;
    aspect-ratio:6/5;
    justify-self:center;
    margin-top:8px;
    rotate:-1.45deg
  }
  .hero .img::after{
    top:0;
    right:-14px;
    width:74px;
    height:27px;
    transform:rotate(40deg)
  }
  .hero .img img{border-width:8px;border-bottom-width:18px;border-radius:3px}
}

@media(max-width:640px){
  html body .hero .grid>.img{width:min(82%,320px)!important;max-width:320px!important}
}


/* --- 2026-08-13 funeral guide and pricing --- */
.funeral-guide{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% 8%,rgba(226,180,139,.18),transparent 28%),
    linear-gradient(180deg,#fffaf4 0%,#fffdf9 100%);
  border-top:1px solid #efd9ca;
  border-bottom:1px solid #efd9ca
}
.funeral-guide::before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  left:-190px;
  bottom:-230px;
  border:1px solid rgba(173,105,70,.11);
  border-radius:50%;
  box-shadow:0 0 0 42px rgba(173,105,70,.035),0 0 0 84px rgba(173,105,70,.025);
  pointer-events:none
}
.funeral-guide .wrap{position:relative;z-index:1}
.funeral-head{max-width:760px;margin-bottom:42px}
.funeral-head .lead{max-width:650px;line-height:1.8}
.funeral-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px
}
.funeral-card{
  position:relative;
  min-width:0;
  padding:30px 30px 28px;
  border:1px solid rgba(171,103,69,.17);
  border-radius:23px;
  background:rgba(255,255,255,.82);
  box-shadow:0 14px 36px rgba(100,65,46,.07);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease
}
.funeral-card:hover{
  transform:translateY(-3px);
  border-color:rgba(161,88,55,.3);
  box-shadow:0 20px 44px rgba(100,65,46,.11)
}
.funeral-card h3{
  margin:14px 0 22px;
  color:#57382d;
  font-family:'MaruBuri','NanumSquareNeo',serif;
  font-size:clamp(21px,2vw,27px);
  line-height:1.3
}
.funeral-card h3 small{
  display:inline-flex;
  margin-left:8px;
  padding:5px 10px;
  border-radius:999px;
  background:#f5e5d8;
  color:#9a5a3d;
  font-family:'NanumSquareNeo',sans-serif;
  font-size:12px;
  font-weight:700;
  vertical-align:middle
}
.funeral-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#a66042;
  color:#fffaf5;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em
}
.funeral-card ul{list-style:none;margin:0;padding:0}
.funeral-price-list li{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:13px 0;
  border-bottom:1px dashed rgba(153,99,69,.19);
  color:#73594c;
  line-height:1.5
}
.funeral-price-list li:first-child{padding-top:0}
.funeral-price-list li:last-child{padding-bottom:0;border-bottom:0}
.funeral-price-list strong{
  flex:0 0 auto;
  color:#8e4e34;
  font-size:15px;
  font-weight:800;
  white-space:nowrap
}
.funeral-note{
  margin:22px 0 0;
  padding-top:17px;
  border-top:1px solid rgba(153,99,69,.12);
  color:#927a6d;
  font-size:13px;
  line-height:1.65
}
.funeral-card-featured{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(240px,.72fr) auto;
  align-items:center;
  gap:34px;
  padding:34px 36px;
  color:#fff;
  border-color:transparent;
  background:linear-gradient(128deg,#8e5038 0%,#a96747 58%,#bc805a 100%);
  box-shadow:0 20px 46px rgba(104,59,40,.2)
}
.funeral-card-featured:hover{
  border-color:transparent;
  box-shadow:0 26px 54px rgba(104,59,40,.25)
}
.funeral-card-main{display:flex;align-items:flex-start;gap:18px;min-width:0}
.funeral-card-featured .funeral-no{
  flex:0 0 auto;
  background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.25)
}
.funeral-card-featured h3{margin:0 0 10px;color:#fff;font-size:clamp(24px,2.3vw,32px)}
.funeral-card-featured h3 small{background:rgba(255,255,255,.16);color:#fff}
.funeral-card-featured p{margin:0;color:rgba(255,255,255,.78);line-height:1.7}
.funeral-card-featured>ul{
  padding:5px 0 5px 24px;
  border-left:1px solid rgba(255,255,255,.2)
}
.funeral-card-featured>ul li{
  position:relative;
  padding:5px 0 5px 17px;
  color:rgba(255,255,255,.9);
  font-size:14px
}
.funeral-card-featured>ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#f8dac5
}
.funeral-price{
  display:flex;
  align-items:baseline;
  gap:4px;
  min-width:158px;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.23);
  border-radius:18px;
  background:rgba(255,255,255,.13);
  white-space:nowrap
}
.funeral-price strong{font-size:28px;letter-spacing:-.03em}
.funeral-price span{font-size:14px;font-weight:700}
.funeral-footnote{
  margin:24px 2px 0;
  color:#91786b;
  font-size:13px;
  line-height:1.7
}
@media(max-width:860px){
  .funeral-grid{gap:16px}
  .funeral-card{padding:26px 24px}
  .funeral-card-featured{
    grid-template-columns:1fr auto;
    gap:24px
  }
  .funeral-card-main{grid-column:1/-1}
  .funeral-card-featured>ul{border-left:0;padding-left:0}
}
@media(max-width:640px){
  .funeral-head{margin-bottom:30px}
  .funeral-grid{grid-template-columns:1fr}
  .funeral-card,.funeral-card-featured{grid-column:auto}
  .funeral-card-featured{display:block;padding:28px 24px}
  .funeral-card-main{display:block}
  .funeral-card-featured .funeral-no{margin-bottom:15px}
  .funeral-card-featured>ul{margin-top:20px;padding-top:17px;border-top:1px solid rgba(255,255,255,.18)}
  .funeral-price{width:max-content;margin-top:22px;padding:15px 18px}
  .funeral-price-list li{gap:14px}
}

.ft-registration{margin-top:8px;font-size:13px;line-height:1.75;color:#cfbfb3}