/* 미소가든 — 객실 상세 페이지 */
:root{
  --ink:#0C100E; --ink2:#141B17;
  --paper:#F4F1EA; --paper-dim:#B9B4A8;
  --gold:#C9A25C; --gold-dim:#8A6F3C;
  --line:rgba(244,241,234,.14);
  --sans:'Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif;
  --serif:'Noto Serif KR',serif;
  --gut:24px; --max:1160px; --mock:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);
  font-weight:350;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h2{font-family:var(--serif);font-weight:500;font-size:1.05rem;letter-spacing:.02em;margin:30px 0 14px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

nav{position:fixed;top:var(--mock);left:0;right:0;z-index:100;padding:12px 0;
  background:rgba(12,16,14,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:var(--serif);font-size:1.12rem;letter-spacing:.06em;font-weight:500}
.brand small{display:block;font-family:var(--sans);font-size:.58rem;
  letter-spacing:.3em;color:var(--gold);font-weight:600;margin-top:2px}
.navcall{border:1px solid var(--gold);color:var(--gold);padding:9px 18px;
  border-radius:100px;font-size:.84rem;font-weight:600;white-space:nowrap}
.navcall:hover{background:var(--gold);color:var(--ink)}

.page{padding-top:calc(var(--mock) + 96px);padding-bottom:120px}
.back{font-size:.84rem;color:var(--paper-dim)}
.back:hover{color:var(--gold)}

.rhead{margin:22px 0 30px}
.rhead .kind{font-size:.74rem;letter-spacing:.14em;color:var(--gold);font-weight:700}
.rhead h1{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(1.9rem,5vw,3rem);line-height:1.25;margin:10px 0 12px}
.rhead h1 span{display:block;font-size:.5em;color:var(--paper-dim);margin-top:8px}
.rhead .st{color:var(--paper-dim);font-size:.92rem}

.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:46px}
.gal figure{aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:var(--ink2)}
.gal figure.lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gal img{transition:transform .6s}
.gal figure:hover img{transform:scale(1.05)}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}
  .gal figure.lead{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}}

.cols{display:grid;grid-template-columns:1fr 340px;gap:clamp(26px,4vw,54px);align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr}}

.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(max-width:560px){.specs{grid-template-columns:repeat(2,1fr)}}
.specs div{background:var(--ink2);padding:18px 12px;text-align:center}
.specs .k{font-size:.68rem;letter-spacing:.1em;color:var(--gold);font-weight:700}
.specs .v{font-size:.98rem;margin-top:6px}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{font-size:.76rem;padding:6px 12px;border:1px solid var(--line);
  border-radius:100px;color:var(--paper-dim)}
.chips.gold{margin-top:18px}
.chips.gold span{border-color:var(--gold-dim);color:var(--gold);font-weight:600}

.vembed{position:relative;aspect-ratio:16/9;width:100%;border-radius:4px;overflow:hidden;
  background:var(--ink2);border:1px solid var(--line);margin-top:34px}
.vembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.bookbox{border:1px solid var(--line);border-top:2px solid var(--gold);
  background:var(--ink2);padding:26px 24px;border-radius:2px}
.bookbox .bk{font-size:.72rem;letter-spacing:.12em;color:var(--gold);font-weight:700}
.bookbox .bv{font-family:var(--serif);font-size:1.7rem;font-weight:300;margin:6px 0 14px}
.bookbox p{font-size:.8rem;color:var(--paper-dim);margin-bottom:20px}
.btn{display:block;text-align:center;padding:14px 20px;border-radius:100px;
  font-size:.9rem;font-weight:600;border:1px solid var(--gold);color:var(--gold);
  margin-bottom:9px;transition:.25s}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn.fill{background:var(--gold);color:var(--ink)}
.btn.fill:hover{background:transparent;color:var(--gold)}

.facbox{border:1px solid var(--line);padding:24px;margin-top:16px;border-radius:2px}
.facbox ul{list-style:none;font-size:.84rem;color:var(--paper-dim)}
.facbox li{padding-left:15px;position:relative;margin-bottom:8px}
.facbox li::before{content:'';position:absolute;left:0;top:12px;width:5px;height:1px;background:var(--gold)}
.more{display:inline-block;margin-top:14px;font-size:.82rem;color:var(--gold)}
.bbq{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--paper-dim);line-height:1.7}

