:root{--navy:#17202b;--ink:#20201e;--cream:#f4f0e8;--warm:#faf8f3;--gold:#b59661;--line:#d9d4ca;--serif:'Playfair Display',serif;--sans:'Noto Sans KR',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--warm);font-family:var(--sans);font-weight:400;line-height:1.75;word-break:keep-all}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}button{font:inherit}.site-header{height:92px;padding:0 4.5vw;position:absolute;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;color:#fff;border-bottom:1px solid #ffffff30}.site-header.scrolled{position:fixed;height:72px;background:#fff;color:var(--ink);box-shadow:0 4px 20px #0000000d}.logo{display:flex;align-items:center;gap:10px;letter-spacing:.1em}.logo span{font:600 25px/1 var(--serif)}.logo small{font-size:9px;letter-spacing:.35em;border-left:1px solid currentColor;padding-left:10px}.nav{display:flex;align-items:center;gap:2vw;font-size:13px}.nav a{opacity:.9}.nav a:hover{opacity:1;color:var(--gold)}.nav-call{border:1px solid currentColor;padding:9px 18px}.menu-toggle{display:none;background:none;border:0;color:inherit}.hero{height:100svh;min-height:680px;position:relative;color:#fff}.hero-photo{position:absolute;inset:0;background:url('images/hero.webp') center 35%/cover no-repeat}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#10151ecf 0%,#10151e70 42%,transparent 74%),linear-gradient(0deg,#10151e4d,transparent 40%)}.hero-copy{position:absolute;left:9vw;top:50%;transform:translateY(-45%);max-width:720px}.eyebrow{margin:0 0 22px;font-size:11px;font-weight:600;letter-spacing:.27em;color:#876f48}.eyebrow.light{color:#dac9a8}.hero h1,.section h2,.why h2,.hours h2{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.035em}.hero h1{font-family:var(--sans);font-size:clamp(42px,5vw,76px);line-height:1.25}.hero h1 span{display:block;font-weight:300}.hero-sub{font-size:17px;margin:25px 0 38px}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:56px;padding:0 28px;font-size:13px;letter-spacing:.04em;transition:.25s}.button-light{border:1px solid #ffffff90;color:#fff}.button-light:hover{background:#fff;color:var(--navy)}.button-dark{background:var(--navy);color:#fff}.button-dark:hover{background:#2c3a4d}.button b{font-weight:500}.scroll{position:absolute;bottom:35px;right:4.5vw;font-size:8px;letter-spacing:.25em;writing-mode:vertical-rl;display:flex;align-items:center;gap:10px}.scroll span{height:55px;border-left:1px solid #fff9}.section{padding:140px max(7vw,30px);max-width:1500px;margin:auto}.section.wide{max-width:none}.intro{display:grid;grid-template-columns:1fr 1.7fr;gap:10vw;align-items:center}.intro-years{display:flex;align-items:end;justify-content:center;color:var(--navy)}.intro-years strong{font:500 clamp(120px,16vw,235px)/.8 var(--serif)}.intro-years span{font-size:11px;letter-spacing:.18em;line-height:1.6;margin:0 0 8px 14px}.section h2{font-size:clamp(34px,4vw,58px);line-height:1.35}.intro-copy>p:not(.eyebrow){max-width:620px;color:#666;font-size:15px}.quote-band{height:650px;position:relative;display:grid;grid-template-columns:1.1fr .9fr;background:var(--navy);color:#fff}.quote-photo{background:center/cover no-repeat}.quote-one{background-image:linear-gradient(#0002,#0002),url('images/family-big.webp')}.quote-band blockquote{align-self:center;margin:0;padding:7vw;font-size:clamp(25px,3vw,42px);line-height:1.65;font-weight:300}.quote-band blockquote>span{display:block;font:70px/.5 var(--serif);color:var(--gold)}.quote-band small{display:block;margin-top:35px;font-size:9px;letter-spacing:.25em;color:#bbb}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:65px}.section-head>p{font-size:14px;color:#777;margin:0}.category-tabs{display:flex;gap:22px}.category-tabs button{background:none;border:0;border-bottom:1px solid transparent;padding:8px 2px;color:#888;cursor:pointer;font-size:12px}.category-tabs button.active{color:var(--ink);border-color:var(--ink)}.gallery{background:#efebe3}.gallery-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-auto-rows:320px;gap:18px}.gallery-grid figure{margin:0;position:relative;overflow:hidden;background:#ddd;transition:.4s}.gallery-grid figure.hide{opacity:.12;filter:grayscale(1)}.gallery-grid img{transition:transform .8s}.gallery-grid figure:hover img{transform:scale(1.025)}.gallery-grid figcaption{position:absolute;left:18px;bottom:15px;color:#fff;font-size:8px;letter-spacing:.25em;text-shadow:0 1px 10px #000}.g-tall{grid-row:span 2}.g-wide{grid-column:span 2}.photo-note{margin:24px 0 0;font-size:11px;color:#827b70}.service-list{border-top:1px solid var(--line)}.service{display:grid;grid-template-columns:80px 1fr auto;gap:30px;align-items:center;padding:34px 12px;border-bottom:1px solid var(--line)}.service>span{font:22px var(--serif);color:var(--gold)}.service h3{font-size:22px;margin:0 0 6px}.service p{color:#777;font-size:13px;margin:0}.service>strong{font-weight:500;font-size:17px;min-width:160px;text-align:right}.center{text-align:center;margin-top:55px}.why{display:grid;grid-template-columns:1fr 1fr;background:var(--navy);color:#fff;min-height:820px}.why-photo{background:url('images/music-family.webp') center/cover}.why-content{padding:100px 8vw}.why-content h2{font-size:clamp(38px,4vw,58px);line-height:1.35}.why ol{list-style:none;margin:55px 0 0;padding:0;border-top:1px solid #ffffff25}.why li{display:flex;gap:25px;padding:22px 0;border-bottom:1px solid #ffffff25}.why li>b{font:18px var(--serif);color:var(--gold)}.why li strong{font-size:15px;font-weight:500}.why li p{font-size:12px;color:#aeb3b9;margin:3px 0 0}.process-grid{display:grid;grid-template-columns:repeat(5,1fr);list-style:none;margin:0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.process-grid li{padding:35px 24px;min-height:210px;border-right:1px solid var(--line)}.process-grid li:last-child{border:0}.process-grid b{font:24px var(--serif);color:var(--gold)}.process-grid h3{font-size:16px;margin:26px 0 8px}.process-grid p{font-size:12px;color:#777;margin:0}.about{display:grid;grid-template-columns:1.15fr .85fr;min-height:720px;padding:0}.about-photo{background:url('images/pet.webp') center/cover}.about-copy{padding:110px 8vw}.about-copy>p:not(.eyebrow){color:#777;font-size:14px}.about dl{display:grid;grid-template-columns:repeat(3,1fr);margin-top:55px;padding-top:28px;border-top:1px solid var(--line)}.about dl div{display:flex;flex-direction:column}.about dt{font-size:8px;letter-spacing:.18em;color:#999}.about dd{font:18px var(--serif);margin:5px 0}.philosophy{min-height:620px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:linear-gradient(#111a,#111a),url('images/friends.webp') center/cover fixed}.philosophy p{font:300 clamp(22px,3vw,42px)/1.6 var(--sans);margin:0 0 30px}.philosophy h2{font-size:14px;line-height:1.8;font-weight:400;color:#ded8cf}.location-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:7vw}.map-card{min-height:500px;position:relative;overflow:hidden;background:#e9e5dc;display:flex;flex-direction:column;align-items:center;justify-content:center}.map-lines{position:absolute;inset:-20%;opacity:.4;background:repeating-linear-gradient(26deg,transparent 0 70px,#c3beb3 72px 74px),repeating-linear-gradient(112deg,transparent 0 90px,#d2cdc3 92px 95px)}.map-pin{position:relative;z-index:2;width:54px;height:54px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--navy);color:#fff;display:grid;place-items:center}.map-pin::first-letter{transform:rotate(45deg)}.map-card strong,.map-card span{position:relative;z-index:2}.map-card strong{margin-top:25px;font:18px var(--serif)}.map-card span{font-size:11px;color:#777}.location-info h3{font-size:20px;margin-top:0}.location-info>p{color:#777;font-size:14px}.location-info ol{list-style:none;padding:0;margin:35px 0}.location-info li{padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}.location-info li b{font:14px var(--serif);color:var(--gold);margin-right:20px}.location-note{font-size:10px!important}.text-link{font-size:12px;border-bottom:1px solid;padding-bottom:5px}.hours{background:#263342;color:#fff;padding:80px 8vw;display:grid;grid-template-columns:.7fr 1fr auto;gap:6vw;align-items:center}.hours h2{font-size:45px}.hours dl{margin:0}.hours dl div{display:flex;justify-content:space-between;gap:30px;padding:11px 0;border-bottom:1px solid #ffffff24;font-size:13px}.hours dt{color:#b9c0c8}.hours dd{margin:0}footer{padding:70px 7vw 95px;background:#12181f;color:#b3b7ba;text-align:center;font-size:11px}footer .footer-logo{justify-content:center;color:#fff;margin-bottom:20px}footer p{color:#fff;font-size:13px}footer address{font-style:normal}footer>a:not(.logo){display:block;color:#fff;font-size:15px;margin:10px}footer>small{display:block;margin-top:28px;color:#676d72}.mobile-call{display:none}.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.site-header{height:72px;padding:0 22px}.nav{position:fixed;inset:0;background:var(--navy);display:flex;flex-direction:column;justify-content:center;gap:25px;font-size:17px;transform:translateX(100%);transition:.35s}.nav.open{transform:none}.menu-toggle{display:flex;position:relative;z-index:2;width:38px;height:38px;flex-direction:column;justify-content:center;gap:7px}.menu-toggle i{display:block;width:24px;border-top:1px solid currentColor}.hero{min-height:650px}.hero-photo{background-position:62% center}.hero-shade{background:linear-gradient(90deg,#10151ed9,#10151e40)}.hero-copy{left:24px;right:24px;top:53%}.hero h1{font-size:40px}.hero-sub{font-size:14px}.scroll{display:none}.section{padding:90px 24px}.intro{grid-template-columns:1fr;gap:50px}.intro-years{justify-content:flex-start}.intro-years strong{font-size:145px}.quote-band{height:auto;grid-template-columns:1fr}.quote-photo{height:480px}.quote-band blockquote{padding:65px 25px}.section-head{align-items:flex-start;flex-direction:column;margin-bottom:42px}.category-tabs{overflow-x:auto;width:100%;gap:18px}.gallery-grid{grid-template-columns:1fr;grid-auto-rows:470px}.g-tall,.g-wide{grid-row:auto;grid-column:auto}.gallery-grid figure:nth-child(n+5){display:none}.service{grid-template-columns:45px 1fr;padding:27px 0;gap:12px}.service>strong{grid-column:2;text-align:left;font-size:15px}.service p{font-size:12px}.why{grid-template-columns:1fr}.why-photo{min-height:480px}.why-content{padding:75px 24px}.process-grid{grid-template-columns:1fr}.process-grid li{min-height:0;border-right:0;border-bottom:1px solid var(--line);padding:26px 0}.process-grid h3{margin:8px 0}.about{grid-template-columns:1fr}.about-photo{min-height:470px}.about-copy{padding:80px 24px}.about dl{gap:14px}.about dd{font-size:14px}.philosophy{min-height:520px;background-attachment:scroll;padding:50px 24px}.location-grid{grid-template-columns:1fr}.map-card{min-height:360px}.hours{grid-template-columns:1fr;padding:70px 24px;gap:35px}.hours .button{display:none}.mobile-call{position:fixed;z-index:50;display:flex;align-items:center;justify-content:center;gap:15px;bottom:12px;left:12px;right:12px;height:58px;background:var(--gold);color:#fff;box-shadow:0 8px 30px #0005;font-size:13px}.mobile-call b{font-weight:500}.mobile-call span{border-right:1px solid #ffffff60;padding-right:15px}footer{padding-bottom:110px}}
@media(max-width:430px){.hero h1{font-size:35px}.button{width:100%}.section h2{font-size:32px}.quote-photo{height:400px}.gallery-grid{grid-auto-rows:420px}.service h3{font-size:19px}.why-photo,.about-photo{min-height:400px}.about dl{grid-template-columns:1fr}.about dl div{flex-direction:row;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}}

.family-guide{display:grid;grid-template-columns:.7fr 1.3fr;gap:6vw;align-items:center;background:#f4f0e8}.family-guide-copy{padding-left:max(7vw,30px)}.family-guide-copy>p:not(.eyebrow){max-width:520px;margin:25px 0 35px;color:#68645d;font-size:15px}.family-guide-image{margin:0;padding-right:max(7vw,30px)}.family-guide-image img{height:auto;object-fit:contain;box-shadow:0 22px 60px #17202b1f}.family-guide-image figcaption{margin-top:15px;color:#777168;font-size:11px;line-height:1.65}
@media(max-width:900px){.family-guide{grid-template-columns:1fr;gap:45px}.family-guide-copy{padding:0}.family-guide-image{padding:0}.family-guide-image img{width:100%;height:auto}.family-guide-image figcaption{font-size:12px}}

/* 작품의 원본 구도를 보존하는 no-crop 레이아웃 */
.hero-photo{
  background-size:contain;
  background-position:right center;
  background-color:#111923;
}
.quote-photo,
.why-photo,
.about-photo{
  background-size:contain;
  background-repeat:no-repeat;
  background-color:var(--navy);
}
.gallery-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:auto;
  align-items:start;
}
.gallery-grid figure,
.g-tall,
.g-wide{
  grid-column:auto;
  grid-row:auto;
}
.gallery-grid img{
  width:100%;
  height:auto;
  object-fit:contain;
  background:#ded8ce;
}
.gallery-grid figure:hover img{
  transform:none;
}

@media(max-width:900px){
  .hero-photo{
    background-position:center top;
  }
  .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:auto;
  }
  .gallery-grid figure:nth-child(n+5){
    display:block;
  }
}

