@charset "utf-8";
/* ==========================================================================
   LUXURY & N — sub pages
   Implemented from Figma · node 10015:4956 (회사소개)
   Loaded AFTER home.css, which supplies the tokens and the shared chrome
   (header, family menu, nav overlay, footer, cursor, reveal primitives).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@500;600;700&display=swap');

:root{
  --ff-alt:'Albert Sans','Pretendard',-apple-system,sans-serif;
  --gray-3:#818181;
  --gray-4:#9f9f9f;
  --chev:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%231a1a1a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* shared section furniture — Figma: eyebrow Cormorant Bold 30 #818181,
   heading Pretendard Bold 40 #1a1a1a */
.sec{padding:var(--sec-gap) var(--gut)}
.sec__in{width:100%;max-width:1440px;margin:0 auto}
.sec__head{text-align:center}
.eyebrow{font-family:var(--ff-en);font-weight:700;font-size:clamp(18px,1.5625vw,30px);
  color:var(--gray-3);line-height:1.2}
.sec__head h2{margin-top:clamp(8px,.8333vw,16px);
  font-size:clamp(26px,2.0833vw,40px);font-weight:700;color:var(--ink);
  letter-spacing:-.03em;line-height:1.3}

/* ==========================================================================
   HERO  ·  node 10015:5626
   Modelled on kiumcnd /company/ceo.php: the photo starts as a small band at
   the bottom and spreads up and out until it fills the screen. Before it
   spreads, the headline is transparent with that same photo showing through
   it (background-clip:text); as the photo takes over, the type resolves to
   solid white and the header flips from light to dark.
   ========================================================================== */
.chero{position:relative;height:100vh;height:100svh;min-height:560px;
  background:var(--white);overflow:hidden}

.chero__img{position:absolute;inset:0;z-index:0;
  /* kium starts this as a small plate on the bottom edge — 260px tall here,
     so it must be a px inset from the top rather than a percentage */
  clip-path:inset(calc(100% - 260px) 33% 0% 33%);
  transition:clip-path 1.25s var(--ease-door);
}
.chero.is-active .chero__img{clip-path:inset(28% 8% 0% 8%)}
.chero.is-finish .chero__img{clip-path:inset(0% 0% 0% 0%)}
.chero__img img{width:100%;height:100%;object-fit:cover}
.chero__img::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);
  opacity:0;transition:opacity 1s var(--ease)}
.chero.is-finish .chero__img::after{opacity:1}

.chero__in{position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(22px,2.6042vw,50px);text-align:center;padding:var(--hd-h) var(--gut) 0;
  transform:translateY(-50px)}

.chero__eyebrow{font-family:var(--ff-alt);font-weight:700;
  font-size:clamp(18px,1.6667vw,32px);color:var(--ink);
  transition:color 1s var(--ease)}
.chero.is-finish .chero__eyebrow{color:var(--white)}

.chero__tit{display:flex;flex-direction:column;gap:clamp(2px,.3125vw,6px);
  font-size:clamp(28px,3.3333vw,64px);line-height:1.2;white-space:nowrap}
/* the photo reads through the letterforms until it takes the whole screen */
.chero__tit span{
  display:block;
  background:var(--chero-img) no-repeat center / cover;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  transition:color 1s var(--ease);
}
.chero.is-finish .chero__tit span{color:var(--white)}
.chero__tit .ko{font-family:var(--ff);font-weight:700}
.chero__tit .en{font-family:var(--ff-alt);font-weight:700}

/* ==========================================================================
   BREADCRUMB  ·  kiumcnd .sub-menu, rebuilt in our palette
   80px bar, 1px rule, 238px current-section cell with a dropdown, then the
   sibling links with a 3px gold underline on the active one.
   ========================================================================== */
/* scrolls away with the page — not pinned */
.bcrumb{position:relative;z-index:600;height:clamp(58px,4.1667vw,80px);
  background:var(--white);border-bottom:1px solid var(--line)}
.bcrumb__in{max-width:1440px;height:100%;margin:0 auto;padding:0 var(--gut);
  display:flex;justify-content:space-between}