.others{margin-top:70px;border-top:1px solid var(--line);padding-top:10px}
.ogrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:900px){.ogrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.ogrid{grid-template-columns:repeat(3,1fr)}}
.ogrid a{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:3px;
  border:1px solid var(--line);display:block}
.ogrid a:hover{border-color:var(--gold-dim)}
.ogrid span{position:absolute;inset:auto 0 0 0;padding:22px 10px 8px;
  background:linear-gradient(transparent,rgba(12,16,14,.94));font-size:.82rem;
  font-family:var(--serif)}
.ogrid b{display:block;font-family:var(--sans);font-size:.68rem;
  font-weight:400;color:var(--paper-dim)}

footer{border-top:1px solid var(--line);padding:44px 0 110px;
  font-size:.8rem;color:var(--paper-dim)}
footer .dim{color:var(--gold-dim)}

.bar{position:fixed;inset:auto 0 0 0;z-index:99;display:none;
  grid-template-columns:repeat(4,1fr);background:rgba(12,16,14,.96);
  backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.bar a{padding:15px 4px;text-align:center;font-size:.8rem;font-weight:600;
  border-right:1px solid var(--line)}
.bar a:last-child{border-right:0}
.bar .pri{color:var(--gold)}
@media(max-width:900px){.bar{display:grid}}
/* ── 블로그 (blog.html · posts/N.html) ── */
.bhead{margin:22px 0 34px}
.bhead .kind{font-size:.74rem;letter-spacing:.14em;color:var(--gold);font-weight:700}
.bhead h1{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,4vw,2.4rem);margin-top:6px}
.bhead p{color:var(--paper-dim);font-size:.92rem;margin-top:8px}
.blist{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:700px){.blist{grid-template-columns:1fr}}
.bcard{display:block;border:1px solid var(--line);border-radius:3px;padding:24px 22px;background:var(--ink2);transition:border-color .2s}
.bcard:hover{border-color:var(--gold-dim)}
.bcard .d{font-size:.74rem;color:var(--gold)}
.bcard h2{margin:8px 0 10px;font-size:1.08rem;line-height:1.5}
.bcard p{font-size:.84rem;color:var(--paper-dim);line-height:1.7}
.post{max-width:760px}
.post h1{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.6vw,2.1rem);line-height:1.4;margin-top:18px}
.blog-post-meta{font-size:.8rem;color:var(--gold);margin-top:12px}
.blog-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 30px}
.blog-tag{font-size:.72rem;color:var(--paper-dim);border:1px solid var(--line);border-radius:100px;padding:3px 10px}
.blog-post-content{font-size:1rem;line-height:1.95}
.blog-post-content h2{font-size:1.22rem;margin:42px 0 14px;color:var(--paper)}
.blog-post-content h3{font-family:var(--serif);font-weight:500;font-size:1.04rem;margin:28px 0 10px}
.blog-post-content p{margin:0 0 16px;color:#DDD8CC}
.blog-post-content ul,.blog-post-content ol{margin:0 0 18px 20px;color:#DDD8CC}
.blog-post-content li{margin-bottom:6px}
.blog-post-content strong{color:var(--paper);font-weight:600}
.blog-post-content a{color:var(--gold);border-bottom:1px solid var(--gold-dim)}
.blog-post-content img{height:auto;border-radius:3px;margin:8px 0 22px}
.blog-post-content table{width:100%;border-collapse:collapse;margin:6px 0 24px;font-size:.88rem}
.blog-post-content th,.blog-post-content td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.blog-post-content th{background:var(--ink2);color:var(--gold);font-weight:600}
@media(max-width:560px){.blog-post-content table{font-size:.8rem}.blog-post-content th,.blog-post-content td{padding:8px}}
.related{margin-top:60px;border-top:1px solid var(--line);padding-top:14px}
.related .blist{margin-top:6px}
.postcta{margin-top:44px;display:flex;flex-wrap:wrap;gap:10px}
.postcta a{border:1px solid var(--gold);color:var(--gold);padding:11px 22px;border-radius:100px;font-size:.88rem;font-weight:600}
.postcta a.fill{background:var(--gold);color:var(--ink)}