:root{
  --paper:#f4f0e8;
  --paper-2:#ece6da;
  --ink:#141414;
  --ink-2:#4a463f;
  --line:#c9c1b3;
  --serif-en:"Cormorant Garamond", "Noto Serif KR", serif;
  --serif-ko:"Noto Serif KR", serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--paper);color:var(--ink);font-family:var(--serif-ko);font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased;word-break:keep-all}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* header */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 28px;background:rgba(244,240,232,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand img{height:40px;width:auto}
.nav{display:flex;gap:34px}
.nav a{font-family:var(--serif-en);font-size:15px;letter-spacing:.22em;text-transform:uppercase;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:.22em;bottom:-4px;height:1px;background:var(--ink);transform:scaleX(0);transition:transform .25s}
.nav a:hover::after{transform:scaleX(1)}
.menu-btn{display:none;background:none;border:0;width:32px;height:32px;cursor:pointer;flex-direction:column;justify-content:center;gap:7px}
.menu-btn span{display:block;height:1px;background:var(--ink)}

/* divider with diamond */
.rule{position:relative;width:min(320px,70%);height:1px;background:var(--ink);margin:22px auto 30px}
.rule i{position:absolute;left:50%;top:50%;width:7px;height:7px;background:var(--ink);transform:translate(-50%,-50%) rotate(45deg)}

/* hero */
.hero{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:40px 20px}
.frame{position:relative;width:min(760px,100%);padding:70px 30px 64px;text-align:center;
  border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-8px}
.corner{position:absolute;width:18px;height:18px;border:1px solid var(--ink);background:var(--paper)}
.corner.tl{top:-6px;left:-6px}.corner.tr{top:-6px;right:-6px}.corner.bl{bottom:-6px;left:-6px}.corner.br{bottom:-6px;right:-6px}
.hero-logo{width:min(340px,72%);margin:0 auto}
.hero-sub{margin-top:26px;font-family:var(--serif-en);font-size:clamp(18px,2.6vw,24px);letter-spacing:.3em;text-transform:uppercase}
.hero-copy{font-size:15px;color:var(--ink-2);letter-spacing:.08em}
.hero-cta{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.btn{display:inline-block;padding:11px 24px;border:1px solid var(--ink);font-family:var(--serif-en);font-size:15px;letter-spacing:.14em;transition:background .2s,color .2s}
.btn:hover,.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:transparent;color:var(--ink)}

/* sections */
.section{padding:110px 24px;text-align:center}
.section.paper{background:var(--paper-2)}
.title{font-family:var(--serif-en);font-weight:500;font-size:clamp(34px,6vw,58px);letter-spacing:.32em;padding-left:.32em;line-height:1.1}
.lead{max-width:640px;margin:0 auto 48px;color:var(--ink-2);font-size:15.5px}
.note{margin-top:40px;font-size:13px;color:var(--ink-2)}
.muted{color:var(--ink-2);font-size:14px}

/* studio photos */
.photos{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1100px;margin:0 auto}
.photos figure{position:relative;overflow:hidden;border:1px solid var(--ink)}
.photos img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s}
.photos figure:hover img{transform:scale(1.04)}
.photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px;font-family:var(--serif-en);letter-spacing:.3em;color:#f4f0e8;
  background:linear-gradient(transparent,rgba(0,0,0,.6))}

/* price */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 72px;max-width:980px;margin:0 auto;text-align:left}
.price-block h3{display:flex;align-items:center;gap:14px;font-family:var(--serif-en);font-weight:500;font-size:19px;letter-spacing:.22em;
  padding-bottom:12px;border-bottom:1px solid var(--ink);position:relative}
.price-block h3::after{content:"";position:absolute;right:0;bottom:-4px;width:7px;height:7px;background:var(--ink);transform:rotate(45deg)}
.price-block svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round}
.price-block ul{list-style:none;margin-top:16px}
.price-block li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 6px;font-family:var(--serif-en);font-size:17px}
.price-block li em{font-style:normal;font-size:13px;color:var(--ink-2);margin-left:10px}
.price-block li b{font-weight:500;white-space:nowrap;letter-spacing:.04em}
.price-block li small{font-size:13px;color:var(--ink-2)}

/* gear */
.gear-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:1000px;margin:0 auto}
.gear-col{padding:6px 30px}
.gear-col+.gear-col{border-left:1px solid var(--line)}
.gear-col h3{font-family:var(--serif-en);font-weight:500;font-size:16px;letter-spacing:.2em;padding-bottom:12px;margin-bottom:22px;border-bottom:1px solid var(--ink)}
.gear-col h3.sub{margin-top:36px}
.gear-col p{font-family:var(--serif-en);font-size:17px;letter-spacing:.08em;margin-bottom:18px}
.gear-col small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);line-height:1.3}

/* works */
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,300px));justify-content:center;gap:40px}
.works figure{text-align:left}
.works img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.works figcaption{margin-top:14px;display:flex;flex-direction:column}
.works figcaption b{font-weight:600;font-size:16px}
.works figcaption span{font-size:13px;color:var(--ink-2)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;max-width:900px;margin:0 auto}
.contact-grid>div{padding:10px 40px}
.contact-grid>div+div{border-left:1px solid var(--line)}
.contact-grid h3{font-weight:600;font-size:15px;letter-spacing:.2em;margin-bottom:18px}
.phone{display:block;font-family:var(--serif-en);font-size:clamp(30px,4.6vw,40px);font-weight:500;letter-spacing:.06em;margin-bottom:6px}
.contact .btn{margin-top:22px;font-size:14px}
.addr{font-size:17px;margin-bottom:4px}
.map-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* footer */
.foot{background:var(--ink);color:#d9d3c7;text-align:center;padding:56px 20px 40px;font-size:13px;line-height:1.9}
.foot img{height:64px;margin:0 auto 20px}
.foot .copy{margin-top:14px;font-family:var(--serif-en);letter-spacing:.15em;color:#8c867b}

/* mobile */
@media (max-width:760px){
  .bar{padding:0 16px}
  .menu-btn{display:flex}
  .nav{position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s}
  .nav.open{max-height:320px}
  .nav a{padding:14px 20px;border-top:1px solid var(--line)}
  .section{padding:80px 16px}
  .frame{padding:56px 18px 50px}
  .hero-sub{letter-spacing:.16em;font-size:17px}
  .photos,.price-grid,.contact-grid{grid-template-columns:1fr}
  .price-grid{gap:44px}
  .gear-grid{grid-template-columns:1fr;gap:30px}
  .gear-col{padding:0 10px}
  .gear-col+.gear-col{border-left:0}
  .contact-grid>div{padding:24px 0}
  .contact-grid>div+div{border-left:0;border-top:1px solid var(--line)}
}

/* data-driven extras */
.photos.n1{grid-template-columns:1fr;max-width:820px}
.photos.n3{grid-template-columns:repeat(3,1fr)}
.muted:empty,.lead:empty,.note:empty{display:none}
[hidden]{display:none!important}
.works a{display:block}
.btn:focus-visible,.nav a:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:760px){.photos.n3{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photos img{transition:none}}

/* 맨 위로 버튼 */
.to-top{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));z-index:30;
  width:54px;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);outline:1px solid var(--paper);outline-offset:-5px;cursor:pointer;
  font-family:var(--serif-en);font-size:11px;letter-spacing:.2em;padding-left:.2em;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .2s}
.to-top:hover{transform:translateY(-3px)}
.to-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.to-top:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:760px){.to-top{width:48px;height:48px;right:max(14px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px))}}