:root{--ink:#000000;--stone:#757575;--hair:#000000;--canvas:#ffffff;--tile:#f2f3f5;
--pad:112px;--gap:48px;--dur:240ms;--dur-enter:320ms;--ease:cubic-bezier(.4,0,.2,1);--ease-in:cubic-bezier(0,0,.2,1);--ease-out:cubic-bezier(.4,0,1,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:'Inter','Helvetica Neue','Noto Sans KR',Arial,sans-serif;font-size:13px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
img{display:block;max-width:100%}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
@media(max-width:960px){:root{--pad:40px}}
@media(max-width:640px){:root{--pad:16px;--gap:36px}}
.up{font-size:13px;font-weight:400;text-transform:uppercase}
.small{font-size:11px;text-transform:uppercase;color:var(--stone)}
.stone{color:var(--stone)}
.h{font-size:13px;font-weight:400;text-transform:uppercase;margin:0 0 20px}
.lead{font-size:16px;font-weight:400;margin:12px 0 0}
p.body{font-size:13px;font-weight:300;line-height:1.6;margin:12px 0 0;max-width:560px}
.ul{text-decoration:underline;text-underline-offset:4px}
.link{font-size:13px;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;display:inline-block;transition:transform var(--dur) var(--ease)}
.link:hover{transform:translateX(4px)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-size:13px;text-transform:uppercase;border-radius:0;cursor:pointer;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{transform:scale(1.05)}
.btn:active{transform:scale(.95,1.05)}
.btn[disabled]{opacity:.4;cursor:default;transform:none}
/* nav */
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--hair);background:var(--canvas);position:sticky;top:0;z-index:10}
.nav.onphoto{position:absolute;left:0;right:0;top:0;border:0;background:transparent;z-index:3}
.nav.onphoto a,.nav.onphoto .small{color:#fff}
.nav .l,.nav .r{display:flex;gap:24px;align-items:center;flex:1}
.nav .r{justify-content:flex-end}
.nav a.up{position:relative}
.nav a.up::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.nav a.up:hover::after,.nav a.up[aria-current]::after{transform:scaleX(1)}
.nav .logo img{height:26px;width:auto}
.nav .burger{display:none;background:none;border:0;color:inherit;font:inherit;font-size:13px;text-transform:uppercase;min-height:44px;cursor:pointer}
@media(max-width:820px){.nav .l,.nav .r .up{display:none}.nav .burger{display:inline-flex}.nav .logo{order:-1}}
.menu{display:none;position:fixed;inset:0;background:var(--canvas);z-index:20;padding:24px var(--pad);flex-direction:column;gap:20px;opacity:0;transform:translateY(-8px);transition:opacity var(--dur-enter) var(--ease-in),transform var(--dur-enter) var(--ease-in)}
.menu.open{display:flex;opacity:1;transform:none}
.menu a{font-size:16px;text-transform:uppercase;min-height:44px;display:flex;align-items:center}
.menu .close{align-self:flex-end;background:none;border:0;font:inherit;font-size:13px;text-transform:uppercase;min-height:44px;cursor:pointer}
/* hero */
.hero{position:relative;background:#000;overflow:hidden;aspect-ratio:2600/1103;min-height:420px}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 50%}
.hero .copy{position:absolute;left:var(--pad);top:35%;color:#fff;z-index:3}
.hero .copy img{height:110px;width:auto}.hero .copy img.lk{display:none}
@media(max-width:820px){.hero{aspect-ratio:auto;background:var(--canvas)}.hero img.bg{position:static;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:78% 50%}
.hero .copy{position:static;color:var(--ink);padding:28px var(--pad) 8px}.hero .copy img.lw,.hero .copy img.lk{display:none}.hero .copy h1{margin-top:0}.hero .copy a{color:var(--ink)}.hero .copy h1{font-size:26px;margin-top:20px}.hero .copy p.t{font-size:13px}
.nav.onphoto{position:sticky;background:var(--canvas);border-bottom:1px solid var(--hair)}.nav.onphoto a,.nav.onphoto .small{color:var(--ink)}.nav.onphoto .burger{color:var(--ink)}.nav.onphoto .logo img.lw{display:none!important}.nav.onphoto .logo img.lk{display:block!important}}
.hero .copy h1{margin:28px 0 0 2px;font-size:clamp(22px,3vw,40px);font-weight:600;letter-spacing:.04em;line-height:1.1}
.hero .copy p{margin:24px 0 0 4px;font-size:13px;text-transform:uppercase}
.hero .copy p.t{text-transform:none;font-size:14px;line-height:1.7;max-width:520px;font-weight:300}
.hero .copy a{color:#fff}
/* sections */
section{padding-top:var(--gap)}
.grid{display:grid;gap:20px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:960px){.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.tile .ph{background:var(--tile);aspect-ratio:1080/1163;overflow:hidden}
.tile .ph img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease)}
.tile:hover .ph img{transform:scale(1.05)}
.tile p{margin:12px 0 0;font-size:13px}
.tile p.m{margin-top:4px;color:var(--stone);font-weight:300}
.split{display:grid;grid-template-columns:300px 1fr;gap:20px}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.row{display:grid;grid-template-columns:110px 1fr 1fr 100px;gap:20px;padding:16px 0;border-top:1px solid var(--hair);align-items:baseline}
.row:last-child{border-bottom:1px solid var(--hair)}
.row .stone{font-weight:300}
.row .tag{text-align:right;font-size:11px;text-transform:uppercase;color:var(--stone)}
@media(max-width:820px){.row{grid-template-columns:1fr auto;row-gap:4px}.row span:nth-child(1){order:1;color:var(--stone)}.row .tag{order:2;text-align:right}.row span:nth-child(2){order:3;grid-column:1/-1}.row span:nth-child(3){order:4;grid-column:1/-1}}
.block{display:grid;grid-template-columns:300px 600px;gap:20px;padding:32px 0;border-top:1px solid var(--hair)}
@media(max-width:960px){.block{grid-template-columns:1fr}}
/* forms */
form{display:flex;flex-direction:column;gap:20px;max-width:600px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
@media(max-width:640px){.f2,.f3{grid-template-columns:1fr}}
label{display:block;font-size:11px;text-transform:uppercase;color:var(--stone);margin-bottom:6px}
input,textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:10px 0;outline:none;transition:transform var(--dur) var(--ease)}
@media(min-width:641px){input,textarea{font-size:13px}}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus{border-bottom-width:1px}
.field.err input,.field.err textarea{animation:shake 320ms var(--ease)}
.field.err label{color:#9a1f1f}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-12px)}75%{transform:translateX(12px)}}
.fnote{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.fnote span{font-size:11px;color:var(--stone)}
.msg{font-size:13px;margin-top:12px;opacity:0;transform:translateY(4px);transition:opacity var(--dur-enter) var(--ease-in),transform var(--dur-enter) var(--ease-in)}
.msg.show{opacity:1;transform:none}
.msg.ok{color:#1f7a3a}.msg.bad{color:#9a1f1f}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* footer */
footer{margin-top:var(--gap);border-top:1px solid var(--hair);padding-top:var(--gap);padding-bottom:var(--gap);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .cols{display:flex;gap:64px;flex-wrap:wrap}
footer .col{display:flex;flex-direction:column;gap:12px}
footer .col a{font-size:13px;text-transform:uppercase}
.dsplit{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dtext{padding:min(120px,12vw) 0 0 min(60px,6vw)}
@media(max-width:820px){.dsplit{grid-template-columns:1fr}.dtext{padding:28px 0 0}}
.legal{max-width:640px}.legal h3{font-size:13px;font-weight:400;text-transform:uppercase;margin:28px 0 8px}.legal p,.legal li{font-size:13px;font-weight:300;line-height:1.7;margin:6px 0}.legal ul{padding-left:18px;margin:0}
footer .brand{text-align:right}
footer .brand img{height:26px;width:auto;display:inline-block}
footer .brand p{margin:16px 0 0;font-size:11px;color:var(--stone)}
@media(max-width:640px){footer .brand{text-align:left}}
/* reveal on scroll */
.rv{opacity:0;transform:translateY(12px);transition:opacity var(--dur-enter) var(--ease-in),transform var(--dur-enter) var(--ease-in)}
.rv.in{opacity:1;transform:none}
/* page transition */
body{opacity:0;transition:opacity 300ms var(--ease-in)}
body.ready{opacity:1}
body.leaving{opacity:0;transition:opacity 200ms var(--ease-out)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.rv{opacity:1;transform:none}body{opacity:1}}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;background:#fff;padding:8px;z-index:30}