:root{
  --black:#050505;
  --black-2:#090806;
  --black-3:#11100d;
  --paper:#f4efe6;
  --muted:#aaa197;
  --muted-2:#7e756a;
  --gold:#b47a1b;
  --gold-2:#d8a743;
  --gold-3:#f0cf76;
  --gold-4:#ffe5a1;
  --line:rgba(229,184,90,.18);
  --white-line:rgba(255,255,255,.09);
  --display:"Cormorant Garamond","Times New Roman",serif;
  --serif:"Noto Serif KR","Batang",serif;
  --sans:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --header-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:#050505;color:var(--paper);font-family:var(--sans)}
html{scroll-behavior:auto}
body{overflow:hidden}
button,a{font:inherit}
a{color:inherit;text-decoration:none}
button{color:inherit}
::selection{background:rgba(229,184,90,.30);color:#fff8e6}
.skip-link{position:fixed;left:14px;top:-100px;z-index:20000;background:#fff;color:#111;padding:10px 14px;border-radius:6px}
.skip-link:focus{top:14px}
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.045;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.pointer-light{
  position:fixed;width:680px;height:680px;border-radius:50%;z-index:4;pointer-events:none;
  left:0;top:0;transform:translate3d(calc(var(--px,50vw) - 50%),calc(var(--py,50vh) - 50%),0);
  background:radial-gradient(circle,rgba(240,207,118,.055),rgba(240,207,118,.018) 28%,transparent 68%);
  filter:blur(2px);transition:opacity .3s;opacity:.85;
}
.particle-canvas{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.46}
.top-progress{position:fixed;left:0;right:0;top:0;height:1px;z-index:11000;background:rgba(255,255,255,.035)}
.top-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#7d4d08,#ffd86c,#b2710d)}

.header{
  position:fixed;left:0;right:0;top:0;height:var(--header-h);z-index:10000;
  display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,3.3vw,58px);
  background:linear-gradient(180deg,rgba(3,3,3,.88),rgba(3,3,3,.56) 70%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .4s,border-color .4s,transform .4s;
}
.header.scrolled{background:rgba(5,5,5,.88);border-bottom:1px solid rgba(229,184,90,.09)}
.brand{display:flex;flex-direction:column;line-height:1;position:relative}
.brand strong{font-family:var(--display);font-size:24px;letter-spacing:.035em;font-weight:600}
.brand small{margin-top:8px;color:#d1ad60;font-size:8.5px;font-weight:700;letter-spacing:.21em}
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,35px)}
.nav>a{position:relative;font-family:var(--display);font-size:11px;letter-spacing:.17em;font-weight:700;color:#a9a195;padding:12px 0;transition:color .3s}
.nav>a::after{content:"";position:absolute;left:0;right:100%;bottom:5px;height:1px;background:var(--gold-3);transition:right .35s var(--ease)}
.nav>a:hover,.nav>a.active{color:#f2d382}
.nav>a.active::after,.nav>a:hover::after{right:0}
.contact-nav{border:1px solid rgba(229,184,90,.35);padding:12px 18px!important}
.contact-nav::after{display:none}
.sound-toggle{
  border:0;background:none;padding:9px 2px;display:flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--display);font-size:10.5px;letter-spacing:.12em;color:#c2b8aa;
}
.sound-toggle:hover{color:#e6c56d}
.equalizer{width:16px;height:12px;display:flex;gap:2px;align-items:end}
.equalizer i{display:block;width:2px;height:4px;background:currentColor;transform-origin:bottom}
.sound-toggle.is-on .equalizer i:nth-child(1){animation:eq1 .78s ease-in-out infinite alternate}
.sound-toggle.is-on .equalizer i:nth-child(2){animation:eq2 .63s ease-in-out infinite alternate}
.sound-toggle.is-on .equalizer i:nth-child(3){animation:eq3 .9s ease-in-out infinite alternate}
@keyframes eq1{to{height:11px}}@keyframes eq2{to{height:8px}}@keyframes eq3{to{height:10px}}
.menu-toggle{display:none}

.page-rail{
  position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:8500;display:grid;justify-items:center;gap:9px;
  font-family:var(--display);font-size:10px;letter-spacing:.08em;color:#a28f70;
}
.rail-index{color:#e2bd65;font-size:11px}
.rail-line{width:1px;height:100px;background:rgba(229,184,90,.14);position:relative;overflow:hidden}
.rail-line i{position:absolute;left:0;top:0;width:100%;height:100%;transform:scaleY(0);transform-origin:top;background:linear-gradient(#8f590c,#f3cc68)}

.site{
  position:relative;z-index:5;height:100svh;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y proximity;scroll-padding-block:0;scroll-behavior:auto;overscroll-behavior-y:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
.site::-webkit-scrollbar{width:0;height:0}
.scene{
  position:relative;min-height:100svh;height:100svh;overflow:hidden;display:flex;align-items:center;
  scroll-snap-align:start;scroll-snap-stop:normal;isolation:isolate;
}
.scene-inner{width:min(1240px,calc(100% - 110px));margin:0 auto;position:relative;z-index:6;padding-top:var(--header-h)}
.eyebrow{font-family:var(--display);font-size:12px;letter-spacing:.32em;font-weight:700;color:#d8b45e;margin-bottom:18px}
.section-title{font-family:var(--serif);font-size:clamp(36px,3.4vw,55px);line-height:1.28;letter-spacing:-.035em;font-weight:500;margin:0;color:#f0ebe2}
.section-title em{font-style:normal;color:#d9b256}
.body-copy{color:#c9c0b4;font-size:15px;line-height:1.85;font-weight:400;word-break:keep-all}
.reveal{opacity:0;translate:0 24px;filter:blur(5px);transition:opacity .82s var(--ease),translate .82s var(--ease),filter .82s var(--ease)}
.scene.in-view .reveal{opacity:1;translate:0 0;filter:none}
.scene.in-view .reveal:nth-child(2){transition-delay:.05s}
.scene.in-view .reveal:nth-child(3){transition-delay:.10s}
.scene.in-view .reveal:nth-child(4){transition-delay:.15s}

/* Entrance */
.entrance{
  position:fixed;inset:0;z-index:30000;background:#020202;display:grid;place-items:center;overflow:hidden;
  transition:opacity 1.15s var(--ease),visibility 1.15s;
}
.entrance.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.entrance-noise{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.entrance::before{content:"";position:absolute;width:780px;height:780px;border-radius:50%;background:radial-gradient(circle,rgba(230,180,75,.10),rgba(230,180,75,.025) 38%,transparent 70%);filter:blur(10px)}
.entrance-orbit{position:absolute;border:1px solid rgba(229,184,90,.10);border-radius:50%;animation:orbitSpin 24s linear infinite}
.orbit-a{width:min(78vw,860px);aspect-ratio:1;transform:rotate(14deg)}
.orbit-b{width:min(62vw,690px);aspect-ratio:1;transform:rotate(-19deg);animation-direction:reverse;animation-duration:31s}
@keyframes orbitSpin{to{rotate:360deg}}
.entrance-card{text-align:center;position:relative;z-index:2;width:min(720px,calc(100% - 40px));padding:52px 30px}
.entrance-kicker{font-family:var(--display);font-size:11px;letter-spacing:.34em;color:#b99343;font-weight:700;margin-bottom:24px}
.entrance-brand{font-family:var(--display);line-height:.75;background:linear-gradient(110deg,#a86a11,#f0c86f 43%,#ffe7a4 52%,#c38120 78%,#f0cf75);background-clip:text;-webkit-background-clip:text;color:transparent}
.entrance-brand span{display:block;font-size:clamp(96px,13vw,172px);font-weight:600;letter-spacing:-.055em;padding:.03em}
.entrance-brand small{display:block;font-size:clamp(44px,6vw,75px);font-weight:600;letter-spacing:-.02em;line-height:1}
.entrance-line{height:1px;width:min(380px,70%);margin:30px auto 22px;background:linear-gradient(90deg,transparent,#b7832d,transparent)}
.entrance-card p{font-size:14px;color:#c8bfb2;letter-spacing:.02em;margin:0 0 27px}
.enter-primary{
  position:relative;min-width:188px;padding:13px 24px;border:1px solid rgba(229,184,90,.52);background:rgba(229,184,90,.03);cursor:pointer;
  color:#f1cf75;font-family:var(--display);font-size:13px;letter-spacing:.29em;font-weight:700;overflow:hidden;transition:border-color .3s,color .3s,background .3s;
}
.enter-primary:hover{border-color:#f0ca68;color:#ffe9ad;background:rgba(229,184,90,.08)}
.enter-primary i{position:absolute;inset:auto -30% -2px;height:1px;background:linear-gradient(90deg,transparent,#ffe8a1,transparent);animation:enterSweep 2.4s ease-in-out infinite}
@keyframes enterSweep{0%{transform:translateX(-45%)}100%{transform:translateX(45%)}}
.entrance-sound-note{font-family:var(--display);font-size:10px;letter-spacing:.18em;color:#6d6253;margin-top:11px}
.enter-silent{margin-top:20px;border:0;background:none;color:#948878;cursor:pointer;font-family:var(--display);font-size:9.5px;letter-spacing:.16em;text-decoration:underline;text-decoration-color:rgba(229,184,90,.18);text-underline-offset:5px}
.enter-silent:hover{color:#c8ae76}

/* Hero */
.hero{background:#020202}
.hero-video{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;filter:saturate(.88) contrast(1.14) brightness(.54);transform:scale(1.03);animation:heroBreath 18s ease-in-out infinite alternate}
@keyframes heroBreath{to{transform:scale(1.08) translate3d(0,-.5%,0)}}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,transparent 0 26%,rgba(0,0,0,.18) 52%,rgba(0,0,0,.66) 100%),linear-gradient(180deg,rgba(0,0,0,.45),transparent 22%,transparent 74%,rgba(0,0,0,.77))}
.hero-beam{position:absolute;width:110vw;height:18vw;border-radius:50%;filter:blur(26px);opacity:.11;background:linear-gradient(90deg,transparent,#f0b743,transparent);mix-blend-mode:screen}
.beam-one{left:-5vw;top:39%;transform:rotate(-7deg);animation:beamDrift 12s ease-in-out infinite alternate}
.beam-two{left:-8vw;top:56%;transform:rotate(6deg);opacity:.06;animation:beamDrift2 15s ease-in-out infinite alternate}
@keyframes beamDrift{to{transform:translateX(6vw) rotate(-3deg)}}@keyframes beamDrift2{to{transform:translateX(-4vw) rotate(3deg)}}
.hero-ghost{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font-family:var(--display);font-size:35vw;line-height:1;font-weight:700;letter-spacing:-.09em;color:rgba(255,255,255,.012);white-space:nowrap}
.hero-shell{position:relative;z-index:6;width:min(1260px,calc(100% - 120px));height:100%;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:var(--header-h)}
.hero-center{text-align:center;margin-top:-2vh}
.hero-wordmark{font-family:var(--display);margin:0;color:#e1b34f;line-height:.78;font-weight:600;text-shadow:0 18px 60px rgba(209,149,31,.12)}
.hero-hayan{display:block;font-size:clamp(118px,13vw,198px);letter-spacing:-.065em;background:linear-gradient(102deg,#ad6c11,#f2cd72 42%,#ffe5a0 52%,#ba7818 76%,#eccb70);background-clip:text;-webkit-background-clip:text;color:transparent;padding:.03em .04em .16em}
.hero-company{display:block;font-size:clamp(58px,6vw,88px);letter-spacing:-.025em;background:linear-gradient(100deg,#c98d2c,#f3d480,#ad6a12);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-title{font-family:var(--serif);font-size:clamp(30px,3vw,48px);font-weight:500;letter-spacing:-.045em;margin:34px 0 13px;color:#f2eee6}
.hero-copy{font-size:14.5px;line-height:1.78;color:#cec6bb;margin:0 auto;max-width:760px;word-break:keep-all}
.hero-side-note{position:absolute;left:-24px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:center;font-family:var(--display);font-size:10px;letter-spacing:.20em;color:#856e44;white-space:nowrap}
.hero-capabilities{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);width:min(980px,78vw);display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(229,184,90,.18);background:rgba(3,3,3,.35);backdrop-filter:blur(9px)}
.hero-cap{min-height:76px;display:grid;place-items:center;text-align:center;border-right:1px solid rgba(229,184,90,.14);padding:10px;transform-style:preserve-3d}
.hero-cap:last-child{border-right:0}
.hero-cap b{font-family:var(--display);font-size:17px;letter-spacing:.035em;color:#e8c66c}
.hero-cap span{font-size:12px;color:#c0b6a8;margin-top:-13px}
.hero-ribbon{position:absolute;left:50%;bottom:47px;transform:translateX(-50%);display:flex;align-items:center;gap:15px;font-family:var(--display);font-size:10px;letter-spacing:.12em;color:#846f48}
.hero-ribbon i{width:24px;height:1px;background:linear-gradient(90deg,transparent,#9c7a39,transparent)}
.scroll-cue{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:5px;font-family:var(--display);font-size:10px;letter-spacing:.15em;color:#6d6251}
.scroll-cue i{width:1px;height:23px;background:linear-gradient(#b48635,transparent);animation:scrollCue 1.8s ease-in-out infinite}
@keyframes scrollCue{50%{transform:scaleY(.45);transform-origin:top}}

/* ABOUT */
.about{background:linear-gradient(145deg,#080807 0%,#050505 52%,#0b0906 100%)}
.section-orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.orb-left{width:680px;height:680px;left:-360px;top:-150px;background:radial-gradient(circle,rgba(221,164,56,.08),transparent 67%)}
.orb-right{width:600px;height:600px;right:-340px;bottom:-180px;background:radial-gradient(circle,rgba(143,183,207,.045),transparent 66%)}
.about-layout{display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:auto auto;gap:34px 72px;align-items:center}
.about-copy-block{align-self:end}
.about-lead{font-family:var(--serif);font-size:18px;line-height:1.75;color:#ddd4c7;margin:23px 0 12px}
.about-lead strong{color:#e2bd64;font-weight:500}
.keyword-marquee{margin-top:25px;width:100%;overflow:hidden;border-top:1px solid rgba(229,184,90,.12);border-bottom:1px solid rgba(229,184,90,.12);padding:11px 0}
.keyword-track{display:flex;gap:18px;width:max-content;animation:marquee 20s linear infinite;font-family:var(--display);font-size:11px;letter-spacing:.15em;color:#917b56}
.keyword-track i{font-style:normal;color:#d2a950}
@keyframes marquee{to{transform:translateX(-50%)}}
.about-visual{display:grid;place-items:center;justify-self:center;width:100%}
.emblem-stage{width:min(395px,31vw);aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 38% 34%,rgba(255,221,137,.06),rgba(255,255,255,.014) 33%,rgba(0,0,0,.18) 70%);border:1px solid rgba(229,184,90,.16);box-shadow:inset 0 0 80px rgba(229,184,90,.03),0 50px 100px rgba(0,0,0,.22)}
.emblem-stage img{width:54%;height:54%;object-fit:contain;filter:drop-shadow(0 22px 30px rgba(212,151,32,.17));opacity:.92}
.emblem-ring{position:absolute;border:1px solid rgba(229,184,90,.14);border-radius:50%}
.ring-1{inset:10%;animation:orbitSpin 28s linear infinite}
.ring-2{inset:21%;border-style:dashed;animation:orbitSpin 19s linear infinite reverse}
.orbit-word{position:absolute;font-family:var(--display);font-size:10px;letter-spacing:.15em;color:#9a8257}
.word-a{top:7%;left:50%;transform:translateX(-50%)}.word-b{right:-1%;top:48%;transform:rotate(90deg)}.word-c{bottom:6%;left:50%;transform:translateX(-50%)}.word-d{left:-1%;top:48%;transform:rotate(-90deg)}
.strength-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.strength-card{position:relative;min-height:178px;padding:24px 22px;border:1px solid rgba(229,184,90,.14);background:linear-gradient(145deg,rgba(19,17,14,.84),rgba(7,7,7,.92));overflow:hidden;transform-style:preserve-3d;transition:border-color .35s,background .35s}
.strength-card::after{content:"";position:absolute;inset:auto -30% -70% 10%;height:120px;background:radial-gradient(circle,rgba(229,184,90,.12),transparent 65%);opacity:0;transition:.4s}
.strength-card:hover{border-color:rgba(229,184,90,.38);background:linear-gradient(145deg,rgba(27,23,17,.9),rgba(8,8,8,.96))}
.strength-card:hover::after{opacity:1}
.strength-mark{font-family:var(--display);font-size:10.5px;letter-spacing:.15em;color:#9f7a35}
.strength-card h3{font-family:var(--serif);font-size:16px;margin:13px 0 8px;color:#eee6db;font-weight:600}
.strength-card p{font-size:13.5px;line-height:1.68;color:#c0b7ab;margin:0}

/* SYSTEM */
.system{background:radial-gradient(circle at 70% 4%,rgba(229,184,90,.08),transparent 25%),linear-gradient(180deg,#070706,#050505)}
.system-watermark{position:absolute;right:-3vw;top:50%;transform:translateY(-50%) rotate(90deg);font-family:var(--display);font-weight:700;font-size:17vw;letter-spacing:-.05em;color:rgba(255,255,255,.012)}
.system-layout{display:grid;grid-template-columns:.76fr 1.24fr;grid-template-rows:auto auto;gap:34px 70px;align-items:center}
.system-intro .body-copy{max-width:480px;margin-top:18px}
.process{position:relative;display:grid;gap:8px;padding-left:34px}
.process-line{position:absolute;left:7px;top:15px;bottom:15px;width:1px;background:rgba(229,184,90,.10)}
.process-line i{position:absolute;left:0;top:0;width:1px;height:100%;transform:scaleY(0);transform-origin:top;background:linear-gradient(#80500b,#f0c968,#80500b);transition:transform 1.8s var(--ease) .2s}
.system.in-view .process-line i{transform:scaleY(1)}
.process-step{display:grid;grid-template-columns:50px 1fr;gap:16px;align-items:center;padding:14px 17px;border:1px solid rgba(229,184,90,.11);background:linear-gradient(145deg,rgba(16,15,13,.76),rgba(7,7,7,.85));position:relative;transform-style:preserve-3d}
.process-step::before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#d5a849;left:-31px;top:50%;transform:translateY(-50%);box-shadow:0 0 0 5px rgba(213,168,73,.08)}
.process-number{font-family:var(--display);font-size:27px;color:#6c5633}
.process-step h3{font-family:var(--display);font-size:22px;color:#e7c66d;margin:0 0 4px}
.process-step p{font-size:13px;line-height:1.65;color:#c1b8ac;margin:0}
.process-step small{display:block;margin-top:7px;font-family:var(--display);font-size:10.5px;letter-spacing:.17em;color:#665b4b}
.system-statement{grid-column:1/-1;margin:0;padding:18px 24px;border-left:1px solid #b8872f;background:linear-gradient(90deg,rgba(229,184,90,.05),transparent);font-family:var(--serif);font-size:16px;line-height:1.7;color:#cfc6b9}
.system-statement strong{color:#e6c46c;font-weight:600}

/* EXPERTISE */
.expertise{background:linear-gradient(135deg,#050505,#0b0a08)}
.expertise-emblem{position:absolute;left:50%;right:auto;bottom:-20vw;width:58vw;transform:translateX(-50%);opacity:.025;filter:saturate(0)}
.expertise-emblem img{width:100%}
.expertise-layout{display:grid;grid-template-columns:.88fr 1.12fr;grid-template-rows:auto auto;gap:24px 70px;align-items:center}
.expertise-copy .body-copy{max-width:510px;margin-top:18px}
.expertise-signature{margin-top:26px;display:grid;gap:6px;font-family:var(--display);font-size:11px;letter-spacing:.24em;color:#8b754d}
.service-stack{display:grid;gap:11px;perspective:1000px}
.service-card{display:grid;grid-template-columns:58px 1fr 26px;align-items:center;gap:15px;min-height:122px;padding:18px 19px;border:1px solid rgba(229,184,90,.14);background:linear-gradient(145deg,rgba(18,17,14,.95),rgba(7,7,7,.94));transform-style:preserve-3d;transition:border-color .3s,background .3s}
.service-card:hover{border-color:rgba(229,184,90,.42);background:linear-gradient(145deg,rgba(27,23,17,.98),rgba(8,8,8,.98))}
.service-icon{width:48px;height:48px;border:1px solid rgba(229,184,90,.24);display:grid;place-items:center;color:#d6ae56}
.service-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.service-card h3{font-family:var(--display);font-size:20px;margin:0 0 6px;color:#e9c870}
.service-card p{font-size:13px;color:#c1b8ac;margin:0;line-height:1.6}
.service-arrow{font-family:var(--display);font-size:18px;color:#6f5a37;transition:color .3s,transform .3s}
.service-card:hover .service-arrow{color:#e5bd63;transform:translate(2px,-2px)}
.direction-card{grid-column:1/-1;display:grid;grid-template-columns:120px 1fr;align-items:center;gap:24px;padding:19px 24px;border:1px solid rgba(229,184,90,.12);background:linear-gradient(90deg,rgba(229,184,90,.045),transparent)}
.direction-h{font-family:var(--display);font-size:70px;line-height:.8;color:#d5a947;text-align:center;border-right:1px solid rgba(229,184,90,.14)}
.direction-card strong{font-family:var(--display);font-size:17px;letter-spacing:.1em;color:#d7b25c}
.direction-card p{font-size:12.5px;color:#bcb3a7;line-height:1.6;margin:7px 0 0}

/* EXPERIENCE */
.experience{background:linear-gradient(145deg,#070706,#050505 54%,#0b0907)}
.experience-glow{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:1000px;height:600px;background:radial-gradient(ellipse,rgba(229,184,90,.045),transparent 66%);filter:blur(20px)}
.experience-layout{display:grid;grid-template-columns:.78fr 1.22fr;grid-template-rows:auto auto;gap:26px 58px;align-items:center}
.experience-intro .body-copy{max-width:500px;margin-top:18px}
.category-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.category-card{position:relative;min-height:180px;padding:22px;border:1px solid rgba(229,184,90,.12);overflow:hidden;background:linear-gradient(145deg,#15130f,#080808);transform-style:preserve-3d}
.category-card>span{font-family:var(--display);font-size:18px;color:#e5c269;letter-spacing:.035em;position:relative;z-index:2}
.category-card p{font-size:13px;line-height:1.65;color:#c0b6aa;max-width:82%;position:relative;z-index:2}
.category-art{position:absolute;right:-8px;bottom:-8px;width:116px;height:116px;opacity:.28}
.category-art i{position:absolute;border:1px solid currentColor}
.beauty{color:#d5a4ae}.food{color:#d6ad60}.lifestyle{color:#7ea8c1}.partnership{color:#9f8abc}
.beauty .category-art i:nth-child(1){width:24px;height:70px;right:46px;bottom:14px;border-radius:8px}.beauty .category-art i:nth-child(2){width:32px;height:54px;right:8px;bottom:14px;border-radius:10px}.beauty .category-art i:nth-child(3){width:28px;height:28px;right:72px;bottom:14px;border-radius:50%}
.food .category-art i:nth-child(1){width:78px;height:40px;right:8px;bottom:17px;border-radius:50%}.food .category-art i:nth-child(2){width:46px;height:46px;right:34px;bottom:38px;border-radius:50%}.food .category-art i:nth-child(3){width:22px;height:36px;right:14px;bottom:56px;border-radius:50% 50% 20% 20%}
.lifestyle .category-art i:nth-child(1){width:80px;height:45px;right:8px;bottom:16px;border-radius:14px 14px 5px 5px}.lifestyle .category-art i:nth-child(2){width:38px;height:58px;right:64px;bottom:35px;border-radius:50% 50% 0 0}.lifestyle .category-art i:nth-child(3){width:28px;height:48px;right:14px;bottom:58px;border-radius:50%}
.partnership .category-art i:nth-child(1){width:53px;height:53px;right:53px;bottom:17px;border-radius:13px}.partnership .category-art i:nth-child(2){width:53px;height:53px;right:8px;bottom:48px;border-radius:13px}.partnership .category-art i:nth-child(3){width:32px;height:32px;right:43px;bottom:53px;border-radius:50%}
.criteria{grid-column:1/-1;display:grid;grid-template-columns:250px 1fr;gap:25px;align-items:stretch;border:1px solid rgba(229,184,90,.13);background:linear-gradient(145deg,rgba(18,16,13,.92),rgba(7,7,7,.94));padding:17px 20px}
.criteria-head{display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(229,184,90,.12)}
.criteria-head span{font-size:12px;color:#bbb09f}.criteria-head strong{font-family:var(--serif);font-size:17px;margin-top:5px;color:#e5dbcf}
.criteria-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.criteria-grid article{padding:4px 14px;border-right:1px solid rgba(229,184,90,.09)}
.criteria-grid article:last-child{border-right:0}
.criteria-grid b{font-family:var(--display);font-size:13.5px;color:#d7b25e;letter-spacing:.05em}
.criteria-grid p{font-size:12px;color:#bbb1a5;line-height:1.62;margin:6px 0 0}

/* CONTACT */
.contact{background:radial-gradient(circle at 20% 27%,rgba(229,184,90,.07),transparent 23%),radial-gradient(circle at 83% 73%,rgba(119,164,191,.05),transparent 23%),#050505}
.contact-radiance{position:absolute;left:50%;top:50%;width:900px;height:700px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(229,184,90,.04),transparent 68%)}
.contact-ghost{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);font-family:var(--display);font-size:21vw;font-weight:700;letter-spacing:-.05em;color:rgba(255,255,255,.012);white-space:nowrap}
.contact-layout{text-align:center}
.contact-copy .body-copy{max-width:720px;margin:16px auto 0}
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:31px}
.contact-card{position:relative;min-height:164px;padding:22px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(229,184,90,.13);background:linear-gradient(145deg,rgba(18,17,14,.92),rgba(7,7,7,.94));transform-style:preserve-3d;transition:border-color .3s,background .3s}
a.contact-card:hover{border-color:rgba(229,184,90,.42);background:linear-gradient(145deg,rgba(27,23,17,.96),rgba(8,8,8,.98))}
.contact-type{font-family:var(--display);font-size:11px;letter-spacing:.19em;color:#8f7c58}
.contact-card strong{font-family:var(--serif);font-size:16px;font-weight:500;margin-top:13px;color:#eee6dc}
.contact-card i{font-style:normal;font-family:var(--display);font-size:10.5px;letter-spacing:.12em;color:#685f53;margin-top:10px}
.contact-footer{margin-top:26px;display:grid;grid-template-columns:1fr 220px 1fr;align-items:center;gap:28px}
.footer-message{text-align:left;display:grid;gap:5px}
.footer-message strong{font-family:var(--serif);font-size:15px;color:#cfc5b7;font-weight:500}
.footer-message span{font-family:var(--display);font-size:10px;letter-spacing:.15em;color:#766a56}
.contact-footer img{width:205px;max-height:108px;justify-self:center;object-fit:contain;filter:drop-shadow(0 14px 35px rgba(229,184,90,.08))}
.contact-footer small{text-align:right;font-family:var(--display);font-size:9.5px;letter-spacing:.10em;color:#5e5952}

/* Tilt helper */
.tilt{will-change:transform}
.magnetic{will-change:transform}

/* Desktop V21-style native snap */
@media (min-width:981px) and (min-height:720px) and (pointer:fine){
  .site{scroll-snap-type:y mandatory}
  .scene{min-height:100vh;min-height:100dvh;scroll-snap-align:start;scroll-snap-stop:always}
}
@media (min-width:981px) and (max-height:719px){
  .site{scroll-snap-type:y proximity}
  .scene{height:auto;min-height:100svh;scroll-snap-stop:normal;padding:80px 0 35px}
  .scene-inner{padding-top:20px}
  .hero{height:100svh;padding:0}
  .hero-shell{padding-top:var(--header-h)}
}

/* Tablet / mobile */
@media (max-width:980px),(pointer:coarse){
  body{overflow:auto}
  .site{height:auto;overflow:visible;scroll-snap-type:none;overscroll-behavior-y:auto}
  .scene{height:auto;min-height:100svh;scroll-snap-align:none;scroll-snap-stop:normal;padding:90px 0 45px;overflow:hidden}
  .hero{height:100svh;padding:0}
  .page-rail,.pointer-light,.particle-canvas{display:none}
  .header{height:66px;padding:0 20px;background:rgba(5,5,5,.84);border-bottom:1px solid rgba(229,184,90,.08)}
  .brand strong{font-size:20px}.brand small{font-size:8.5px;letter-spacing:.15em;margin-top:6px}
  .menu-toggle{display:grid;width:36px;height:36px;border:0;background:none;place-content:center;gap:6px;cursor:pointer}
  .menu-toggle span{display:block;width:20px;height:1px;background:#d8bd7a;transition:.3s}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .nav{position:fixed;inset:66px 0 auto 0;display:grid;gap:0;padding:18px 20px 22px;background:rgba(5,5,5,.97);border-bottom:1px solid rgba(229,184,90,.10);transform:translateY(-120%);opacity:0;pointer-events:none;transition:.4s var(--ease)}
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav>a{font-size:10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04)}
  .contact-nav{border:0;padding:12px 0!important}
  .sound-toggle{padding:12px 0;justify-content:flex-start}
  .scene-inner{width:min(720px,calc(100% - 34px));padding-top:0}
  .section-title{font-size:clamp(34px,8vw,48px)}
  .hero-shell{width:calc(100% - 34px);padding-top:66px}
  .hero-side-note{display:none}
  .hero-wordmark{margin-top:-4vh}
  .hero-hayan{font-size:clamp(95px,26vw,145px)}
  .hero-company{font-size:clamp(48px,13vw,70px)}
  .hero-title{font-size:clamp(27px,7vw,39px);margin-top:28px}
  .hero-copy{font-size:13px;line-height:1.72;max-width:550px}
  .hero-capabilities{width:min(620px,calc(100% - 10px));grid-template-columns:1fr 1fr;bottom:60px}
  .hero-cap{min-height:60px;border-bottom:1px solid rgba(229,184,90,.12)}
  .hero-cap:nth-child(2){border-right:0}.hero-cap:nth-child(3),.hero-cap:nth-child(4){border-bottom:0}
  .hero-cap b{font-size:15px}.hero-cap span{font-size:10.5px;margin-top:-8px}
  .hero-ribbon{display:none}
  .scroll-cue{bottom:10px}
  .about-layout,.system-layout,.expertise-layout,.experience-layout{grid-template-columns:1fr;grid-template-rows:auto;gap:28px}
  .about-copy-block{align-self:auto}
  .about-visual{order:2}.strength-grid{order:3;grid-column:auto;grid-template-columns:1fr 1fr}
  .emblem-stage{width:min(380px,72vw)}
  .system-statement,.direction-card,.criteria{grid-column:auto}
  .process{padding-left:25px}.process-step{grid-template-columns:42px 1fr}
  .expertise-emblem{width:90vw;right:-32vw}
  .direction-card{grid-template-columns:90px 1fr}
  .category-grid{grid-template-columns:1fr 1fr}
  .criteria{grid-template-columns:1fr;gap:14px}.criteria-head{border-right:0;border-bottom:1px solid rgba(229,184,90,.12);padding-bottom:12px}
  .criteria-grid{grid-template-columns:1fr 1fr}.criteria-grid article:nth-child(2){border-right:0}.criteria-grid article:nth-child(-n+2){border-bottom:1px solid rgba(229,184,90,.08);padding-bottom:10px}
  .contact-grid{grid-template-columns:1fr 1fr}
  .contact-footer{grid-template-columns:1fr;justify-items:center;text-align:center}
  .footer-message,.contact-footer small{text-align:center}
}
@media(max-width:560px){
  .entrance-card{padding:40px 20px}
  .entrance-kicker{font-size:9.5px;letter-spacing:.23em}
  .entrance-brand span{font-size:clamp(78px,25vw,112px)}
  .entrance-brand small{font-size:clamp(38px,12vw,54px)}
  .entrance-card p{font-size:12px;line-height:1.65}
  .hero-center{margin-top:-7vh}
  .hero-title{font-size:25px}
  .hero-copy br{display:none}
  .hero-capabilities{bottom:49px}
  .scroll-cue{display:none}
  .strength-grid{grid-template-columns:1fr}
  .strength-card{min-height:130px}
  .process-step{grid-template-columns:1fr}.process-number{font-size:20px}
  .category-grid{grid-template-columns:1fr}
  .category-card{min-height:138px}
  .criteria-grid{grid-template-columns:1fr}.criteria-grid article{border-right:0;border-bottom:1px solid rgba(229,184,90,.08);padding:10px 0}.criteria-grid article:last-child{border-bottom:0}
  .contact-grid{grid-template-columns:1fr}
  .contact-card{min-height:118px}
  .contact-footer img{width:130px}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .site{scroll-snap-type:none!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
  .grain,.particle-canvas,.pointer-light{display:none!important}
}


/* V35 · larger-text vertical safety */
@media (min-width:981px) and (max-height:820px){
  .scene{height:auto;min-height:100svh;scroll-snap-stop:normal;padding:86px 0 34px}
  .scene-inner{padding-top:0}
  .hero{height:100svh;min-height:100svh;padding:0;scroll-snap-stop:always}
  .hero-shell{padding-top:var(--header-h)}
  .strength-card{min-height:148px}
  .process-step{padding:11px 15px}
  .service-card{min-height:98px;padding:13px 16px}
  .category-card{min-height:146px;padding:17px}
  .contact-card{min-height:132px;padding:16px 13px}
}


/* V36 · visual balance + readable microcopy */
.hero-capabilities,
.hero-ribbon{max-width:calc(100vw - 130px)}
.hero-capabilities{margin-left:0;margin-right:0}
.hero-ribbon{justify-content:center;width:max-content;white-space:nowrap}
.contact-footer img{display:block;margin-inline:auto}
.footer-message{align-self:center}
.contact-footer small{align-self:center;line-height:1.55}
.emblem-stage{margin-inline:auto}

@media (min-width:981px) and (max-height:860px){
  .about-layout,.system-layout,.expertise-layout,.experience-layout{row-gap:20px}
  .strength-card{min-height:152px;padding:19px 18px}
  .process-step{padding:10px 14px}
  .service-card{min-height:101px;padding:13px 16px}
  .category-card{min-height:150px;padding:17px}
  .contact-card{min-height:138px;padding:17px 13px}
  .contact-grid{margin-top:24px}
  .contact-footer{margin-top:18px}
  .contact-footer img{width:185px;max-height:92px}
}

@media(max-width:980px){
  .hero-capabilities{max-width:calc(100vw - 34px)}
  .contact-footer{grid-template-columns:1fr}
  .contact-footer img{width:180px}
}


/* =========================================================
   HAYAN V37 · WHOLE-SITE BALANCE PASS
   - 데스크톱 중심축/그리드 균형 재정렬
   - 긴 콘텐츠가 grid track을 밀어내는 intrinsic overflow 방지
   - ABOUT에서 우측 심볼/4번째 카드가 잘리는 현상 구조적으로 수정
   ========================================================= */

.scene-inner{
  width:min(1340px,calc(100% - 104px));
}

/* 모든 주요 2열 그리드는 자식의 긴 텍스트/마키 때문에 폭이 밀리지 않도록 minmax(0) 사용 */
.about-layout{
  grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);
  gap:30px 54px;
}
.system-layout{
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:32px 60px;
}
.expertise-layout{
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:30px 60px;
}
.experience-layout{
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:30px 58px;
}

/* grid intrinsic overflow 방지 */
.about-copy-block,
.about-visual,
.strength-grid,
.system-intro,
.process,
.expertise-copy,
.service-stack,
.experience-intro,
.category-grid,
.criteria,
.contact-copy,
.contact-grid,
.contact-footer{
  min-width:0;
}

/* ABOUT */
.about-copy-block{padding-right:4px}
.about-copy-block .body-copy{max-width:720px}
.about-visual{
  justify-self:center;
  align-self:center;
  width:100%;
}
.emblem-stage{
  width:min(350px,27vw);
  max-width:100%;
}
.keyword-marquee{
  min-width:0;
  max-width:100%;
}
.strength-grid{
  width:100%;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.strength-card{
  min-width:0;
  overflow:hidden;
}

/* SYSTEM */
.system-intro{
  align-self:center;
}
.system-intro .body-copy{
  max-width:540px;
}
.process{
  width:min(100%,730px);
  justify-self:end;
}
.system-statement{
  width:100%;
}

/* EXPERTISE */
.expertise-copy{
  align-self:center;
}
.expertise-copy .body-copy{
  max-width:550px;
}
.service-stack{
  width:min(100%,720px);
  justify-self:end;
}
.direction-card{
  width:100%;
}
.expertise-emblem{
  left:50%;
  right:auto;
  width:min(680px,44vw);
  bottom:-230px;
  transform:translateX(-50%);
}

/* EXPERIENCE */
.experience-intro{
  align-self:center;
}
.experience-intro .body-copy{
  max-width:560px;
}
.category-grid{
  width:min(100%,730px);
  justify-self:end;
}
.criteria{
  width:100%;
}

/* CONTACT */
.contact-copy{
  max-width:900px;
  margin-inline:auto;
}
.contact-grid{
  width:min(1180px,100%);
  margin:30px auto 0;
}
.contact-footer{
  width:min(1100px,100%);
  margin:26px auto 0;
  grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);
}
.footer-message{justify-self:start}
.contact-footer small{justify-self:end}
.contact-footer img{justify-self:center}

/* HERO 하단도 동일 중앙축 유지 */
.hero-capabilities{
  width:min(980px,78vw);
  left:50%;
  right:auto;
  transform:translateX(-50%);
}
.hero-ribbon{
  left:50%;
  right:auto;
  transform:translateX(-50%);
}

/* 제목/본문의 시각적 줄 길이 균형 */
.about .section-title{max-width:700px}
.system .section-title{max-width:570px}
.expertise .section-title{max-width:590px}
.experience .section-title{max-width:590px}

/* 사용자가 보여준 낮은 브라우저 높이에서도 균형 유지 */
@media (min-width:981px) and (max-height:900px){
  .scene-inner{
    width:min(1370px,calc(100% - 86px));
  }

  .about-layout{
    grid-template-columns:minmax(0,1.16fr) minmax(300px,.84fr);
    gap:20px 44px;
  }
  .emblem-stage{
    width:min(315px,24vw);
  }
  .strength-grid{
    gap:10px;
  }
  .strength-card{
    min-height:145px;
    padding:18px 17px;
  }

  .system-layout,
  .expertise-layout,
  .experience-layout{
    gap:22px 48px;
  }
  .process-step{
    padding:10px 14px;
  }
  .service-card{
    min-height:98px;
    padding:13px 15px;
  }
  .category-card{
    min-height:145px;
    padding:17px;
  }
  .criteria{
    padding:14px 17px;
  }

  .contact-grid{
    margin-top:22px;
  }
  .contact-card{
    min-height:130px;
    padding:16px 13px;
  }
  .contact-footer{
    margin-top:16px;
  }
  .contact-footer img{
    width:178px;
    max-height:86px;
  }
}

/* 중간 폭 노트북에서 4열 카드가 억지로 잘리지 않도록 */
@media (min-width:981px) and (max-width:1260px){
  .scene-inner{width:calc(100% - 68px)}
  .about-layout{
    grid-template-columns:minmax(0,1fr) minmax(280px,.78fr);
    gap:24px 34px;
  }
  .strength-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .emblem-stage{width:min(300px,26vw)}
  .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 모바일은 기존 1열 구조를 보존 */
@media(max-width:980px){
  .scene-inner{width:min(720px,calc(100% - 34px))}
  .about-layout,.system-layout,.expertise-layout,.experience-layout{
    grid-template-columns:1fr;
  }
  .process,.service-stack,.category-grid{
    width:100%;
    justify-self:stretch;
  }
  .contact-grid{width:100%}
  .contact-footer{width:100%;grid-template-columns:1fr}
}


/* =========================================================
   HAYAN V39 · HERO WORDMARK DESCENDER FIX
   첫 화면 Hayan의 y / company의 p,y 아래꼬리가 line box에
   잘려 보이지 않도록 안전한 line-height / bottom padding 확보.
   다른 레이아웃 위치와 크기는 유지합니다.
   ========================================================= */
.hero-wordmark{
  line-height:1!important;
  overflow:visible!important;
}
.hero-hayan{
  line-height:.84!important;
  padding:.04em .07em .24em!important;
  overflow:visible!important;
}
.hero-company{
  line-height:1.06!important;
  padding:.01em .08em .17em!important;
  margin-top:-.17em;
  overflow:visible!important;
}
/* 글자 안전영역을 늘린 만큼 아래 제목과의 기존 시각 간격을 복원 */
.hero-title{
  margin-top:18px;
}
@media(max-width:980px){
  .hero-hayan{padding-bottom:.23em!important}
  .hero-company{padding-bottom:.16em!important}
  .hero-title{margin-top:17px}
}


/* =========================================================
   HAYAN V40 · PUBLIC DEPLOYMENT FINAL POLISH
   실제 Cloudflare 공개 화면 기준 최종 PC 보정
   ========================================================= */

/* HERO 하단 3개 레이어가 서로 겹치지 않도록 간격 재설계 */
.hero-capabilities{
  bottom:92px;
}
.hero-ribbon{
  bottom:57px;
  gap:13px;
}
.scroll-cue{
  bottom:7px;
}

/* 리본 중앙의 SCROLL 영역과 겹쳐 보이지 않도록 안정적인 폭/자간 */
.hero-ribbon span{
  display:inline-block;
}
.hero-ribbon i{
  flex:0 0 24px;
}

/* 전체 섹션의 시각적 중심축을 조금 더 안정적으로 통일 */
.about-layout,
.system-layout,
.expertise-layout,
.experience-layout{
  align-content:center;
}

.strength-grid,
.direction-card,
.criteria,
.contact-grid,
.contact-footer{
  margin-inline:auto;
}

/* 카드 내부 텍스트가 하단으로 몰리지 않게 수직 리듬 통일 */
.strength-card,
.process-step,
.service-card,
.category-card,
.contact-card{
  line-height:1.4;
}

/* 공개 화면의 작은 우측 진행 표시도 읽을 수 있을 만큼만 보정 */
.page-rail{
  right:20px;
}
.rail-index,
.rail-total{
  font-size:10px;
}

/* 낮은 데스크톱 화면에서도 HERO 하단 요소 사이의 간격 유지 */
@media (min-width:981px) and (max-height:860px){
  .hero-capabilities{bottom:86px}
  .hero-ribbon{bottom:52px}
  .scroll-cue{bottom:5px}

  .about-layout,
  .system-layout,
  .expertise-layout,
  .experience-layout{
    row-gap:18px;
  }
}

/* 아주 낮은 데스크톱에서는 리본을 살짝 위로 올리고 SCROLL을 축소 */
@media (min-width:981px) and (max-height:760px){
  .hero-capabilities{bottom:80px}
  .hero-ribbon{bottom:47px;font-size:9px;gap:10px}
  .scroll-cue{bottom:3px;font-size:8.5px}
  .scroll-cue i{height:18px}
}

/* 모바일 구조는 기존 그대로 유지 */
@media(max-width:980px){
  .hero-capabilities{bottom:60px}
  .hero-ribbon{display:none}
}
@media(max-width:560px){
  .hero-capabilities{bottom:49px}
}


/* =========================================================
   HAYAN V41 · FINAL ALL-PAGES PUBLIC POLISH
   실제 Cloudflare 공개화면(HOME~CONTACT) 검수 결과 반영
   ========================================================= */

/* ---------- ABOUT ---------- */
/* 왼쪽 문장과 오른쪽 심볼이 서로 안정적으로 보이도록 2열 비율 미세조정 */
.about-layout{
  grid-template-columns:minmax(0,1.16fr) minmax(315px,.84fr);
  column-gap:58px;
}
.about-copy-block{
  min-width:0;
}
.about-lead{
  max-width:760px;
  line-height:1.72;
}
.about-copy-block .body-copy{
  max-width:770px;
}

/* 계속 흐르는 마키는 끝에서 글자가 잘린 듯 보이지 않게 페이드 처리 */
.keyword-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  padding-inline:12px;
}
.keyword-track{
  padding-inline:14px;
}

/* 카드 설명 한 단계 더 선명하게 */
.about .strength-card p{
  color:#cbc2b6;
  font-size:13.8px;
  line-height:1.68;
}

/* ---------- SYSTEM ---------- */
/* 공개화면에서 오른쪽 프로세스가 위로 떠 보이던 부분 */
.system-layout{
  align-items:start;
}
.system-intro{
  padding-top:54px;
}
.process{
  margin-top:10px;
  align-self:start;
}
.process-step small{
  font-size:11.5px;
  letter-spacing:.14em;
  color:#99896f;
}
.process-step p{
  color:#c6bdb1;
  font-size:13.2px;
}

/* ---------- EXPERTISE ---------- */
.expertise-layout{
  align-items:start;
}
.expertise-copy{
  padding-top:16px;
}
.service-stack{
  grid-template-columns:minmax(0,1fr);
  width:min(100%,720px);
}
.service-card{
  width:100%;
  margin:0!important;
  justify-self:stretch;
}
.service-card p{
  font-size:13.4px;
  line-height:1.63;
  color:#c9c0b4;
}
.expertise-signature{
  color:#aa946d;
  font-size:11.5px;
  line-height:1.65;
}
.direction-card{
  grid-template-columns:104px minmax(0,1fr);
  gap:22px;
  padding:21px 25px;
}
.direction-h{
  font-size:64px;
}
.direction-card p{
  font-size:13px;
  line-height:1.65;
  color:#c4baae;
}

/* ---------- EXPERIENCE ---------- */
/* '같습니 / 다.'처럼 끝 한 글자만 떨어지는 현상 방지 */
.experience-layout{
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  column-gap:52px;
}
.experience .section-title{
  font-size:clamp(36px,3vw,49px);
  max-width:620px;
}
.experience .section-title em{
  white-space:nowrap;
}
.experience-intro .body-copy{
  max-width:620px;
}
.category-grid{
  width:100%;
}
.category-card p{
  font-size:13.4px;
  line-height:1.68;
  color:#c6bdb1;
  max-width:86%;
}
.criteria{
  grid-template-columns:235px minmax(0,1fr);
  gap:22px;
  padding:19px 20px;
}
.criteria-head span{
  font-size:12.3px;
  color:#bfb3a3;
}
.criteria-head strong{
  font-size:18px;
  line-height:1.45;
}
.criteria-grid b{
  font-size:13.7px;
}
.criteria-grid p{
  font-size:12.4px;
  line-height:1.65;
  color:#c2b8ac;
}

/* ---------- CONTACT ---------- */
/* 전체 균형은 유지하고, 마지막 작은 텍스트만 읽히도록 보정 */
.contact-grid{
  gap:13px;
}
.contact-type{
  font-size:11.5px;
  color:#aa946f;
}
.contact-card strong{
  font-size:16.5px;
}
.contact-card i{
  font-size:11.2px;
  color:#9f9588;
}
.footer-message span{
  font-size:10.8px;
  color:#95856b;
}
.contact-footer small{
  font-size:10.2px;
  line-height:1.55;
  color:#7f776e;
}
.contact-footer img{
  width:220px;
  max-height:112px;
}

/* ---------- 공통 미세 가독성 ---------- */
.scene .eyebrow{
  color:#dfb95f;
}
.page-rail{
  color:#8f7b5a;
}
.rail-total{
  color:#7d6f59;
}

/* ---------- 1648×900 전후 실제 PC 화면 안정화 ---------- */
@media (min-width:981px) and (max-height:900px){
  .about-layout{
    grid-template-columns:minmax(0,1.18fr) minmax(290px,.82fr);
    column-gap:46px;
  }
  .about .emblem-stage{
    width:min(305px,23vw);
  }

  .system-intro{
    padding-top:42px;
  }
  .process{
    margin-top:6px;
  }

  .expertise-copy{
    padding-top:10px;
  }

  .experience-layout{
    grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);
    column-gap:44px;
  }
  .experience .section-title{
    font-size:clamp(35px,2.85vw,47px);
  }

  .contact-footer img{
    width:195px;
    max-height:94px;
  }
}

/* 1300px 이하 PC: 글자 확대 상태에서도 카드와 문장이 잘리지 않도록 */
@media (min-width:981px) and (max-width:1300px){
  .about-layout{
    grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);
  }
  .experience-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .experience .section-title em{
    white-space:normal;
  }
}

/* 모바일은 기존 세로 구조 유지 */
@media(max-width:980px){
  .system-intro,
  .expertise-copy{
    padding-top:0;
  }
  .process{
    margin-top:0;
  }
  .experience .section-title em{
    white-space:normal;
  }
  .criteria{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   HAYAN V42 · FINAL MICRO POLISH
   실제 Cloudflare 공개 화면 전체 검수 후 남은 미세 보정만 반영
   ========================================================= */

/* ABOUT: 흐르는 키워드가 양끝에서 단어 중간이 잘려 보이지 않게 페이드 폭 확대 */
.keyword-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  padding-inline:18px;
}
.keyword-track{
  color:#a68d62;
}

/* SYSTEM: 카드 하단 작은 영문을 더 또렷하게 */
.process-step small{
  color:#b39c76;
  font-size:11.8px;
  letter-spacing:.13em;
}

/* EXPERTISE: 작은 영문/하단 설명 명도만 소폭 향상 */
.expertise-signature{
  color:#b9a277;
}
.direction-card p{
  color:#d0c6b9;
}

/* EXPERIENCE: 카드/하단 기준 설명은 크기 유지, 명도만 소폭 향상 */
.category-card p{
  color:#d0c7bb;
}
.criteria-grid p{
  color:#ccc2b6;
}

/* CONTACT: 공개 화면에서 가장 작은 정보만 선명하게 */
.contact-type{
  color:#b8a174;
}
.contact-card i{
  color:#b2a79a;
}
.footer-message span{
  color:#aa9471;
}
.contact-footer small{
  color:#928981;
}
.contact-footer img{
  filter:drop-shadow(0 14px 35px rgba(229,184,90,.12));
}

/* 전체 미세 글씨 최소 대비 보강 */
.hero-ribbon,
.scroll-cue,
.expertise-signature,
.process-step small,
.footer-message span,
.contact-footer small{
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}


/* =========================================================
   HAYAN V43 · FINAL APPROVED POLISH
   마지막 공개화면 검수 결과:
   1) ABOUT 키워드가 가장자리에서 단어 중간으로 잘려 보이는 현상 제거
   2) 영문 표현 3곳 자연스럽게 정리
   ========================================================= */

/* 기존 연속 marquee 애니메이션은 V43 rotator에서 사용하지 않음 */
.keyword-marquee{
  position:relative;
  height:42px;
  padding:0!important;
  overflow:hidden;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.keyword-rotator{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-size:11.5px;
  letter-spacing:.17em;
  color:#ad9469;
}
.keyword-rotator > span{
  position:absolute;
  left:50%;
  top:50%;
  width:max-content;
  max-width:calc(100% - 44px);
  transform:translate(-50%,-50%) translateX(70px);
  opacity:0;
  white-space:nowrap;
  text-align:center;
  animation:keywordPhraseCycle 16s cubic-bezier(.22,.61,.36,1) infinite;
  will-change:transform,opacity;
}
.keyword-rotator > span i{
  margin-left:12px;
  font-style:normal;
  color:#d7ad52;
}
.keyword-rotator > span:nth-child(1){animation-delay:-.25s}
.keyword-rotator > span:nth-child(2){animation-delay:3.75s}
.keyword-rotator > span:nth-child(3){animation-delay:7.75s}
.keyword-rotator > span:nth-child(4){animation-delay:11.75s}

@keyframes keywordPhraseCycle{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) translateX(70px);
  }
  3%{
    opacity:1;
    transform:translate(-50%,-50%) translateX(0);
  }
  20%{
    opacity:1;
    transform:translate(-50%,-50%) translateX(0);
  }
  23%{
    opacity:0;
    transform:translate(-50%,-50%) translateX(-70px);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) translateX(-70px);
  }
}

/* V43에서는 이전 track이 DOM에 없지만 과거 규칙의 영향도 차단 */
.keyword-marquee .keyword-track{
  display:none!important;
  animation:none!important;
}

@media(max-width:560px){
  .keyword-marquee{height:40px}
  .keyword-rotator{font-size:10px;letter-spacing:.13em}
  .keyword-rotator > span{max-width:calc(100% - 24px)}
}

@media(prefers-reduced-motion:reduce){
  .keyword-rotator > span{
    animation:none!important;
    opacity:0!important;
    transform:translate(-50%,-50%)!important;
  }
  .keyword-rotator > span:first-child{
    opacity:1!important;
  }
}


/* =========================================================
   HAYAN V44 · MOBILE-ONLY FINAL PASS
   PC V43 LOCKED:
   아래 규칙은 오직 980px 이하 모바일/태블릿에서만 적용됩니다.
   ========================================================= */

@media (max-width:980px){
  html,body{
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  .header{
    height:64px;
    padding-left:calc(18px + env(safe-area-inset-left));
    padding-right:calc(18px + env(safe-area-inset-right));
  }

  .brand{
    min-width:0;
    max-width:calc(100% - 58px);
  }
  .brand strong{
    font-size:19px;
    white-space:nowrap;
  }
  .brand small{
    font-size:7.5px;
    line-height:1.25;
    letter-spacing:.13em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:260px;
  }

  .menu-toggle{
    flex:0 0 auto;
    touch-action:manipulation;
  }

  .nav{
    inset:64px 0 auto 0;
    max-height:calc(100svh - 64px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:
      16px calc(20px + env(safe-area-inset-right))
      calc(20px + env(safe-area-inset-bottom))
      calc(20px + env(safe-area-inset-left));
  }

  .nav>a,
  .sound-toggle{
    min-height:44px;
    display:flex;
    align-items:center;
  }

  .scene{
    padding:
      86px
      0
      calc(50px + env(safe-area-inset-bottom));
  }

  .scene-inner{
    width:min(720px,calc(100% - 30px));
  }

  .eyebrow{
    font-size:10.5px;
    line-height:1.45;
    letter-spacing:.22em;
  }

  .section-title{
    font-size:clamp(32px,8.4vw,46px);
    line-height:1.3;
    word-break:keep-all;
    overflow-wrap:normal;
  }

  .body-copy{
    font-size:14px;
    line-height:1.82;
    word-break:keep-all;
  }

  /* HOME */
  .hero{
    min-height:100svh;
    height:100svh;
  }

  .hero-shell{
    width:calc(100% - 28px);
    min-height:100svh;
    padding-top:64px;
  }

  .hero-center{
    width:100%;
    margin-top:-2.5svh;
  }

  .hero-hayan{
    font-size:clamp(88px,25vw,132px);
  }

  .hero-company{
    font-size:clamp(44px,13vw,66px);
  }

  .hero-title{
    font-size:clamp(25px,6.8vw,35px);
    line-height:1.34;
    margin-top:15px;
    word-break:keep-all;
  }

  .hero-copy{
    width:min(100%,560px);
    padding-inline:6px;
    font-size:12.5px;
    line-height:1.7;
    word-break:keep-all;
  }

  .hero-capabilities{
    width:min(640px,calc(100% - 4px));
    bottom:56px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero-cap{
    min-width:0;
    min-height:58px;
    padding:8px 6px;
  }

  .hero-cap b{
    font-size:14px;
    line-height:1.05;
  }

  .hero-cap span{
    font-size:9.5px;
    line-height:1.3;
    margin-top:-5px;
  }

  /* ABOUT */
  .about-layout{
    grid-template-columns:1fr;
    gap:28px;
  }

  .about-copy-block .body-copy,
  .about-lead{
    max-width:none;
  }

  .about-lead{
    font-size:16.5px;
    line-height:1.72;
    word-break:keep-all;
  }

  .about-visual{
    width:100%;
    justify-self:stretch;
  }

  .emblem-stage{
    width:min(300px,74vw);
    margin-inline:auto;
  }

  .strength-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .strength-card{
    min-height:150px;
    padding:20px 18px;
  }

  .strength-card p{
    font-size:12.8px;
    line-height:1.65;
  }

  .keyword-marquee{
    width:100%;
  }

  /* SYSTEM */
  .system-layout{
    grid-template-columns:1fr;
    gap:26px;
  }

  .system-intro,
  .process{
    width:100%;
    padding-top:0;
    margin-top:0;
  }

  .process{
    padding-left:24px;
  }

  .process-step{
    min-width:0;
    grid-template-columns:42px minmax(0,1fr);
    gap:13px;
    padding:14px 15px;
  }

  .process-step h3{
    font-size:21px;
  }

  .process-step p{
    font-size:12.5px;
    line-height:1.65;
  }

  .process-step small{
    font-size:10px;
    line-height:1.45;
  }

  .system-statement{
    font-size:14px;
    line-height:1.72;
    padding:17px 18px;
  }

  /* EXPERTISE */
  .expertise-layout{
    grid-template-columns:1fr;
    gap:26px;
  }

  .service-stack{
    width:100%;
  }

  .service-card{
    grid-template-columns:50px minmax(0,1fr) 22px;
    gap:13px;
    min-height:105px;
    padding:15px 16px;
  }

  .service-card h3{
    font-size:19px;
  }

  .service-card p{
    font-size:12.5px;
    line-height:1.62;
  }

  .expertise-signature{
    font-size:10.5px;
    line-height:1.65;
  }

  .direction-card{
    grid-template-columns:78px minmax(0,1fr);
    gap:18px;
    padding:18px;
  }

  .direction-h{
    font-size:54px;
  }

  .direction-card strong{
    font-size:15px;
    line-height:1.3;
  }

  .direction-card p{
    font-size:12px;
    line-height:1.62;
  }

  /* EXPERIENCE */
  .experience-layout{
    grid-template-columns:1fr;
    gap:27px;
  }

  .experience .section-title{
    max-width:none;
    font-size:clamp(32px,8.4vw,45px);
  }

  .experience-intro .body-copy{
    max-width:none;
  }

  .category-grid{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .category-card{
    min-width:0;
    min-height:150px;
    padding:18px;
  }

  .category-card p{
    font-size:12.5px;
    line-height:1.62;
    max-width:88%;
  }

  .criteria{
    width:100%;
    grid-template-columns:1fr;
    gap:14px;
    padding:17px;
  }

  .criteria-head{
    border-right:0;
    border-bottom:1px solid rgba(229,184,90,.12);
    padding-bottom:12px;
  }

  .criteria-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .criteria-grid article{
    min-width:0;
  }

  .criteria-grid p{
    font-size:11.8px;
    line-height:1.62;
  }

  /* CONTACT */
  .contact-copy{
    max-width:none;
  }

  .contact-grid{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
  }

  .contact-card{
    min-width:0;
    min-height:136px;
    padding:18px 12px;
  }

  .contact-card strong{
    font-size:14.5px;
    overflow-wrap:anywhere;
  }

  .contact-card i{
    font-size:10px;
    line-height:1.5;
  }

  .contact-footer{
    width:100%;
    grid-template-columns:1fr;
    justify-items:center;
    gap:16px;
    margin-top:22px;
  }

  .footer-message,
  .contact-footer small{
    text-align:center;
    justify-self:center;
  }

  .contact-footer img{
    width:170px;
    max-height:92px;
  }

  a,button{
    -webkit-tap-highlight-color:rgba(229,184,90,.12);
  }
}

/* 일반 스마트폰 */
@media (max-width:560px){
  .scene{
    padding:
      82px
      0
      calc(44px + env(safe-area-inset-bottom));
  }

  .scene-inner{
    width:calc(100% - 28px);
  }

  .section-title{
    font-size:clamp(30px,9.2vw,40px);
    line-height:1.32;
  }

  .body-copy{
    font-size:13.5px;
    line-height:1.78;
  }

  /* HOME */
  .hero-shell{
    width:calc(100% - 24px);
  }

  .hero-center{
    margin-top:-5svh;
  }

  .hero-hayan{
    font-size:clamp(84px,26vw,108px);
  }

  .hero-company{
    font-size:clamp(42px,13.5vw,56px);
  }

  .hero-title{
    font-size:clamp(24px,7vw,29px);
    line-height:1.38;
  }

  .hero-copy{
    font-size:11.8px;
    line-height:1.65;
  }

  .hero-capabilities{
    bottom:38px;
  }

  .hero-cap{
    min-height:55px;
  }

  .hero-cap b{
    font-size:13px;
  }

  .hero-cap span{
    font-size:8.8px;
  }

  /* ABOUT */
  .about-lead{
    font-size:15px;
  }

  .emblem-stage{
    width:min(270px,76vw);
  }

  .strength-grid{
    grid-template-columns:1fr;
  }

  .strength-card{
    min-height:0;
    padding:19px 18px;
  }

  .keyword-rotator{
    font-size:9.5px;
    letter-spacing:.11em;
  }

  /* SYSTEM */
  .process{
    padding-left:20px;
  }

  .process-step{
    grid-template-columns:1fr;
    gap:5px;
  }

  .process-number{
    font-size:18px;
  }

  .process-step::before{
    left:-22px;
  }

  /* EXPERTISE */
  .service-card{
    grid-template-columns:44px minmax(0,1fr) 18px;
    gap:11px;
    min-height:96px;
    padding:14px;
  }

  .service-icon{
    width:42px;
    height:42px;
  }

  .service-card h3{
    font-size:17px;
  }

  .direction-card{
    grid-template-columns:62px minmax(0,1fr);
    gap:14px;
    padding:16px;
  }

  .direction-h{
    font-size:46px;
  }

  /* EXPERIENCE */
  .category-grid{
    grid-template-columns:1fr;
  }

  .category-card{
    min-height:136px;
  }

  .criteria-grid{
    grid-template-columns:1fr;
  }

  .criteria-grid article{
    border-right:0;
    border-bottom:1px solid rgba(229,184,90,.08);
    padding:11px 0;
  }

  .criteria-grid article:last-child{
    border-bottom:0;
  }

  /* CONTACT */
  .contact-grid{
    grid-template-columns:1fr;
  }

  .contact-card{
    min-height:112px;
  }

  .contact-card strong{
    font-size:15px;
  }

  .contact-footer img{
    width:155px;
  }
}

/* 짧은 높이의 스마트폰 / 모바일 가로모드:
   콘텐츠를 억지로 100svh 안에 가두지 않고 스크롤 가능하게 처리 */
@media (max-width:980px) and (max-height:720px){
  .hero{
    height:auto;
    min-height:640px;
  }

  .hero-shell{
    height:640px;
    min-height:640px;
  }

  .hero-center{
    margin-top:-28px;
  }

  .hero-capabilities{
    bottom:34px;
  }

  .scroll-cue{
    display:none;
  }
}

@media (max-width:980px) and (orientation:landscape) and (max-height:600px){
  .hero{
    min-height:620px;
  }

  .hero-shell{
    height:620px;
    min-height:620px;
  }

  .hero-hayan{
    font-size:90px;
  }

  .hero-company{
    font-size:46px;
  }

  .hero-title{
    font-size:24px;
  }

  .hero-copy{
    font-size:11.5px;
  }
}


/* =========================================================
   HAYAN V45 · REAL DEVICE MOBILE TUNING
   실제 삼성 인터넷 모바일 화면 기준.
   PC V43/V44 스타일은 그대로 잠금.
   ========================================================= */

@media (max-width:560px){
  /* 모바일 HERO는 한 화면 정중앙 고정보다 자연스러운 문서 흐름이 안정적 */
  .hero{
    height:auto!important;
    min-height:100dvh!important;
    overflow:visible!important;
  }

  .hero-shell{
    height:auto!important;
    min-height:100dvh!important;
    justify-content:flex-start!important;
    padding-top:clamp(118px,15dvh,145px)!important;
    padding-bottom:calc(34px + env(safe-area-inset-bottom))!important;
  }

  /* 실제 기기에서 보였던 헤더~로고 사이 과도한 공백 제거 */
  .hero-center{
    margin-top:0!important;
    width:100%;
  }

  .hero-wordmark{
    margin-top:18px!important;
  }

  /* 브랜드 임팩트는 유지하되 모바일 세로 공간은 조금 절약 */
  .hero-hayan{
    font-size:clamp(80px,24vw,100px)!important;
  }

  .hero-company{
    font-size:clamp(40px,12.4vw,52px)!important;
  }

  .hero-title{
    margin-top:16px!important;
    font-size:clamp(24px,6.8vw,29px)!important;
    line-height:1.38!important;
  }

  .hero-copy{
    margin-top:14px!important;
    padding-inline:4px!important;
    font-size:12px!important;
    line-height:1.68!important;
  }

  /*
   기존에는 역량 카드가 화면 하단에 absolute로 고정되어
   삼성 인터넷 하단 툴바와 겹쳐 일부만 보였습니다.
   모바일에서는 본문 흐름으로 전환합니다.
  */
  .hero-capabilities{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    margin:24px auto 0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .hero-cap{
    min-height:58px!important;
    padding:9px 7px!important;
  }

  .hero-cap b{
    font-size:13.5px!important;
  }

  .hero-cap span{
    font-size:9.2px!important;
    margin-top:-4px!important;
  }

  /* 모바일 첫 화면에서는 불필요한 하단 스크롤 장식 제거 */
  .scroll-cue{
    display:none!important;
  }
}

/* 작은 폭(360~390px)에서 로고/본문이 가장자리와 너무 가까워지지 않도록 */
@media (max-width:390px){
  .hero-shell{
    width:calc(100% - 26px)!important;
    padding-top:112px!important;
  }

  .hero-hayan{
    font-size:clamp(76px,23.5vw,92px)!important;
  }

  .hero-company{
    font-size:clamp(38px,12vw,48px)!important;
  }

  .hero-title{
    font-size:clamp(23px,6.7vw,27px)!important;
  }

  .hero-copy{
    font-size:11.7px!important;
  }
}

/* 삼성 인터넷 등 동적 브라우저 툴바가 있는 짧은 화면 안전 처리 */
@media (max-width:560px) and (max-height:740px){
  .hero-shell{
    padding-top:104px!important;
  }

  .hero-wordmark{
    margin-top:12px!important;
  }

  .hero-capabilities{
    margin-top:20px!important;
  }
}