/* COMPLETE STUDIO — white, quiet, precise */
:root{
  --bg:#fff; --ink:#141414; --text:#3a3a3a; --mute:#8a8a8a; --line:#e8e6e3; --soft:#f7f6f4;
  --kakao:#FEE500;
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --gut:clamp(20px,4.4vw,64px);
  --head:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-variant-numeric:lining-nums;background:var(--bg);color:var(--text);font:400 15px/1.9 var(--sans);letter-spacing:-.005em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
::selection{background:#141414;color:#fff}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:#141414;color:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* type helpers */
.eb{font:500 12px/1 var(--serif);letter-spacing:.32em;text-transform:uppercase;color:var(--mute)}
.en{font-family:var(--serif);font-feature-settings:"lnum";font-variant-numeric:lining-nums}

/* ───────── header */
.hd{position:sticky;top:0;z-index:50;height:var(--head);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);transition:box-shadow .4s}
.hd.stuck{box-shadow:0 1px 0 var(--line)}
.logo{display:inline-flex;align-items:baseline;font-family:var(--serif);color:var(--ink);line-height:1}
.logo b{font-weight:400;font-size:24px;letter-spacing:.34em;margin-right:-.1em}
.logo i{font-style:normal;font-size:12px;letter-spacing:.08em;margin-left:2px}
.nav{display:flex;gap:clamp(28px,4.6vw,72px)}
.nav a{position:relative;font:500 13px/1 var(--serif);font-variant-numeric:lining-nums;letter-spacing:.24em;color:var(--ink);padding:8px 0}
.nav a::after{content:"";position:absolute;left:0;right:.24em;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.mbtn{display:none;background:none;border:0;padding:10px 0;font:500 13px/1 var(--serif);letter-spacing:.24em;color:var(--ink);cursor:pointer}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:60;background:#fff;display:flex;flex-direction:column;padding:0 var(--gut) 32px;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.mnav.open{opacity:1;visibility:visible}
.mnav .top{height:var(--head);display:flex;align-items:center;justify-content:space-between}
.mnav ul{margin:auto 0;display:grid;gap:6px}
.mnav li{overflow:hidden}
.mnav ul a{display:block;font:300 40px/1.35 var(--serif);letter-spacing:.08em;color:var(--ink);transform:translateY(105%);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mnav.open ul a{transform:none}
.mnav.open li:nth-child(2) a{transition-delay:.05s}.mnav.open li:nth-child(3) a{transition-delay:.1s}.mnav.open li:nth-child(4) a{transition-delay:.15s}
.mnav .foot{font-size:12px;color:var(--mute);line-height:1.8}

/* ───────── home hero */
.hero{padding:clamp(8px,2vw,28px) var(--gut) 0;text-align:center}
.hero figure{margin:0 auto;width:min(100%,calc((100svh - var(--head) - 150px) * .6667));min-width:min(100%,320px);aspect-ratio:2/3;overflow:hidden;background:var(--soft)}
.hero img{width:100%;height:100%;object-fit:cover;animation:heroIn 2.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroIn{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}
.info{padding:30px 0 0;display:flex;flex-direction:column;align-items:center;gap:18px;animation:up 1.2s .5s cubic-bezier(.2,.7,.2,1) both}
.info p{font:500 12.5px/1.7 var(--serif);letter-spacing:.2em;color:var(--ink)}
.info p span{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.04em}
.info .bar{display:inline-block;margin:0 .9em;color:var(--mute)}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* kakao button */
.kakao{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 22px 0 8px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:500;color:var(--ink);letter-spacing:.02em;transition:border-color .3s,background .3s}
.kakao svg{width:30px;height:30px;flex:none}
.kakao:hover{border-color:var(--ink)}
.kakao.lg{height:58px;padding:0 30px 0 10px;font-size:15px;gap:12px}
.kakao.lg svg{width:40px;height:40px}
.kakao.solid{background:var(--kakao);border-color:var(--kakao);color:#191919}
.kakao.solid:hover{background:#f5dc00;border-color:#f5dc00}
.kakao.solid svg circle{fill:#191919}.kakao.solid svg path{fill:var(--kakao)}

/* ───────── intro (home) */
.intro{max-width:1080px;margin:0 auto;padding:clamp(96px,12vw,160px) var(--gut) clamp(80px,10vw,140px);text-align:center}
.intro h1{font:500 15px/1.6 var(--sans);letter-spacing:.02em;color:var(--ink);margin-top:22px}
.intro .lead{margin:26px auto 0;max-width:30em;font-size:15.5px;line-height:2.05}
.branches{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(64px,8vw,104px);border-top:1px solid var(--line)}
.branch{display:block;padding:48px 24px 52px;text-align:center;transition:background .5s}
.branch+.branch{border-left:1px solid var(--line)}
.branch:hover{background:var(--soft)}
.branch .nm{font:300 clamp(34px,4vw,46px)/1 var(--serif);letter-spacing:.14em;color:var(--ink)}
.branch .loc{margin-top:18px;font-size:13.5px;color:var(--text)}
.branch .from{margin-top:22px;font-size:12px;color:var(--mute);letter-spacing:.04em}
.branch .from b{font:400 20px/1 var(--serif);color:var(--ink);letter-spacing:.02em;margin:0 3px 0 6px}
.branch .go{display:inline-block;margin-top:26px;font:500 11.5px/1 var(--serif);letter-spacing:.3em;color:var(--ink);padding-bottom:6px;border-bottom:1px solid var(--ink)}
.notice{margin:44px auto 0;max-width:42em;font-size:13px;line-height:1.9;color:var(--mute)}
.notice b{color:var(--ink);font-weight:500}

/* ───────── sub pages */
.ph{padding:clamp(72px,10vw,136px) var(--gut) 0;text-align:center}
.ph h1{font:300 clamp(46px,7.4vw,92px)/1 var(--serif);letter-spacing:.12em;color:var(--ink);margin-right:-.12em}
.ph .sub{margin-top:26px;font-size:14px;color:var(--text)}
.ph .sub .en{font-size:15px;letter-spacing:.02em}
.ph .lead{margin:40px auto 0;max-width:31em;font-size:15.5px;line-height:2.05}
.flag{margin:44px auto 0;max-width:620px;padding:18px 24px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.85;color:var(--ink)}
.flag .eb{display:block;margin-bottom:10px;color:var(--ink)}

.inc{margin:clamp(64px,8vw,96px) auto 0;padding:0 var(--gut);display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;max-width:900px}
.inc li{font-size:14px;color:var(--ink);padding:0 clamp(12px,2vw,24px);position:relative}
.inc li+li::before{content:"";position:absolute;left:0;top:50%;width:3px;height:3px;border-radius:50%;background:var(--mute);transform:translate(-50%,-50%)}

.sec{max-width:1200px;margin:0 auto;padding:clamp(96px,11vw,150px) var(--gut) 0}
.sh{text-align:center;margin-bottom:clamp(44px,5vw,64px)}
.sh h2{margin-top:16px;font:500 19px/1.5 var(--sans);color:var(--ink);letter-spacing:-.01em}
.sh p{margin-top:12px;font-size:13.5px;color:var(--mute)}

/* packages — subgrid keeps every row aligned across columns */
.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.pk{display:grid;grid-template-rows:subgrid;grid-row:span var(--rows);padding:0 clamp(18px,2.4vw,36px)}
.pk+.pk{border-left:1px solid var(--line)}
.pk-h{padding:40px 0 34px;text-align:center;border-bottom:1px solid var(--line)}
.pk-h h3{font:400 clamp(24px,2.4vw,30px)/1 var(--serif);letter-spacing:.2em;color:var(--ink);margin-right:-.2em}
.pk-h .hrs{margin-top:12px;font-size:12.5px;color:var(--mute)}
.pk-h .pr{margin-top:22px;color:var(--ink)}
.pk-h .pr b{font:300 clamp(34px,3.4vw,44px)/1 var(--serif);letter-spacing:.01em}
.pk-h .pr span{font-size:14px;margin-left:3px}
.pk .row{padding:17px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:baseline}
.pk .row dt{font-size:12px;color:var(--mute);letter-spacing:.01em}
.pk .row dd{font-size:14.5px;color:var(--ink);line-height:1.65}
.pk .row dd small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.pk .row:last-child{border-bottom:0}

.addon{display:grid;grid-template-columns:auto 1fr auto;gap:8px 36px;align-items:baseline;padding:30px clamp(18px,2.4vw,36px);border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.addon h3{font:400 22px/1 var(--serif);letter-spacing:.2em;color:var(--ink)}
.addon h3 small{display:block;font:400 12px/1 var(--sans);letter-spacing:0;color:var(--mute);margin-top:10px}
.addon p{font-size:14px;color:var(--text)}
.addon .pr{color:var(--ink);white-space:nowrap}
.addon .pr b{font:300 30px/1 var(--serif)}
.addon .pr span{font-size:13px;margin-left:2px}

.common{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--soft)}
.common div{padding:26px 24px}
.common dt{font:500 11.5px/1 var(--serif);letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.common dd{margin-top:12px;font-size:13.5px;color:var(--ink);line-height:1.75}

/* wardrobe */
.wd{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.wd>div{padding:40px clamp(18px,3vw,48px) 44px}
.wd>div+div{border-left:1px solid var(--line)}
.wd h3{font:400 24px/1 var(--serif);letter-spacing:.2em;color:var(--ink)}
.wd h3 small{font:400 13px/1 var(--sans);letter-spacing:0;color:var(--mute);margin-left:10px}
.wd ul{margin-top:26px;display:grid;gap:10px}
.wd li,.tm li{position:relative;padding-left:20px;font-size:14px;line-height:1.8}
.wd li::before,.tm li::before{content:"";position:absolute;left:0;top:.92em;width:9px;height:1px;background:var(--mute)}
.wd .note{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--mute);line-height:1.85}
.wd .none{margin-top:26px;font-size:14px;color:var(--ink);line-height:1.85}

/* terms */
.tm{border-top:1px solid var(--ink)}
.tm section{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:34px 0;border-bottom:1px solid var(--line)}
.tm h3{font:500 14px/1.6 var(--sans);color:var(--ink)}
.tm h3 .eb{display:block;margin-bottom:10px;font-size:11px}
.tm ul{display:grid;gap:8px}
.tm li{color:var(--text)}
.rf{width:100%;border-collapse:collapse;margin:4px 0 16px;font-size:14px}
.rf th,.rf td{padding:13px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400;vertical-align:baseline}
.rf th{color:var(--text);padding-right:16px}
.rf td{color:var(--ink);text-align:right;white-space:nowrap}
.rf tr.k th{padding-top:26px;font-size:12px;color:var(--mute)}
.rf tr.k td{padding-top:26px}

/* cta band */
.cta{text-align:center;padding:clamp(110px,13vw,170px) var(--gut) clamp(90px,11vw,140px)}
.cta h2{font:300 clamp(30px,4vw,44px)/1.2 var(--serif);letter-spacing:.08em;color:var(--ink)}
.cta p{margin:18px auto 34px;font-size:14px;color:var(--mute)}
.cta .btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.line-btn{display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 30px;border:1px solid var(--line);border-radius:999px;font:500 13px/1 var(--serif);letter-spacing:.24em;color:var(--ink);transition:border-color .3s}
.line-btn:hover{border-color:var(--ink)}
.line-btn svg{width:17px;height:17px}

/* contact */
.ct{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.ct article{padding:48px clamp(18px,3vw,52px) 52px}
.ct article+article{border-left:1px solid var(--line)}
.ct h2{font:300 clamp(32px,3.6vw,44px)/1 var(--serif);letter-spacing:.14em;color:var(--ink)}
.ct .st{margin-top:14px;font-size:13px;color:var(--mute)}
.ct address{margin-top:30px;font-style:normal;font-size:16px;color:var(--ink);line-height:1.75}
.ct .maps{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.ct .maps a,.ct .maps button{height:38px;padding:0 16px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:none;font:400 12.5px/1 var(--sans);color:var(--ink);cursor:pointer;transition:border-color .3s}
.ct .maps a:hover,.ct .maps button:hover{border-color:var(--ink)}
.ct .more{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;line-height:1.9;color:var(--text)}
.ct .more a{border-bottom:1px solid var(--ink);color:var(--ink)}
.ask{text-align:center}
.ask p{margin-top:18px;font-size:13.5px;color:var(--mute)}
.ig{display:inline-flex;align-items:center;gap:12px;font:300 clamp(26px,3vw,34px)/1 var(--serif);letter-spacing:.06em;color:var(--ink);padding-bottom:10px;border-bottom:1px solid var(--line);transition:border-color .3s}
.ig:hover{border-color:var(--ink)}
.ig svg{width:22px;height:22px}

/* footer */
.ft{margin-top:clamp(40px,6vw,80px);padding:44px var(--gut) 48px;border-top:1px solid var(--line);font-size:11.5px;line-height:2;color:var(--mute);text-align:center}
.ft .logo{margin-bottom:18px}
.ft .logo b{font-size:18px}
.ft p span{display:inline-block}
.ft .sep{margin:0 .8em;color:#cfcfcf}
.ft .cp{margin-top:14px;font:500 10.5px/1 var(--serif);letter-spacing:.24em}
.home .ft{margin-top:0}

/* reveal */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in{opacity:1;transform:none}

/* 404 */
.nf{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px var(--gut)}
.nf h1{font:300 88px/1 var(--serif);letter-spacing:.1em;color:var(--ink)}
.nf p{margin:18px 0 30px;color:var(--mute)}

/* ───────── responsive */
@media (max-width:1000px){
  .common{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--head:64px}
  .nav{display:none}.mbtn{display:block}
  .logo b{font-size:21px}
  .pk-grid{grid-template-columns:1fr;border-top:0}
  .pk{display:block;padding:0;border-top:1px solid var(--ink)}
  .pk+.pk{border-left:0;margin-top:48px}
  .pk-h{padding:34px 0 28px}
  .addon{grid-template-columns:1fr auto;padding:28px 0}
  .addon p{grid-column:1/-1;grid-row:2}
  .wd,.ct{grid-template-columns:1fr}
  .wd>div,.ct article{padding-left:0;padding-right:0}
  .wd>div+div,.ct article+article{border-left:0;border-top:1px solid var(--line)}
  .tm section{grid-template-columns:1fr;gap:14px;padding:28px 0}
  .branches{grid-template-columns:1fr}
  .branch+.branch{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  body{font-size:14.5px}
  .hero{padding-top:4px}
  .hero figure{width:100%}
  .info p{font-size:11.5px;letter-spacing:.14em}
  .info .bar{display:block;height:0;overflow:hidden;margin:0}
  .common{grid-template-columns:1fr}
  .common div{padding:20px 20px}
  .pk .row{grid-template-columns:80px 1fr}
  .ft .sep{display:none}.ft p span{display:block}
  .ph .lead,.intro .lead{font-size:14.5px;line-height:2}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .rv{opacity:1;transform:none}
}
@media print{.hd,.mnav,.cta,.ft .cp{display:none}.sec{padding-top:40px}}
.pk .rows{display:contents}
@media (max-width:860px){.addon h3{grid-column:1;grid-row:1}.addon .pr{grid-column:2;grid-row:1;align-self:center}}
.tm ul{max-width:52em}

/* v2 — instagram button, pairs, mobile quick bar, lining numerals */
*{font-variant-numeric:lining-nums!important}
.pair{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.igi{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.igi svg{width:60%;height:60%}
.kakao.lg .igi{width:40px;height:40px}
.kakao.igb:hover{border-color:var(--ink)}
.cta .kakao.igb{background:#fff}
.mnav .foot{justify-content:flex-start}
.mbar{display:none}
@media (max-width:860px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px;background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);
    transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .mbar.on{transform:none}
  .mbar a{height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink);border:1px solid var(--line)}
  .mbar a:first-child{background:var(--kakao);border-color:var(--kakao);color:#191919}
  .mbar svg,.mbar .igi{width:26px;height:26px}
  .mbar a:first-child svg circle{fill:#191919}.mbar a:first-child svg path{fill:var(--kakao)}
}
.inc .brk{display:none}
@media (max-width:560px){.inc .brk{display:block;flex-basis:100%;height:0;padding:0}.inc .brk+li::before{display:none}}
.inc .brk::before{display:none!important}
.home-note{margin-top:56px;padding-top:34px;border-top:1px solid var(--line);max-width:560px;color:var(--text)}
.home-note .eb{margin-bottom:16px;color:var(--ink)}
.home-note p+p{margin-top:2px}
.home-note span{display:inline-block}

/* v3 — client revisions 2026-09-18 */
.shoot{margin:0 0 56px;padding:34px 24px 36px;background:var(--ink);color:#fff;text-align:center}
.shoot .eb{color:rgba(255,255,255,.62)}
.shoot .big{margin-top:16px;font:500 clamp(19px,2.4vw,26px)/1.5 var(--sans);letter-spacing:-.01em}
.shoot .big span{display:inline-block}
.common{grid-template-columns:repeat(3,1fr)}
.tm-list{border-top:1px solid var(--ink);padding-top:30px;display:grid;gap:12px;max-width:none}
.tm-list li{position:relative;padding-left:20px;font-size:14px;line-height:1.85;color:var(--text)}
.tm-list li::before{content:"";position:absolute;left:0;top:.92em;width:9px;height:1px;background:var(--mute)}
.tm{border-top:0}
.bouquet{margin-top:28px;text-align:center;font-size:13.5px;color:var(--ink)}
@media (max-width:1000px){.common{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.common{grid-template-columns:1fr}.shoot{margin-bottom:40px;padding:28px 18px}}
.tm{max-width:860px;margin:0 auto}.tm .tm-list{max-width:none}