:root{--spring:cubic-bezier(.2,.9,.25,1);--soft:cubic-bezier(.2,.9,.25,1)}
@supports(transition-timing-function:linear(0,1)){:root{--spring:linear(0,0.025,0.088,0.175,0.276,0.382,0.488,0.589,0.681,0.763,0.834,0.894,0.942,0.98,1.009,1.03,1.044,1.052,1.056,1.056,1.054,1.049,1.044,1.038,1.032,1.026,1.021,1.016,1.012,1.008,1.005,1.002,1,0.999,0.998,0.997,0.997,0.997,0.997,0.997,0.997,0.998,0.998,0.998,0.999,0.999,0.999,0.999,1,1);--soft:linear(0,0.017,0.059,0.118,0.187,0.262,0.339,0.415,0.487,0.556,0.619,0.676,0.728,0.773,0.813,0.848,0.878,0.903,0.925,0.943,0.957,0.969,0.979,0.987,0.993,0.997,1.001,1.003,1.005,1.006,1.006,1.007,1.007,1.006,1.006,1.006,1.005,1.005,1.004,1.004,1.003,1.003,1.002,1.002,1.002,1.001,1.001,1.001,1.001,1)}}

:root{--y:#FFD60A;--k:#000;--g:#FAF9F6;--t:#DEDBD3;--t2:#8C8880;--gap:10px;--nav:72px;--dur:.75s}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;background:var(--g)}
html.lock{overflow:hidden}
body{font-family:'IBM Plex Sans KR',system-ui,sans-serif;font-size:18px;line-height:1.8;color:var(--k);background:var(--g);word-break:keep-all;overflow-wrap:anywhere;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
ul{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,.big,.brand,.wm,.foot-mark{font-family:'Black Han Sans','IBM Plex Sans KR',sans-serif;font-weight:400;line-height:1.16;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--k);outline-offset:3px}
.skip{position:fixed;left:12px;top:-80px;z-index:50;background:var(--k);color:var(--y);padding:10px 16px}
.skip:focus{top:12px}
.big{font-size:clamp(52px,6.4vw,104px)}

/* nav */
.nav{position:sticky;top:0;z-index:20;height:var(--nav);display:flex;align-items:center;justify-content:space-between;background:var(--y);padding:0 24px}
.brand{font-size:28px;text-decoration:none}
.nav nav{display:flex;gap:36px}
.nav nav a{position:relative;text-decoration:none;font-weight:700;padding:6px 0}
.nav nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--k);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--spring)}
.nav nav a:hover::after,.nav nav a[aria-current]::after{transform:scaleX(1)}
.menu-btn{display:none;background:var(--k);color:var(--y);border:0;font-weight:700;padding:8px 18px;cursor:pointer}
.menu-btn.show{display:block}
.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:0;background:var(--y);opacity:0;transform:translateY(-24px);transition:transform .5s var(--spring),opacity .22s}
.menu.open{opacity:1;transform:none}
.menu::backdrop{background:transparent}
.menu-top{height:var(--nav);display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.menu nav{padding:24px;display:flex;flex-direction:column}
.menu nav a{font-family:'Black Han Sans';font-size:clamp(48px,14vw,84px);line-height:1.5;text-decoration:none}

/* tiles */
.tile{background:var(--t);padding:clamp(20px,2.4vw,36px);overflow:hidden;min-width:0}
.t-photo{padding:0}
.t-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--soft)}

