/* 백일 스튜디오 — 아기 · 가족 사진관 워드프레스 데모 (2026-10-22 업그레이드)
   우윳빛 흰색 + 더스티 블루 · 세트 사진이 주인공 · 맨 위 워드프레스 관리자 바가 이 데모의 핵심 장치
   (같은 날 「넘기는 앨범」판도 만들었으나 사용자 「별로다 이전게 낫다」 → 이 판으로 되돌림. 앨범판은 _보관-앨범판/) */
@font-face{font-family:'P';font-weight:400;font-display:swap;src:url('../../assets/fonts/Pretendard-Regular.woff2') format('woff2')}
@font-face{font-family:'P';font-weight:600;font-display:swap;src:url('../../assets/fonts/Pretendard-SemiBold.woff2') format('woff2')}
@font-face{font-family:'P';font-weight:700;font-display:swap;src:url('../../assets/fonts/Pretendard-Bold.woff2') format('woff2')}
:root{--bg:#F7F7F4;--pap:#FFFFFF;--ink:#2B2A28;--sub:#77746E;--line:#E3E1DB;--blue:#5F7A90;--blue-l:#E7EDF1;--sage:#AEB9A6;--rose:#EEE3DE;
  --wp:#1D2327;--wpb:#2271B1;--lat:'Fraunces',serif;--pad:clamp(20px,5vw,80px);--wh:34px;--hh:66px}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--wh) + var(--hh) + 56px)}
body{font-family:'P',-apple-system,'Malgun Gothic',sans-serif;background:var(--bg);color:var(--ink);word-break:keep-all;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.k{font-family:var(--lat);font-style:italic;font-weight:400;font-size:17px;color:var(--blue)}

/* 워드프레스 관리자 바 */
.wp{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--wh);display:flex;align-items:center;gap:18px;padding:0 14px;background:var(--wp);color:#c3c4c7;font-size:12.5px}
.wp .w{width:20px;height:20px;border-radius:50%;border:1.5px solid #c3c4c7;display:flex;align-items:center;justify-content:center;font:700 11px Georgia,serif;color:#c3c4c7}
.wp span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.wp .nt b{background:#d63638;color:#fff;border-radius:9px;padding:0 6px;font-size:11px}
.wp .ed{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:3px;background:var(--wpb);color:#fff;font-size:12px;font-weight:600}
.wp .hi{margin-left:auto}
@media(max-width:760px){.wp .nt,.wp .nw,.wp .hi{display:none}.wp .ed{margin-left:auto}}
body.edit [data-ed]{outline:1.5px dashed var(--wpb);outline-offset:5px;cursor:text;border-radius:2px}
body.edit [data-ed]:focus{outline-style:solid;background:rgba(34,113,177,.06)}
.edbar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);visibility:hidden;z-index:70;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;background:var(--wp);color:#fff;border-radius:6px;font-size:13.5px;transition:transform .35s;box-shadow:0 6px 24px rgba(0,0,0,.25)}
body.edit .edbar{transform:translate(-50%,0);visibility:visible}
.edbar button{height:36px;padding:0 14px;border-radius:4px;font-size:13px;font-weight:600}
.edbar .sv{background:var(--wpb);color:#fff}.edbar .cx{background:rgba(255,255,255,.12);color:#fff}

/* 헤더 — 관리자 바 아래 · 모바일은 체크박스 드로어 */
.hd{position:fixed;top:var(--wh);left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;height:var(--hh);padding:0 var(--pad);background:rgba(247,247,244,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.lg{display:flex;align-items:center;gap:10px}
.lg svg{width:30px;height:30px;flex:none}
.lg b{font-size:19px;font-weight:700;letter-spacing:-.03em}
.lg em{font-family:var(--lat);font-style:italic;font-size:14px;color:var(--sub)}
.nvt{display:none}
.hd nav{margin-left:auto;display:flex;gap:26px;font-size:14.5px}
.hd nav a{display:inline-flex;align-items:center;min-height:40px;color:var(--sub)}
.hd nav a:hover,.hd nav a[aria-current]{color:var(--ink)}
.hd nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--blue)}
.hd .rv{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:21px;background:var(--blue);color:#fff;font-size:14px;font-weight:600}
.navbtn{display:none}
@media(max-width:900px){
  .lg em{display:none}.hd{gap:10px}.hd .rv{margin-left:auto;height:40px;padding:0 16px}
  .navbtn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;cursor:pointer}
  .navbtn i{display:block;height:1.5px;background:var(--ink);transition:transform .3s,opacity .3s}
  .hd nav{position:fixed;top:calc(var(--wh) + var(--hh));left:0;right:0;flex-direction:column;gap:0;padding:8px var(--pad) 24px;background:var(--bg);border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;visibility:hidden;transition:all .3s}
  .hd nav a{min-height:56px;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
  .nvt:checked~nav{transform:none;opacity:1;visibility:visible}
  .nvt:checked~.navbtn i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nvt:checked~.navbtn i:nth-child(2){opacity:0}
  .nvt:checked~.navbtn i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* 하위 페이지 머리 */
.ph0{padding:calc(var(--wh) + var(--hh) + clamp(48px,8vh,88px)) var(--pad) clamp(36px,6vh,56px);background:var(--pap);border-bottom:1px solid var(--line)}
.ph0 h1{font-size:clamp(34px,4vw,58px);font-weight:700;line-height:1.2;letter-spacing:-.045em;margin-top:6px}
.ph0 p{margin-top:12px;font-size:15.5px;color:var(--sub)}

/* 공통 */
.sec{padding:clamp(80px,12vh,130px) var(--pad)}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(30px,5vh,52px)}
.sh h2{font-size:clamp(28px,3.2vw,46px);font-weight:700;line-height:1.25;letter-spacing:-.045em;margin-top:6px}
.sh p{max-width:360px;font-size:14.5px;color:var(--sub)}
.sh.c{flex-direction:column;align-items:center;text-align:center}
@media(max-width:760px){.sh{flex-direction:column;align-items:flex-start}}
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:26px;border:1px solid var(--ink);font-size:14.5px;font-weight:600;background:transparent}
.btn.on{background:var(--ink);color:#fff}
.btn.bl{background:var(--blue);border-color:var(--blue);color:#fff}
.today{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--pap);border:1px solid var(--line)}
.today i{width:38px;height:38px;border-radius:50%;background:var(--blue-l);display:flex;align-items:center;justify-content:center;color:var(--blue);font-style:normal;font-family:var(--lat);font-size:18px}
.today b{display:block;font-size:15px}.today small{font-size:12.5px;color:var(--sub)}
.today .dot{width:9px;height:9px;border-radius:50%;background:#6FA383;box-shadow:0 0 0 4px rgba(111,163,131,.2)}.today.off .dot{background:#C7A889;box-shadow:none}

/* 오시는 길 */
.vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;background:var(--pap);border-top:1px solid var(--line)}
.vs h2{font-size:clamp(28px,3.2vw,44px);font-weight:700;letter-spacing:-.045em;margin-top:6px}
.vs dl{display:grid;grid-template-columns:auto 1fr;gap:0 28px;margin-top:24px}
.vs dt,.vs dd{padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px}.vs dt{color:var(--sub)}
.vs dd b{font-weight:600}
.vs .bt{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.vs .nt{margin-top:12px;font-size:12.5px;color:var(--sub)}
.map{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--blue-l);border:1px solid var(--line)}
.map img{width:100%;height:100%;object-fit:cover}
.map .pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:4px}
.map .pin b{order:-1;padding:6px 12px;border-radius:16px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 2px 8px rgba(43,42,40,.2)}
.map .pin i{width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 0 0 6px rgba(95,122,144,.3)}
.map .osm{position:absolute;right:8px;bottom:6px;font-size:10.5px;color:#444;background:rgba(255,255,255,.8);padding:1px 6px;border-radius:3px}
@media(max-width:700px){.vs{grid-template-columns:1fr}.vs .map{order:-1}}

/* 푸터 */
.ft{padding:44px var(--pad) 56px;font-size:12.5px;color:var(--sub);line-height:1.9;border-top:1px solid var(--line)}
.ft .r1{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.ft nav{display:flex;flex-wrap:wrap;gap:0 22px}
.ft nav a{display:inline-flex;align-items:center;min-height:40px;font-size:13.5px;color:var(--ink)}
/* 잇지 데모 띠 */
.itgebar{position:fixed;left:14px;bottom:14px;z-index:95;display:flex;align-items:center;gap:10px;background:#2B2A28;color:#fff;font-size:12px;padding:6px 6px 6px 12px;border-radius:4px}
.itgebar span{opacity:.65;letter-spacing:.06em}
.itgebar a{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;background:rgba(255,255,255,.14);border-radius:3px;color:#fff}
.tagv{position:fixed;left:12px;bottom:12px;z-index:90;font:11px ui-monospace,Consolas,monospace;background:#2B2A28;color:#fff;padding:7px 10px;border-radius:3px;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}