@media(max-width:560px){
  .gallery-grid{
    grid-template-columns:1fr;
  }
  .gallery-grid figure{
    width:100%;
  }
}

.naver-map-button{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:24px;
  padding:11px 18px;
  background:#03c75a;
  color:#fff;
  font-style:normal;
  font-size:12px;
  font-weight:600;
  letter-spacing:-.02em;
  transition:transform .2s,background .2s;
}
.naver-map-button b{
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  background:#fff;
  color:#03a94f;
  font:700 14px/1 Arial,sans-serif;
}
.map-card:hover .naver-map-button{
  background:#02b351;
  transform:translateY(-2px);
}
.map-card:focus-visible{
  outline:3px solid #03c75a;
  outline-offset:4px;
}

/* 요청에 따라 대가족사진과 악기 가족사진의 위치를 교체 */
.quote-one{
  background-image:linear-gradient(#0002,#0002),url('images/music-family.webp');
}
.why-photo{
  background-image:url('images/family-big.webp');
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* 관리자에서 교체한 사진을 같은 디자인에 반영 */
.hero-photo{background-image:url('/images/hero.webp')}
.quote-one{background-image:linear-gradient(#0002,#0002),url('/images/music-family.webp')}
.why-photo{background-image:url('/images/family-big.webp')}
.about-photo{background-image:url('/images/pet.webp')}
.philosophy{background-image:linear-gradient(#111a,#111a),url('/images/friends.webp')}

/* 모든 화면에서 페이지 바깥으로 요소가 밀려나지 않도록 보호 */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-x:clip;
}
main,
.site-header,
footer,
.hero,
.quote-band,
.why,
.hours{
  width:100%;
  max-width:100%;
}
.intro>*,
.section-head>*,
.gallery-grid>*,
.service>*,
.why>*,
.process-grid>*,
.about>*,
.location-grid>*,
.hours>*,
.family-guide>*{
  min-width:0;
}
img{
  max-width:100%;
}
h1,
h2,
h3,
p,
address,
a{
  overflow-wrap:break-word;
}
.category-tabs{
  max-width:100%;
  scrollbar-width:none;
}
.category-tabs::-webkit-scrollbar{
  display:none;
}
@media(max-width:900px){
  .nav{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
}