:root{
  --bg:#0e0e0e; --bg2:#161616; --card:#1c1c1c; --line:#2c2c2c;
  --ink:#f2f2f0; --muted:#9a9a95; --accent:#f2f2f0; --accent-ink:#0e0e0e;
  --ok:#9fc4a7; --err:#e3998b;
  --serif:"Noto Serif KR",serif; --sans:"Pretendard",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased;padding-bottom:76px;word-break:keep-all}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
section{padding:110px 0}
.eyebrow{font-size:11px;letter-spacing:.32em;color:var(--muted);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--ink)}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4.6vw,38px);line-height:1.35;margin-bottom:14px;letter-spacing:-.01em}
.lead{color:var(--muted);font-size:16px}
.sub-title{font-size:15px;color:var(--ink);font-weight:600;margin-bottom:6px}

/* header */
header{position:fixed;inset:0 0 auto 0;z-index:20;background:rgba(14,14,14,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-color:var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.08em}
.logo img{width:20px;height:auto}
nav{display:flex;gap:24px;font-size:13px;color:var(--muted);letter-spacing:.02em}
nav a:hover{color:var(--ink)}
@media(max-width:820px){nav{display:none}}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:100px 0 80px;position:relative;overflow:hidden;text-align:center}
.hero-in{display:flex;flex-direction:column;align-items:center}
.hero-mark{width:clamp(150px,22vw,210px);opacity:0;animation:fadeUp 1.4s .1s ease forwards}
.hero-title{margin-top:36px;opacity:0;animation:fadeUp 1.2s .5s ease forwards}
.hero-title img{width:clamp(260px,46vw,400px)}
.hero-logo{opacity:0;animation:fadeUp 1.4s .2s ease forwards}
.hero-logo img{width:clamp(190px,27vw,250px);height:auto}
.stroke{display:block;height:1px;width:0;background:var(--ink);margin:30px auto 24px;animation:draw 1.6s 1s cubic-bezier(.6,.05,.2,1) forwards}
@keyframes draw{to{width:min(200px,50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-copy{font-family:var(--serif);font-size:clamp(17px,2.4vw,21px);opacity:0;animation:fadeUp 1s 1.3s ease forwards}
.hero-sub{color:var(--muted);font-size:14px;letter-spacing:.12em;margin-top:8px;opacity:0;animation:fadeUp 1s 1.4s ease forwards}
.cta{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap;justify-content:center;opacity:0;animation:fadeUp 1s 1.6s ease forwards}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;color:var(--muted);padding-bottom:34px}
.scroll-cue::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:26px;background:linear-gradient(var(--muted),transparent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 30px;border-radius:0;font-size:15px;font-weight:600;border:1px solid var(--ink);cursor:pointer;font-family:inherit;letter-spacing:.02em;transition:background .2s,color .2s,border-color .2s}
.btn.primary{background:var(--ink);color:var(--accent-ink)}
.btn.primary:hover{background:#d6d6d2}
.btn.ghost{background:transparent;color:var(--ink);border-color:#4a4a48}
.btn.ghost:hover{border-color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* about */
#about{background:var(--bg2)}
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.artist{position:relative}
.artist img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%;filter:grayscale(1) contrast(1.05)}
.artist::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--line);z-index:-1}
.about .lead{margin-bottom:28px}
.points{list-style:none;border-top:1px solid var(--line)}
.points li{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:130px 1fr;gap:12px}
.points b{font-weight:600}
.points span{color:var(--muted);font-size:15px}
@media(max-width:820px){.about{grid-template-columns:1fr;gap:44px}.artist{max-width:420px;margin-right:14px}.points li{grid-template-columns:1fr;gap:2px}}

.about.no-photo{grid-template-columns:1fr;max-width:720px}
[hidden]{display:none!important}
.space-grid.one{grid-template-columns:1fr}

/* space */
.space-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-top:40px}
.space-grid figure{position:relative;overflow:hidden}
.space-grid img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.75);transition:transform 1.2s ease}
.space-grid figure:hover img{transform:scale(1.03)}
.space-grid figcaption{position:absolute;left:0;bottom:0;padding:10px 16px;font-size:13px;letter-spacing:.06em;background:rgba(14,14,14,.72)}
@media(max-width:780px){.space-grid{grid-template-columns:1fr}}