/* kium's `.dep1`: a fixed 238px cell that OWNS the dropdown's positioning.
   Previously the list was a sibling of the button, so it resolved against
   the full-width bar and stretched the whole viewport. */
.bcrumb__dep1{position:relative;width:100%;max-width:238px;height:100%;
  border-right:1px solid var(--line)}
.bcrumb__now{width:100%;height:100%;
  display:flex;align-items:center;
  font-size:clamp(13px,.8333vw,16px);font-weight:700;color:var(--ink);
  letter-spacing:-.05em;cursor:pointer;background:none;text-align:left}
.bcrumb__now::after{content:"";position:absolute;top:50%;right:25px;
  width:11px;height:7px;transform:translateY(-50%);
  background:var(--chev) no-repeat center / contain;
  transition:transform .4s var(--ease);pointer-events:none}
.bcrumb__now[aria-expanded="true"]::after{transform:translateY(-50%) rotate(180deg)}

/* kium: width calc(100% + 40px) — a touch wider than the cell, nothing more */
.bcrumb__list{position:absolute;top:calc(100% + 1px);left:0;
  width:calc(100% + 40px);background:var(--white);
  border:1px solid var(--line);border-top:0;z-index:15;display:none}
.bcrumb__list.is-open{display:block}
.bcrumb__list a{display:flex;align-items:center;height:48px;padding-left:36px;
  font-size:clamp(13px,.8333vw,16px);color:var(--ink);letter-spacing:-.05em;
  transition:color .3s,background-color .3s}
.bcrumb__list a:hover{color:var(--gold);background:rgba(170,148,119,.06)}

.bcrumb__dep2{display:flex;gap:clamp(20px,2.8646vw,55px);height:100%}
.bcrumb__dep2 a{position:relative;display:inline-flex;align-items:center;height:100%;
  font-size:clamp(13px,.8333vw,16px);color:var(--ink);letter-spacing:-.05em;
  transition:color .3s}
.bcrumb__dep2 a:hover{color:var(--gold)}
.bcrumb__dep2 a.is-on{color:var(--gold);font-weight:700}
.bcrumb__dep2 a.is-on::after{content:"";position:absolute;left:0;bottom:-1px;
  width:100%;height:3px;background:var(--gold)}
/* siblings whose pages are not built yet — same slot, plainly inert */
.bcrumb__dep2 span{display:inline-flex;align-items:center;height:100%;
  font-size:clamp(13px,.8333vw,16px);color:var(--gray-4);letter-spacing:-.05em;cursor:default}

/* The banner runs straight into the footer. `.cbanner + .ft` cannot do this:
   the banner is inside <main> while the footer is its sibling, so they are
   not adjacent. The footer opts in explicitly instead. */
.ft--flush{margin-top:0}

/* ==========================================================================
   01  ·  BRAND   node 10057:2555
   The copy holds still; the photograph rises from beneath it. Where the two
   overlap the type switches to its light treatment — done with a second,
   clipped copy of the same block rather than a blend mode, so the colours
   stay exactly as drawn.
   ========================================================================== */
/* 210px below the breadcrumb bar */
.brand{position:relative;background:var(--white);padding-top:clamp(80px,10.9375vw,210px)}
.brand__stage{position:relative}
.brand__stick{position:sticky;top:0;height:100vh;height:100svh;
  display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.brand__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--gut)}
/* the light copy is revealed from the bottom as the photo climbs */
.brand__layer--on{clip-path:inset(100% 0 0 0)}

.brand__eyebrow{font-family:var(--ff-en);font-weight:700;
  font-size:clamp(18px,1.5625vw,30px);color:var(--gray-3);line-height:1.2}
.brand__ko{margin-top:clamp(8px,.8333vw,16px);
  font-size:clamp(24px,2.0833vw,40px);font-weight:700;color:var(--ink);letter-spacing:-.03em}
.brand__en{display:block;margin-top:clamp(6px,.5208vw,10px);
  font-family:var(--ff-en);font-weight:600;
  font-size:clamp(40px,4.6875vw,90px);line-height:1.15;
  letter-spacing:clamp(3px,.46875vw,9px);color:var(--gold)}
.brand__body{margin-top:clamp(20px,2.0833vw,40px);
  font-size:clamp(15px,1.0417vw,20px);font-weight:300;line-height:1.6;color:var(--black)}
