:root{--ink:#0b3b40;--ink2:#082b2f;--sea:#2f7f8c;--lamp:#f0b957;--mist:#eef3f1;--paper:#fbfcfb;--text:#1c2b2c;--mute:#58696a;--line:#d5e0dd;--tbd:#fff0b3;
--serif:'Noto Serif KR','Batang',serif;--sans:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',system-ui,sans-serif}
*{box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html[data-size=large]{font-size:21px}
html[data-size=xlarge]{font-size:24px}
body{margin:0;font-family:var(--sans);line-height:1.75;color:var(--text);background:var(--paper);padding-bottom:calc(5rem + env(safe-area-inset-bottom));word-break:keep-all;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
[id]{scroll-margin-top:5.2rem}
a{color:var(--ink)}
.wrap{width:min(1080px,100% - 2rem);margin-inline:auto}
.narrow{width:min(720px,100% - 2rem)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:100}
.skip:focus{left:0}
.draft{background:#ffe27a;color:#4a3b00;text-align:center;font-size:.8rem;padding:.4rem 1rem}
.tbd{background:var(--tbd);outline:1px dashed #b38b00;padding:0 .15em;color:inherit}
/* 헤더 */
.hd{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:1rem;min-height:3.6rem}
.logo{display:flex;flex-direction:column;line-height:1.1;text-decoration:none;color:var(--ink);margin-right:auto}
.logo b{font-family:var(--serif);font-size:1.25rem;letter-spacing:.1em}
.logo span{font-size:.72rem;color:var(--mute)}
.nav{display:flex;gap:.2rem;align-items:center}
.nav a{padding:.55rem .7rem;text-decoration:none;color:var(--text);font-size:.9rem}
.nav a[aria-current=page]{color:var(--ink);font-weight:700;box-shadow:inset 0 -3px var(--lamp)}
.nav a:hover{background:var(--mist)}
.nav .nav-cta{background:var(--ink);color:#fff;font-weight:700;border-radius:6px;margin-left:.3rem}
.hd-tools{display:flex;gap:.5rem;align-items:center}
.fs{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.fs button{border:0;background:var(--paper);color:var(--text);min-width:2.4rem;min-height:2.4rem;cursor:pointer;font-weight:700}
.fs button:nth-child(1){font-size:.8rem}.fs button:nth-child(2){font-size:1rem}.fs button:nth-child(3){font-size:1.25rem}
.fs button[aria-pressed=true]{background:var(--ink);color:#fff}
.menu{display:none;border:1px solid var(--line);background:var(--paper);min-height:2.4rem;padding:0 .8rem;border-radius:6px;font:inherit;font-size:.9rem;cursor:pointer}
@media (max-width:900px){
  .menu{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:.5rem 1rem 1rem}
  .nav.open{display:flex}
  .nav a{padding:.9rem .6rem;font-size:1rem}
  .nav .nav-cta{margin:.4rem 0 0;text-align:center}
}
/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.2rem;padding:.7rem 1.6rem;border-radius:6px;font:inherit;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-main{background:var(--ink);color:#fff}
.btn-main:hover{background:var(--ink2)}
.btn-lamp{background:var(--lamp);color:var(--ink2)}
.btn-lamp:hover{background:#f6c970}
.btn-ghost{border-color:rgba(255,255,255,.75);color:#fff}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-submit{width:100%;margin-top:.8rem;min-height:3.4rem;font-size:1.05rem}
:focus-visible{outline:3px solid #f2a900;outline-offset:2px}
/* 제목 */
.h2{margin:0 0 1rem;font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,5vw,2.2rem);line-height:1.35;letter-spacing:-.03em;color:var(--ink)}
.h3{margin:1.6rem 0 .6rem;font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.lead{margin:0 0 1.4rem;color:var(--mute);font-size:1.02rem}
/* 첫 화면: 사진은 어둡게 덮지 않고 그대로 보이며 천천히 자리 잡고, 글은 밝은 바탕 위에 둔다 */
.hero{background:var(--paper);color:var(--ink)}
.hero-pic{position:relative;overflow:hidden;height:clamp(14rem,40svh,38rem);background:#cfe0dc}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform:scale(1.16);animation:settle 16s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes settle{to{transform:scale(1)}}
/* 연못 물결: 사진 맨 아래 띠만 같은 사진을 겹쳐 일렁이게 한다(왼쪽 연못 쪽에만 보이도록 가장자리를 흐리게) */
.water{position:absolute;left:0;right:0;bottom:0;height:16%;overflow:hidden;pointer-events:none;
  filter:url(#ripple);animation:glint 6s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%),linear-gradient(to right,#000 46%,transparent 72%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 45%),linear-gradient(to right,#000 46%,transparent 72%);
  mask-composite:intersect}
.water img{position:absolute;left:0;bottom:0;width:100%;height:calc(100% / .16);max-width:none;object-fit:cover;object-position:50% 100%;transform:scale(1.16);animation:settle 16s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes glint{from{filter:url(#ripple) brightness(1)}to{filter:url(#ripple) brightness(1.1)}}
.hero-txt{position:relative;padding:1.8rem 0 2.4rem;border-top:4px solid var(--lamp)}
.eyebrow{margin:0 0 .6rem;font-size:.95rem;color:var(--sea);font-weight:500;opacity:0;animation:fade 1s .2s forwards}
.hero h1{margin:0 0 1rem;font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,7vw,3.4rem);line-height:1.3;letter-spacing:-.04em;color:var(--ink)}
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln>span{display:block;transform:translateY(108%);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.ln:nth-child(2)>span{animation-delay:.2s}
@keyframes rise{to{transform:none}}
@keyframes fade{to{opacity:1}}
.hero-sub{margin:0 0 1.4rem;max-width:32rem;font-size:1.05rem;color:var(--text);opacity:0;animation:fade 1s .9s forwards}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;opacity:0;animation:fade 1s 1.15s forwards}
.hero-note{margin:1rem 0 0;font-size:.9rem;color:var(--mute);opacity:0;animation:fade 1s 1.4s forwards}
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch;min-height:min(86svh,44rem)}
  .hero-pic{height:auto;min-height:100%}
  .hero-txt{align-self:center;width:auto;margin:0;padding:3rem 3rem 3rem 3.4rem;border-top:0;border-left:4px solid var(--lamp)}
}
/* 숫자 */
.stats{background:var(--mist);color:var(--ink);border-bottom:1px solid var(--line)}
.stats ul{list-style:none;margin:0;padding:1.6rem 0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem 1rem}
@media (min-width:760px){.stats ul{grid-template-columns:repeat(4,1fr)}}
.stats li{text-align:left;border-left:3px solid var(--lamp);padding-left:.9rem}
.stats b{display:block;font-family:var(--serif);font-size:2rem;line-height:1.2;color:var(--ink)}
.stats span{font-size:.88rem;color:var(--mute)}
/* 섹션 */
.sec{padding:3.2rem 0}
.sec.alt{background:var(--mist)}
.sec.soft{background:#e6efec}
.two{display:grid;gap:1.6rem;align-items:center}
@media (min-width:820px){.two{grid-template-columns:1fr 1fr;gap:2.6rem}}
.ticks{margin:0 0 1.2rem;padding:0;list-style:none}
.ticks li{position:relative;padding:.2rem 0 .2rem 1.5rem}
.ticks li::before{content:"";position:absolute;left:.1rem;top:.85em;width:.6rem;height:.35rem;border-left:3px solid var(--sea);border-bottom:3px solid var(--sea);transform:rotate(-45deg)}
.ticks.big li{font-size:1.1rem;padding:.4rem 0 .4rem 1.6rem}
.small{font-size:.85rem;color:var(--mute)}
/* 사진: 눌러서 크게, 화면에 들어오면 천천히 자리 잡기 */
.media{position:relative;overflow:hidden;background:var(--line);cursor:zoom-in}
.media img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;transform:scale(1.09);transition:transform 1.8s cubic-bezier(.2,.6,.2,1)}
.media.in img{transform:none}
/* 공식 홈페이지 이미지(작은 파일은 늘리지 않고 그대로) */
.oimg{margin:0;cursor:zoom-in;background:#fff;border:1px solid var(--line)}
.oimg img{width:100%;height:auto}
.oimg figcaption{padding:.35rem .6rem;font-size:.8rem;color:var(--mute);background:var(--paper)}
.othumbs{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr);margin:1rem 0}
@media (min-width:760px){.othumbs{grid-template-columns:repeat(3,1fr)}}
.oimgrow{margin-top:1.4rem}
/* 영상(누르면 그때 유튜브를 불러온다) */
.vbox{position:relative;display:block;width:100%;padding:0;border:0;background:#000;cursor:pointer;aspect-ratio:16/9;overflow:hidden}
.vbox img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.vbox:hover img{transform:scale(1.04)}
.vbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vplay-ic{position:absolute;left:50%;top:50%;width:4.4rem;height:4.4rem;margin:-2.2rem 0 0 -2.2rem;border-radius:50%;background:rgba(240,185,87,.95)}
.vplay-ic::after{content:"";position:absolute;left:1.7rem;top:1.25rem;border-left:1.3rem solid var(--ink2);border-top:.95rem solid transparent;border-bottom:.95rem solid transparent}
/* 라우어의 하루: 이 현장의 고유 요소. 왼쪽 띠는 24시간 간호인력, 오른쪽은 실제 운영 시간 */
.day{display:grid;grid-template-columns:3rem 1fr;gap:0 1.2rem;margin:1.6rem 0 1rem}
.rail{position:relative;background:linear-gradient(180deg,var(--sea),var(--ink));transform-origin:top;transform:scaleY(0);transition:transform 2.6s cubic-bezier(.3,.6,.2,1)}
.day.in .rail{transform:scaleY(1)}
.rail span{position:absolute;inset:0;display:grid;place-items:center;writing-mode:vertical-rl;color:#fff;font-size:.9rem;letter-spacing:.25em;opacity:0;transition:opacity .8s 1.6s}
.day.in .rail span{opacity:1}
.slots{list-style:none;margin:0;padding:0}
.slots li{display:grid;grid-template-columns:6.2rem 1fr;gap:.2rem .9rem;padding:.9rem 0;border-bottom:1px solid var(--line);opacity:0;transform:translateX(-10px);transition:opacity .7s,transform .7s;transition-delay:calc(var(--i)*.3s + .3s)}
.day.in .slots li{opacity:1;transform:none}
.slots time{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:1.02rem;white-space:nowrap}
.slots p{margin:0}
@media (max-width:520px){.slots li{grid-template-columns:1fr}}
/* 소개 줄 */
.feat{display:grid;gap:1.1rem;margin:0 0 3rem;align-items:center}
.feat:last-child{margin-bottom:0}
@media (min-width:820px){.feat{grid-template-columns:7fr 5fr;gap:2.6rem}.feat.flip{grid-template-columns:5fr 7fr}.feat.flip .media{order:2}}
.feat h3{margin:0 0 .6rem;font-family:var(--serif);font-size:1.45rem;line-height:1.4;letter-spacing:-.03em;color:var(--ink)}
.feat p{margin:0 0 .8rem}
.more{font-weight:700;color:var(--ink);text-decoration:none;border-bottom:3px solid var(--lamp);padding-bottom:.1rem}
.box{background:var(--paper);border:1px solid var(--line);padding:1.1rem 1.2rem}
.box h3{margin:0 0 .3rem;font-size:1.05rem;color:var(--ink)}
.box p{margin:0;font-size:.95rem}
.box.wide{margin-top:1rem}
.grid3{display:grid;gap:1rem}
@media (min-width:760px){.grid3{grid-template-columns:repeat(3,1fr)}}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1rem 0;padding:0}
.chips li{background:var(--paper);border:1px solid var(--line);padding:.3rem .9rem;font-size:.9rem}
.gal{display:grid;gap:.8rem;margin:1.2rem 0}
@media (min-width:760px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal img{aspect-ratio:3/2}
/* 서브 페이지 머리 */
.phead{position:relative;color:#fff;min-height:15rem;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink2)}
.phead-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:settle 10s cubic-bezier(.2,.6,.2,1) forwards}
.phead-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,43,47,0) 35%,rgba(8,43,47,.62) 100%)}
.phead-txt{position:relative;padding:3rem 0 1.6rem}
.phead h1{margin:0 0 .3rem;font-family:var(--serif);font-size:clamp(1.7rem,5.4vw,2.5rem);letter-spacing:-.03em}
.phead p{margin:0;color:#e6f1ee}
/* 건강 5단계 */
.steps{list-style:none;margin:1.2rem 0;padding:0;display:grid;gap:1rem}
@media (min-width:900px){.steps{grid-template-columns:repeat(5,1fr)}}
.steps>li{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--sea);padding:1rem}
.steps h3{margin:.2rem 0 .5rem;font-size:1.05rem;color:var(--ink)}
.steps ul{margin:0;padding-left:1.1rem;font-size:.9rem}
.step-e{font-size:.8rem;color:var(--sea);font-weight:700}
.note{background:#dcebe7;padding:1rem 1.2rem}
/* 표 */
.tbl-wrap{overflow-x:auto;margin:1rem 0;border:1px solid var(--line);background:var(--paper)}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;min-width:22rem}
.tbl-price{min-width:46rem;font-size:.88rem}
.tbl th,.tbl td{padding:.7rem .8rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{background:#dcebe7;color:var(--ink)}
.tbl-price th{white-space:nowrap}
.tbl .num{white-space:nowrap}
.tbl-kv th{width:7rem;white-space:nowrap}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}
.tbl small{color:var(--mute)}
.tbl-rep{min-width:0}
.tbl-rep td b{font-size:1rem}
.tbl-rep .t b{font-size:1.15rem;margin-right:.3rem}
.tbl-rep .num{white-space:normal}
@media (max-width:699px){
  .tbl-rep thead{display:none}
  .tbl-rep,.tbl-rep tbody,.tbl-rep tr,.tbl-rep td{display:block}
  .tbl-rep tr{padding:.8rem 1rem;border-bottom:1px solid var(--line)}
  .tbl-rep tr:last-child{border-bottom:0}
  .tbl-rep td{border:0;padding:.15rem 0;display:flex;justify-content:space-between;gap:1rem}
  .tbl-rep td.t{padding-bottom:.4rem}
  .tbl-rep td[data-l]::before{content:attr(data-l);color:var(--mute);flex:none;font-size:.85rem}
  .tbl-rep td[data-l]{text-align:right}
}
.cost-notes{align-items:stretch;margin-top:1rem}
.unit{padding:1.6rem 0;border-top:1px solid var(--line)}
.unit h3{margin:0 0 .4rem;font-size:1.25rem;line-height:1.35}
.unit h3 small{display:block;margin-top:.25rem;font-size:.86rem;font-weight:400;color:var(--mute)}
.unit>p{margin:0 0 .9rem;max-width:40rem}
.unit-shots{display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr)}
.unit-shots .media img{aspect-ratio:3/2}
.unit-shots.n3 .media:first-child{grid-column:1/-1}
@media (min-width:760px){.unit-shots.n4{grid-template-columns:repeat(4,1fr)}.unit-shots.n3{grid-template-columns:repeat(3,1fr)}.unit-shots.n3 .media:first-child{grid-column:auto}}
.unit details.plan{margin-top:.6rem}
/* 평면도, FAQ */
.plans{display:grid;gap:.6rem;margin:1rem 0}
details.plan,details.qa{background:var(--paper);border:1px solid var(--line);padding:0 1.1rem}
details summary{cursor:pointer;padding:1rem 0;font-weight:700;color:var(--ink);list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";float:right;font-size:1.3rem;line-height:1}
details[open] summary::after{content:"−"}
details summary span{font-weight:400;color:var(--mute);font-size:.85rem;margin-left:.5rem}
details p{margin:0 0 1rem}
.planwrap{cursor:zoom-in;margin-bottom:1rem;border:1px solid var(--line);background:#fff;overflow:hidden;max-width:46rem}
.planimg{width:100%;height:auto}
details[open] .planimg{animation:wipe 1.1s cubic-bezier(.3,.6,.2,1) both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.proc{counter-reset:p;list-style:none;margin:1rem 0;padding:0;display:grid;gap:.6rem}
@media (min-width:760px){.proc{grid-template-columns:repeat(3,1fr)}}
.proc li{counter-increment:p;background:var(--paper);border:1px solid var(--line);padding:.8rem 1rem .8rem 3.2rem;position:relative}
.proc li::before{content:counter(p);position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:1.7rem;height:1.7rem;border-radius:50%;background:var(--ink);color:#fff;font-size:.85rem;display:grid;place-items:center;font-weight:700}
.band{background:var(--ink);color:#fff;padding:2.2rem 0;text-align:center}
.band p{margin:0 0 1rem;font-family:var(--serif);font-size:1.2rem;font-weight:700}
/* 폼 */
.f{margin-bottom:1rem}
.f label{display:block;font-weight:700;margin-bottom:.3rem}
.f input,.f select,.f textarea{width:100%;min-height:3.2rem;padding:.7rem .9rem;border:2px solid var(--line);border-radius:6px;font:inherit;background:#fff;color:var(--text)}
.f textarea{min-height:6.5rem;resize:vertical}
.row2{display:grid;gap:0 1rem}
@media (min-width:640px){.row2{grid-template-columns:1fr 1fr}}
.chk{display:flex;gap:.7rem;align-items:flex-start;margin:.6rem 0;font-size:.95rem}
.chk input{width:1.4rem;height:1.4rem;margin-top:.2rem;flex:none}
.err{display:none;color:#b3261e;font-size:.85rem;margin:-.2rem 0 .8rem}
.hp{position:absolute;left:-9999px;opacity:0}
.ok{display:none;margin:1rem 0 0;padding:1rem;background:#dcebe7;color:var(--ink);font-weight:700}
.link{background:none;border:0;color:var(--ink);text-decoration:underline;font:inherit;cursor:pointer;padding:0}
/* 푸터, 하단 바, 확대 보기 */
.ft{background:var(--ink2);color:#cfe1de;padding:2rem 0 1.5rem;font-size:.85rem}
.ft a{color:#fff}
.ft .link{color:#fff}
.ft p{margin:.3rem 0}
.ft-name{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:#fff}
.ft .small{color:#9db8b4}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(251,252,251,.97);border-top:1px solid var(--line);display:flex;gap:.6rem;align-items:center;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom))}
.bar-main{flex:1;text-align:center;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;min-height:3.2rem;display:grid;place-items:center;border-radius:6px;font-size:1.05rem}
.bar-tel{color:var(--mute);font-size:.85rem;text-decoration:underline;padding:.6rem .4rem}
.lb{position:fixed;inset:0;z-index:90;background:rgba(5,25,28,.94);display:none;overflow:auto;padding:3.4rem .5rem 2rem}
.lb.on{display:block}
.lb img{max-width:none;width:max(100%,900px);margin:0 auto;background:#fff}
.lb button{position:fixed;top:.7rem;right:.7rem;z-index:2;min-height:2.6rem;padding:0 1rem;border:0;background:#fff;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
dialog{max-width:min(30rem,92vw);border:0;padding:1.4rem}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog h4{margin:0 0 .6rem}
@media print{.bar,.hd,.draft{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-img,.phead-img{transform:none}
  .water{display:none}
  .ln>span{transform:none}
  .eyebrow,.hero-sub,.hero-cta,.hero-note{opacity:1}
  .media img{transform:none}
  .rail{transform:none}.rail span,.slots li{opacity:1;transform:none}
}