/* gallery */
#gallery{background:var(--bg2)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:36px}
.photo-slot{aspect-ratio:4/5;background:var(--card);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.video{position:relative;aspect-ratio:9/16;background:#000;border:1px solid var(--line);overflow:hidden}
.video.wide{aspect-ratio:16/9}
.video iframe,.video button{position:absolute;inset:0;width:100%;height:100%;border:0}
.video button{background-size:cover;background-position:center;cursor:pointer}
.video button::after{content:"";position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(0,0,0,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2f2f0'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;border:1px solid rgba(242,242,240,.5)}
.video-title{font-size:14px;color:var(--muted);margin-top:8px}

/* menu */
.menu-list{margin-top:40px;border-top:1px solid var(--ink)}
.menu-item{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:26px 0;border-bottom:1px solid var(--line)}
.menu-item h3{font-size:18px;font-weight:600}
.menu-item .note{font-size:13px;color:var(--muted);margin-top:4px}
.menu-item .price{font-family:var(--serif);font-size:21px;white-space:nowrap;color:var(--ink)}
.menu-item .price.soft{font-family:var(--sans);font-size:15px;color:var(--muted)}

/* booking */
#booking{background:var(--bg2)}
.book{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
@media(max-width:780px){.book{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);padding:26px}
.step{font-size:12px;color:var(--muted);letter-spacing:.14em;margin-bottom:16px;font-weight:600}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head b{font-size:17px;font-family:var(--serif)}
.cal-head button{background:none;border:1px solid var(--line);color:var(--ink);width:36px;height:36px;cursor:pointer;font-size:16px}
.cal-head button:disabled{opacity:.3;cursor:default}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal .dow{font-size:12px;color:var(--muted);padding:6px 0}
.cal .dow:first-child{color:#c98a7e}
.cal .day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:15px;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer;font-family:inherit}
.cal .day:hover:not(:disabled){border-color:var(--ink)}
.cal .day:disabled{color:#4b4b48;cursor:default}
.cal .day.sel{background:var(--ink);color:var(--accent-ink);font-weight:700}
.cal .day.full{text-decoration:line-through}
.legend{font-size:12px;color:var(--muted);margin-top:12px}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{height:48px;background:none;border:1px solid var(--line);color:var(--ink);font-size:15px;cursor:pointer;font-family:inherit}
.slot:hover:not(:disabled){border-color:var(--ink)}
.slot.sel{background:var(--ink);color:var(--accent-ink);border-color:var(--ink);font-weight:700}
.slot:disabled{color:#4b4b48;text-decoration:line-through;cursor:default}
.hint{color:var(--muted);font-size:14px}
label{display:block;font-size:13px;color:var(--muted);margin:16px 0 6px}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:16px;padding:12px 14px;border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink)}
textarea{min-height:84px;resize:vertical}
.agree{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:14px}
.agree input{width:18px;height:18px;margin-top:3px;accent-color:#f2f2f0}
details{margin-top:8px;font-size:13px;color:var(--muted)}
details summary{cursor:pointer}
details div{padding:10px 0 0;line-height:1.7}
.summary{margin-top:20px;padding:14px;border:1px solid var(--line);font-size:14px;color:var(--muted)}
.summary b{color:var(--ink)}
.msg{margin-top:14px;font-size:14px;min-height:1em}
.msg.err{color:var(--err)}
.done{text-align:center;padding:40px 10px}
.done h3{font-family:var(--serif);font-size:24px;margin-bottom:10px}
.done p{color:var(--muted)}
.done a{color:var(--ink)!important;text-decoration:underline}

/* location */
.info{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px}
@media(max-width:780px){.info{grid-template-columns:1fr}}
.info dl{display:grid;grid-template-columns:84px 1fr;row-gap:16px;font-size:15px}
.info dt{color:var(--muted)}
.map-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.map-btns .btn{height:46px;font-size:14px}

/* pay */
.pay{margin-top:48px;padding-top:30px;border-top:1px solid var(--line)}
.pay-note{color:var(--muted);font-size:14px;margin-bottom:16px}
.pay-card{background:#fff;padding:18px;max-width:520px}

/* sns */
.sns{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.sns .sub-title{margin-bottom:14px;font-weight:400;color:var(--muted)}
.sns-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sns-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border:1px solid var(--line);background:var(--card);font-size:14px;font-weight:600;transition:border-color .2s,background .2s}
.sns-btn:hover{border-color:var(--ink)}
.sns-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

footer{border-top:1px solid var(--line);padding:48px 0 40px;font-size:12px;color:var(--muted);text-align:center}
.foot-logo{width:180px;margin:0 auto 22px;opacity:.9}
footer a{text-decoration:underline}
.foot-sns{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;font-size:13px}
footer .foot-sns a{text-decoration:none;color:var(--ink)}
footer .foot-sns a:hover{text-decoration:underline}

/* mobile bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(14,14,14,.95);border-top:1px solid var(--line)}
.bar .btn{height:50px}
@media(min-width:781px){.bar{display:none}body{padding-bottom:0}}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s,transform .9s}
.reveal.in{opacity:1;transform:none}
/* mobile */
@media(max-width:640px){
  section{padding:72px 0}
  .wrap{padding:0 18px}
  .hero{min-height:92svh;padding:84px 0 70px}
  .hero-title{margin-top:28px}
  .cta{width:100%}
  .cta .btn{flex:1;padding:0 12px}
  .lead{font-size:15px}
  .menu-item{flex-direction:column;gap:6px}
  .menu-item .price{font-size:18px}
  .panel{padding:18px}
  .cal .day{font-size:14px}
  .info dl{grid-template-columns:70px 1fr;font-size:14px}
  .map-btns .btn{flex:1}
  .sns-grid{grid-template-columns:1fr 1fr}
  .pay-card{padding:12px}
  .scroll-cue{display:none}
}
@media(max-height:860px){.scroll-cue{display:none}}
@media(prefers-reduced-motion:reduce){
  .reveal,.hero-logo,.hero-mark,.hero-title,.hero-copy,.hero-sub,.cta{opacity:1;transform:none;animation:none}
  .stroke{animation:none;width:min(200px,50%)}
}