/* light treatment over the photo */
.brand__layer--on .brand__eyebrow{color:rgba(255,255,255,.7)}
.brand__layer--on .brand__ko,
.brand__layer--on .brand__body{color:var(--white)}
.brand__layer--on .brand__en{color:var(--c-gold-pale,#efe7d8)}

/* Figma: a 1920×2694 photo shown through a 1920×830 window at maskY 1442,
   so the visible band is 1442/(2694−830) = 77.4% down. */
.brand__img{position:relative;z-index:1;height:clamp(360px,43.2292vw,830px);overflow:hidden}
.brand__img img{width:100%;height:100%;object-fit:cover;object-position:center 77.4%}
.brand__img::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}

/* ==========================================================================
   02  ·  CORE VALUE   node 10057:2314
   ========================================================================== */
.cv{background:var(--white)}
.cv__row{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;
  gap:clamp(10px,2.6042vw,50px);margin-top:clamp(40px,5.2083vw,100px)}
.cv__item{text-align:center}
/* the index sits at the TOP-RIGHT of the word, not the left */
.cv__label{display:inline-flex;align-items:flex-start;gap:clamp(4px,.4167vw,8px)}
.cv__label .cv__no{order:2}
.cv__no{font-family:var(--ff-num);font-size:clamp(20px,2.0833vw,40px);
  letter-spacing:-.075em;color:var(--gray-4);line-height:1.2}
.cv__en{font-family:var(--ff-en);font-weight:600;
  font-size:clamp(38px,4.6875vw,90px);line-height:1.15;
  letter-spacing:clamp(2px,.2344vw,4.5px);color:var(--gold)}
.cv__body{margin-top:clamp(16px,1.7188vw,33px);
  font-size:clamp(13px,.8333vw,16px);font-weight:300;line-height:1.6;color:var(--black)}

/* ==========================================================================
   03  ·  OUR PLEDGE   node 10057:2331
   ========================================================================== */
.pledge{position:relative;background:var(--black)}

/* Sticky backdrop, exactly one screen tall and never more — the photo holds
   still while the copy scrolls over it, and the section ends when the copy
   does. `margin-bottom:-100vh` takes the layer back out of the flow so it
   contributes no height of its own. */
.pledge__bg{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100svh;
  z-index:0;overflow:hidden}
/* clip lives on an inner wrapper: clipping the sticky element itself is
   asking for trouble */
.pledge__crop{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(14% 22% 14% 22%);
  transition:clip-path 1.4s var(--ease-door)}
.pledge.is-in .pledge__crop{clip-path:inset(0% 0% 0% 0%)}

/* Figma places a 2370×1693 photo in a 1920×1080 window at (-225,-613):
   225px clear on both sides (centred) and the image bottom flush with the
   window bottom. object-fit:cover cannot express that — it fits to width and
   hands back a wider, zoomed-out crop — so the size is stated directly. */
.pledge__crop img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:123.44%;height:auto;max-width:none;display:block}
/* below ~1.13 aspect the explicit size stops covering, so fall back */
@media (max-aspect-ratio:114/100){
  .pledge__crop img{position:absolute;inset:0;left:0;transform:none;
    width:100%;height:100%;object-fit:cover;object-position:center bottom}
}
.pledge__crop::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}

.pledge__in{position:relative;z-index:2;width:100%;max-width:1100px;margin:0 auto;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--hd-h) + clamp(30px,3.125vw,60px)) var(--gut) clamp(50px,5.2083vw,100px);
  text-align:center;
  opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease) .55s,transform 1s var(--ease-out) .55s}
.pledge.is-in .pledge__in{opacity:1;transform:none}
.pledge__seal{width:clamp(46px,3.6458vw,70px);height:auto;margin:0 auto;display:block}
.pledge__eyebrow{margin-top:clamp(22px,2.0833vw,40px);
  font-family:var(--ff-en);font-weight:700;font-size:clamp(18px,1.5625vw,30px);color:var(--white)}
.pledge h2{margin-top:clamp(8px,.8333vw,16px);
  font-size:clamp(24px,2.0833vw,40px);font-weight:700;color:var(--white);line-height:1.4}