/* hero */
.hero{position:relative;display:grid;gap:var(--gap);grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr 1fr minmax(240px,.82fr);height:calc(100svh - var(--nav));min-height:680px;padding:var(--gap);overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:var(--y);opacity:0;pointer-events:none}
.hero>.tile{position:relative}
.t-head{grid-column:1/5;grid-row:1/3;background:var(--y);display:flex;align-items:flex-end}
.t-head h1{font-size:min(9.5vw,22vh)}
.ln{display:block;overflow:hidden;padding:.08em 0;margin:-.08em 0}
.ln>span{display:block}
.t-p1{grid-column:5/7;grid-row:1/2}
.t-p2{grid-column:5/6;grid-row:2/4}
.t-mark{grid-column:1/3;grid-row:3;background:var(--k);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.wm{font-size:clamp(34px,3.7vw,60px);color:var(--y)}
.t-price{grid-column:3/5;grid-row:3;display:flex;flex-direction:column;justify-content:space-between;background:var(--t)}
.t-cta{grid-column:6/7;grid-row:2/4;background:var(--y);display:flex;align-items:flex-end;text-decoration:none;font-family:'Black Han Sans';font-size:clamp(26px,2.5vw,38px);line-height:1.25}
.t-cta{transition:transform .4s var(--spring)}
.t-cta:hover{transform:scale(.98)}
.t-cta:active{transform:scale(.96)}
@media (prefers-reduced-motion:no-preference){
  .js:not(.seen) .hero::before{opacity:1}
  .js:not(.seen) .hero>.tile{transform:scale(1.035);opacity:0}
  .js:not(.seen) .ln>span{transform:translateY(110%)}
  .js.ready:not(.seen) .hero::before{opacity:0;transition:opacity .5s .28s}
  .js.ready:not(.seen) .hero>.tile{transform:none;opacity:1;transition:transform var(--dur) var(--spring) calc(.08s + var(--i)*.07s),opacity .32s calc(.08s + var(--i)*.07s)}
  .js.ready:not(.seen) .ln>span{transform:none;transition:transform .85s var(--spring) .3s}
  .js.ready:not(.seen) .ln+.ln>span{transition-delay:.4s}
}

/* sections */
.sec{padding:clamp(88px,12vw,180px) var(--gap) 0}
.sec-head{padding:0 clamp(14px,2.4vw,36px) clamp(48px,6vw,88px)}
.sec-head h2,.page-head h1,.wall-h{font-size:clamp(46px,7.6vw,124px)}
.sec-head p{margin-top:24px;font-size:clamp(18px,1.6vw,22px)}
.sec-foot{padding:clamp(32px,4vw,56px) clamp(14px,2.4vw,36px) 0}
.steps{display:grid;gap:var(--gap)}
.step{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap)}
.q{display:flex;align-items:center}
.q h3{font-size:clamp(30px,3.3vw,52px);line-height:1.3}
.a{background:var(--y)}
.a-lead{font-weight:700;font-size:clamp(18px,1.6vw,22px)}
.a .big{margin:4px 0 22px}
.scope{margin-top:20px}
.meter{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.meter i{aspect-ratio:1;background:rgba(0,0,0,.08)}
.meter i.f{background:var(--k)}
@media (prefers-reduced-motion:no-preference){
  .js .meter i.f{transform:scale(.4);opacity:0}
  .js .in .meter i.f{transform:none;opacity:1;transition:transform .6s var(--spring) calc(var(--i)*.075s),opacity .18s calc(var(--i)*.075s)}
}

.btn{display:inline-block;background:var(--k);color:var(--y);border:0;text-decoration:none;font-weight:700;font-size:18px;padding:18px 34px;cursor:pointer;transition:transform .4s var(--spring)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:scale(.97)}
.btn[disabled]{cursor:default;transform:none}

.edge{margin-top:clamp(88px,12vw,180px);background:var(--k);color:#fff;padding:clamp(64px,9vw,140px) clamp(24px,3.2vw,46px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:end}
.edge h2{font-size:clamp(46px,6.4vw,104px)}
.edge .y{color:var(--y);margin:20px 0 28px}
.edge-list li{font-family:'Black Han Sans';font-size:clamp(30px,3.5vw,56px);line-height:1.2;padding:clamp(16px,1.8vw,26px) 0;border-top:6px solid var(--y)}
.edge-list small{display:block;font:500 18px/1.8 'IBM Plex Sans KR';margin-top:4px}
.mat{display:grid;grid-template-columns:7fr 5fr;gap:var(--gap);padding:var(--gap) var(--gap) 0}
.mat-q{background:var(--y);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:clamp(420px,46vw,680px)}
.mat-q h2{font-size:clamp(34px,4.4vw,72px);line-height:1.25;margin-bottom:auto;padding-bottom:40px}
.mat-q .big{margin:2px 0 26px}
.mat-p{max-height:clamp(420px,46vw,680px)}
.wall{padding:clamp(88px,12vw,180px) var(--gap) 0}
.wall-h{padding:0 clamp(14px,2.4vw,36px) clamp(40px,5vw,72px)}
.wall-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.wall-grid .tile{aspect-ratio:3/4}
@media (prefers-reduced-motion:no-preference){
  .js .wall-grid .tile,.js .edge-list li{opacity:0;transform:scale(.97)}
  .js .wall-grid.in .tile,.js .edge-list.in li{opacity:1;transform:none;transition:transform var(--dur) var(--spring) calc(var(--i,0)*.07s),opacity .28s calc(var(--i,0)*.07s)}
}
.ask{margin-top:clamp(88px,12vw,180px);background:var(--y);padding:clamp(72px,10vw,150px) clamp(24px,3.2vw,46px)}
.ask h2{font-size:clamp(46px,8vw,132px);margin-bottom:40px}

/* foot */
.foot{background:var(--k);color:#fff;padding:clamp(48px,6vw,88px) clamp(24px,3.2vw,46px) 36px}
.foot-mark{display:block;font-size:clamp(52px,14.6vw,232px);line-height:1.1;color:var(--y);text-decoration:none;white-space:nowrap}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:40px;margin-top:clamp(36px,4vw,64px)}
dl>div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:5px 0}
dt{font-weight:700}
dd{margin:0}
.foot nav{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.foot nav a{text-underline-offset:5px}
.copy{margin-top:36px}
.foot :focus-visible{outline-color:var(--y)}

/* inner pages */
.page-head{padding:clamp(56px,8vw,120px) clamp(24px,3.2vw,46px) clamp(40px,5vw,72px)}
.page-head p{margin-top:24px;font-size:clamp(18px,1.6vw,22px)}
.pkg{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap);padding:0 var(--gap)}
.pkg-left{background:var(--k);color:#fff}
.pkg-left h2{font-size:clamp(40px,4.6vw,72px);color:var(--y);margin-bottom:12px}
.picks{display:grid;gap:8px;margin-top:32px}
.pick{display:flex;justify-content:space-between;align-items:center;background:transparent;color:#fff;border:3px solid #fff;padding:14px 18px;cursor:pointer;transition:transform .35s var(--spring)}
.pick span{font-weight:700}
.pick b{font-family:'Black Han Sans';font-weight:400;font-size:26px}
.pick:hover{transform:translateX(5px)}
.pick:active{transform:scale(.98)}
.pick[aria-pressed=true]{background:var(--y);border-color:var(--y);color:var(--k)}
.pick:focus-visible{outline-color:#fff}
.pkg-right{display:grid;gap:var(--gap);align-content:start}
.pkg-sum{background:var(--y);min-height:280px;display:flex;flex-direction:column;justify-content:flex-end}
.pkg-sum [data-pname]{font-weight:700}
.cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.cell{aspect-ratio:4/3;background:var(--t);padding:16px;font-weight:700;display:flex;align-items:flex-end;position:relative;overflow:hidden}
.cell::before{content:'';position:absolute;inset:0;background:var(--y);opacity:0;transform:scale(.9);transition:transform .5s var(--spring),opacity .16s}
.cell.on::before{opacity:1;transform:none}
.cell span{position:relative}
.cell:not(.on) span{text-decoration:line-through}
.svc{margin:var(--gap);background:var(--t);padding:clamp(28px,3.2vw,46px)}
.svc h2,.mat-list h2{font-size:clamp(30px,3.3vw,52px);margin-bottom:24px;line-height:1.25}
.svc ul{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 40px;font-size:clamp(18px,1.7vw,24px);font-weight:500}
.mat-list{padding:clamp(72px,9vw,130px) clamp(24px,3.2vw,46px) 0}
.mat-list li{display:flex;justify-content:space-between;gap:24px;align-items:center;border-top:6px solid var(--k);padding:clamp(18px,2vw,30px) 0;font-size:clamp(18px,1.8vw,26px);font-weight:500;line-height:1.5}
.mat-list b{font-family:'Black Han Sans';font-weight:400;font-size:clamp(34px,4.4vw,72px);white-space:nowrap;line-height:1.1}
.mat-list small{font:700 18px 'IBM Plex Sans KR'}
.works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);padding:0 var(--gap)}
.w{position:relative;border:0;padding:0;aspect-ratio:3/4;overflow:hidden;background:var(--t);cursor:pointer;transition:transform .45s var(--spring)}
.w img{width:100%;height:100%;object-fit:cover}
.w:hover{transform:scale(.985)}
.w span{position:absolute;left:0;bottom:0;background:var(--y);font-weight:700;padding:8px 16px}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;background:#000;padding:0;opacity:0;transition:opacity .22s}
.lb.open{opacity:1}
.lb::backdrop{background:#000}
.lb-stage{height:calc(100% - 76px);display:grid;place-items:center;padding:16px;transform:scale(.97);transition:transform .5s var(--spring);overflow:hidden}
.lb.open .lb-stage{transform:none}
.lb-stage img,.lb-stage video{max-height:calc(100svh - 108px);max-width:100%;width:auto;height:auto}
.lb-bar{height:76px;display:flex;gap:8px;justify-content:center;align-items:center}
.lb-bar button{background:var(--y);color:#000;border:0;font-weight:700;padding:10px 24px;cursor:pointer}
.lb-bar button:focus-visible{outline-color:#fff}
.contact{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap);padding:0 var(--gap)}
.c-info{background:var(--y);align-self:start}
.form{display:grid;gap:18px;background:var(--t);position:relative}
.form label{display:grid;gap:6px;font-weight:700}
.form input:not([type=checkbox]),.form select,.form textarea{width:100%;background:#fff;border:3px solid var(--k);border-radius:0;padding:12px 14px;font-weight:400;font-size:18px}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--k);outline-offset:2px}
.form ::placeholder{color:#555}
.hp{position:absolute;left:-9999px}
.form .agree{display:flex;gap:12px;font-weight:500;align-items:flex-start;line-height:1.7}
.agree input{width:24px;height:24px;margin-top:2px;flex:none;accent-color:#000}
.form .btn{justify-self:start}
.note{min-height:1.8em;font-weight:700}
.note[data-kind=bad]{color:#A30000}
.legal{padding:0 clamp(24px,3.2vw,46px) clamp(64px,8vw,120px);max-width:860px}
.legal h2{font-size:30px;margin:36px 0 8px;line-height:1.3}

@media (hover:hover){.t-photo:hover img{transform:scale(1.03)}}
@media (max-width:999px){
  :root{--nav:64px}
  .nav nav{display:none}
  .menu-btn{display:block}
  .brand{font-size:24px}
  .hero{height:auto;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .t-head{grid-column:1/3;grid-row:auto;min-height:clamp(260px,44vw,380px)}
  .t-head h1{font-size:13.2vw}
  .t-p1,.t-p2{grid-column:auto;grid-row:auto;aspect-ratio:1}
  .t-mark,.t-price{grid-column:1/3;grid-row:auto;gap:24px}
  .t-cta{grid-column:1/3;grid-row:auto;font-size:30px;min-height:120px}
  .t-cta br{display:none}
  .step,.mat,.pkg,.contact,.edge{grid-template-columns:minmax(0,1fr)}
  .wall-grid,.works{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mat-p{aspect-ratio:1;max-height:none}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot nav{align-items:flex-start}
}
@media (max-width:520px){
  body{font-size:17px}
  .cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc ul{grid-template-columns:minmax(0,1fr)}
  dl>div{grid-template-columns:minmax(0,1fr);gap:0}
  .mat-list li{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vo .16s ease both}
  ::view-transition-new(root){animation:vn .6s var(--spring) both}
  @keyframes vo{to{opacity:0}}
  @keyframes vn{from{opacity:0;transform:translateY(14px)}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}