.pledge p{margin-top:clamp(26px,3.125vw,60px);
  font-size:clamp(14px,1.0417vw,20px);font-weight:300;line-height:1.8;color:var(--white)}
.pledge p + p{margin-top:1.8em}
.pledge__rule{height:1px;background:rgba(255,255,255,.3);margin:clamp(30px,2.7604vw,53px) 0 0}
.pledge__sign{margin-top:clamp(28px,3.1771vw,61px)}
.pledge__sign strong{display:block;font-size:clamp(16px,1.25vw,24px);font-weight:700;color:var(--white)}
.pledge__sign span{display:block;margin-top:clamp(10px,1.0417vw,20px);
  font-size:clamp(13px,.8333vw,16px);font-weight:300;color:var(--white)}

/* ==========================================================================
   04  ·  OVERVIEW   node 10057:2556  —  table locked to 1100px
   ========================================================================== */
.ov{background:var(--white)}
.ov__table{width:100%;max-width:1100px;margin:clamp(34px,3.125vw,60px) auto 0;
  border-collapse:collapse;border-top:2px solid var(--ink)}
.ov__table th,.ov__table td{
  padding:clamp(15px,1.3542vw,26px) clamp(6px,1.0417vw,20px);
  border-bottom:1px solid var(--line);text-align:left;vertical-align:top;
  font-size:clamp(14px,.9375vw,18px);line-height:1.8}
.ov__table th{width:clamp(96px,11.4583vw,220px);font-weight:700;color:var(--ink);white-space:nowrap}
.ov__table td{color:var(--ink-2);font-weight:300}
.ov__table tr{transition:background-color .4s}
.ov__table tr:hover{background:rgba(170,148,119,.05)}
.ov__table a{transition:color .35s}
.ov__table a:hover{color:var(--gold)}

/* ==========================================================================
   CONTACT BANNER   node 10057:2360
   ========================================================================== */
.cbanner{position:relative;overflow:hidden;
  min-height:clamp(360px,28.6458vw,550px);display:flex;align-items:center;
  padding:clamp(50px,5.2083vw,100px) var(--gut)}
.cbanner__bg{position:absolute;inset:0}
.cbanner__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.cbanner__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.cbanner__in{position:relative;z-index:2;width:100%;max-width:1440px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,3.125vw,60px);flex-wrap:wrap}
.cbanner h2{font-size:clamp(26px,2.6042vw,50px);font-weight:700;color:var(--white);
  line-height:1.4;letter-spacing:-.02em}
.cbanner p{margin-top:clamp(14px,1.5625vw,30px);
  font-size:clamp(14px,1.0417vw,20px);font-weight:300;line-height:1.4;color:var(--white)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .cv__row{grid-template-columns:1fr;gap:clamp(34px,6vw,56px)}
}
@media (max-width:860px){
  .chero__img{clip-path:inset(70% 20% 0% 20%)}
  .chero.is-active .chero__img{clip-path:inset(24% 4% 0% 4%)}
  .brand__stick{height:auto;position:relative;padding:clamp(40px,10vw,80px) 0}
  .brand__layer{position:relative;inset:auto}
  .brand__layer--on{display:none}
  .brand__img{height:clamp(280px,60vw,420px)}
  .cbanner__in{flex-direction:column;align-items:flex-start}
  .bcrumb__in{padding:0}
  .bcrumb__now{padding-left:var(--gut);max-width:none;flex:1 1 auto}
  .bcrumb__dep2{padding-right:var(--gut);gap:18px}
  .bcrumb__list{left:0;width:100%}
}
@media (max-width:560px){
  .chero__tit{white-space:normal}
  .bcrumb__dep2{display:none}
  .bcrumb__now{border-right:0}
  .ov__table th,.ov__table td{display:block;width:auto;border-bottom:0;padding-bottom:0}
  .ov__table td{padding-top:.4em;padding-bottom:clamp(14px,4vw,20px);border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
  .chero__img{clip-path:inset(0)!important;transition:none}
  .chero__tit span{color:var(--white)!important}
  .chero__eyebrow{color:var(--white)!important}
  .chero__img::after{opacity:1}
  .pledge__bg img{transform:none}
}