:root {
  --font:"PretendardVariable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --ink:#191a22; --text:#545661; --blue:#354fc4; --blue-dark:#243b9d;
  --pale:#edf0ff; --paper:#f6f6f9; --line:#dddee6; --navy:#202746;
  --gutter:clamp(22px,5.6vw,104px); --head:74px; --max:1536px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--head); }
html.lenis { scroll-behavior:auto; }
body { margin:0; color:var(--ink); background:white; font-family:var(--font); word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
h1,h2,h3,p,dl,dd { margin:0; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { border:0; background:none; color:inherit; cursor:pointer; }
button:disabled { cursor:default; opacity:.45; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #6a83ee; outline-offset:3px; }
.wrap,.header-row { width:min(calc(100% - var(--gutter) * 2),var(--max)); margin-inline:auto; }
.section { padding-block:clamp(60px,6.15vw,108px); }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--blue); font:700 11px/1.4 var(--font); letter-spacing:.14em; }
.eyebrow i { width:18px; height:2px; background:currentColor; }
.section h2 { font-size:clamp(34px,3.2vw,58px); font-weight:700; line-height:1.19; letter-spacing:-.072em; }
.period { color:var(--blue); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:25px; margin:12px 0 28px; }
.section-heading>p,.proc-intro { font-size:15px; line-height:1.7; letter-spacing:-.03em; color:var(--text); }
.sr-only,.trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip { position:fixed; top:-100px; left:20px; z-index:100; padding:14px; background:white; }
.skip:focus { top:10px; }
[hidden] { display:none!important; }

.site-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.98); border-bottom:1px solid #e8e8ed; }
.header-row { height:var(--head); display:flex; align-items:center; gap:clamp(20px,3vw,54px); }

.desktop-nav { display:flex; align-items:center; gap:clamp(17px,2.7vw,48px); margin-left:auto; }
.desktop-nav a { padding-block:21px; font-size:14px; font-weight:600; }
.desktop-nav a:hover,.official:hover { color:var(--blue); }
.head-contact,.primary,.submit { display:inline-flex; align-items:center; justify-content:center; gap:18px; border-radius:100px; color:white; font-weight:700; }
.head-contact { background:var(--ink); padding:10px 19px; font-size:13px; }
.head-contact span,.primary span { font:19px/1 var(--font); }
.head-contact:hover,.primary:hover,.submit:hover { background:var(--blue-dark); }
.menu-btn,#mobile-nav { display:none; }

.hero { background:#f7f7fa; border-bottom:1px solid #e7e7ed; }
.hero-layout { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); grid-template-rows:1fr auto; gap:0 clamp(30px,4.3vw,85px); padding-block:clamp(30px,3.5vw,66px); }
.hero-content { grid-area:1/1; align-self:center; padding:14px 0 26px; }
.hero h1 { font-size:clamp(43px,4.05vw,80px); font-weight:700; letter-spacing:-.078em; line-height:1.16; margin:21px 0 18px; }
#hero-desc { font-size:clamp(14px,1.16vw,20px); line-height:1.72; color:#53545f; letter-spacing:-.048em; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:17px 23px; margin-top:26px; }
.primary { background:var(--blue); min-height:45px; padding:0 20px; font-size:14px; }
.text-link { display:inline-flex; align-items:center; gap:11px; font-size:14px; font-weight:700; }
.text-link span { color:var(--blue); font-size:19px; line-height:1; }
.text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.hero-picture { grid-area:1/2/3/3; min-height:clamp(335px,32.7vw,580px); border-radius:17px; overflow:hidden; position:relative; background:#dedee8; }
.hero-picture img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center; }
.slide-controls { grid-area:2/1; display:flex; align-items:center; gap:10px; height:38px; margin-bottom:4px; font:700 12px/1 var(--font); font-variant-numeric:tabular-nums; }
.total { color:#72727e; font-weight:500; }
.meter { width:61px; height:2px; background:#d3d5e0; }
.meter i { display:block; width:25%; height:100%; background:var(--blue); transition:width .25s; }
.slide-buttons { display:flex; align-items:center; gap:2px; margin-left:7px; }
.slide-buttons button { display:grid; place-items:center; width:33px; height:33px; padding:0; font:18px/1 var(--font); border-radius:50%; }
.slide-buttons button:hover { background:#e5e8f4; }
#slide-toggle { font-size:12px; }

.biz-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.35vw,25px); }
.business-card { position:relative; display:flex; flex-direction:column; border-bottom:1px solid var(--line); padding-bottom:16px; }
.business-card img { width:100%; aspect-ratio:1.76; object-fit:cover; border-radius:9px; margin-bottom:16px; }
.business-card small,.modal-bar small { display:block; font:700 9px/1.4 var(--font); letter-spacing:.11em; color:var(--blue); }
.business-card h3 { font-size:clamp(17px,1.42vw,26px); line-height:1.32; letter-spacing:-.061em; margin:5px 32px 5px 0; }
.business-card p { font-size:13px; color:var(--text); line-height:1.5; letter-spacing:-.045em; }
.card-arrow { position:absolute; right:0; bottom:38px; color:var(--ink); width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-family:var(--font); }
.business-card:hover .card-arrow { background:var(--blue); border-color:var(--blue); color:white; }
.business-card:hover h3 { color:var(--blue); }

.portfolio { background:var(--paper); }
.portfolio-layout { display:grid; grid-template-columns:minmax(182px,.28fr) minmax(0,1fr); gap:clamp(28px,5vw,94px); align-items:start; }
.gallery-rail { position:sticky; top:calc(var(--head) + 25px); }
.gallery-rail .section-heading { display:block; margin:13px 0 24px; }
.gallery-rail .section-heading>p { margin-top:13px; font-size:13px; }
.gallery-rail .desktop-break { display:none; }
.filters { display:flex; flex-direction:column; gap:2px; }
.filters button { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:8px 13px; font-size:14px; font-weight:600; border-radius:5px; text-align:left; }
.filters button:hover { background:#ededf4; }
.filters button[aria-pressed=true] { background:#2e45ac; color:white; }
.filters small { font:500 12px/1 var(--font); font-variant-numeric:tabular-nums; }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:31px clamp(14px,1.5vw,28px); scroll-margin-top:14px; }
.work-grid:focus { outline:0; }
.work { display:block; width:100%; min-width:0; padding:0; text-align:left; align-self:start; }
.work .frame { display:block; aspect-ratio:1.7; border:1px solid #20213812; border-radius:8px; overflow:hidden; background:#e3e3e9; }
.work .frame img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.work:hover .frame img { transform:scale(1.025); }
.work-info { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.work-info>span { min-width:0; }
.work-sector { display:block; color:#475879; font-size:10px; line-height:1.5; font-weight:600; }
.work-info strong { display:block; margin-top:2px; font-size:clamp(18px,1.45vw,26px); line-height:1.3; letter-spacing:-.06em; }
.work-info small { display:block; margin-top:4px; color:var(--text); font-size:12px; line-height:1.55; letter-spacing:-.03em; }
.work-info>i { align-self:start; font:normal 19px/1.3 var(--font); }
.gallery-pages:not([hidden]) { display:flex; justify-content:center; align-items:center; gap:5px; margin-top:38px; }
.gallery-pages button { min-width:40px; height:40px; border-radius:50%; padding:0 7px; font:600 14px/1 var(--font); }
.gallery-pages button:hover:not(:disabled) { background:#e2e5f2; }
.gallery-pages [aria-current=page],.gallery-pages [aria-current=page]:hover:not(:disabled) { background:var(--blue); color:white; }

.proc-wrap>div { display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px 20px; margin-bottom:30px; }
.proc-wrap .eyebrow { grid-column:1/-1; }
.proc-intro { max-width:280px; }
.proc-intro br { display:none; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(17px,2vw,38px); list-style:none; margin:0; padding:0; }
.steps li { border-top:2px solid #c4cce7; padding:20px 0 0; }
.steps li>span { display:block; font:700 14px/1 var(--font); letter-spacing:.08em; color:var(--blue); margin-bottom:16px; }
.steps h3 { font-size:clamp(19px,1.55vw,27px); margin-bottom:7px; letter-spacing:-.055em; }
.steps p { color:var(--text); font-size:14px; line-height:1.7; letter-spacing:-.03em; max-width:36em; }

.experience { background:var(--navy); color:white; }
.experience .eyebrow { color:#b3c3ff; }
.experience .period { color:#a6bcff; }
.experience-head { display:flex; justify-content:space-between; align-items:end; gap:24px; }
.experience-head h2 { margin-top:13px; }
.experience-head>p { color:#d7dbeb; font-size:15px; letter-spacing:-.035em; }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(29px,3vw,54px); padding-top:clamp(23px,2.4vw,40px); border-top:1px solid #ffffff40; }
.metric { display:flex; flex-direction:column; align-items:flex-start; padding-inline:clamp(18px,2.5vw,47px); border-left:1px solid #ffffff35; }
.metric:first-child { padding-left:0; border-left:0; }
.metric dt { font-size:clamp(15px,1.2vw,20px); line-height:1.4; font-weight:600; letter-spacing:-.04em; }
.metric dt>span { display:block; margin-bottom:3px; color:#c8cde0; font:500 11px/1.4 var(--font); letter-spacing:.025em; }
.metric dd { display:flex; align-items:baseline; gap:.14em; margin-top:12px; font:600 clamp(62px,6.4vw,111px)/.95 var(--font); letter-spacing:-.075em; font-variant-numeric:tabular-nums; }
.metric:nth-child(1) dd { color:#b5c9ff; }
.metric:nth-child(3) dd { color:#ffc9b3; }
.metric dd small { color:#f4f5fc; font:700 clamp(15px,1.3vw,24px)/1 var(--font); }
.contact-wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(37px,8vw,150px); }
.contact h2 { margin-top:13px; font-size:clamp(43px,4.1vw,76px); }
.contact-aside>p:not(.eyebrow) { margin-top:18px; color:var(--text); font-size:15px; line-height:1.75; }
.contact-phone { display:block; font-size:clamp(22px,2.2vw,38px); font-weight:700; letter-spacing:-.045em; margin-top:30px; }
.contact-phone span { color:var(--blue); font-size:.68em; }
.contact-email { display:inline-block; color:var(--text); font-size:14px; margin-top:7px; }
form { min-width:0; }
form>label,.form-pair label { display:block; margin-bottom:19px; font-size:14px; font-weight:600; }
.form-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
form b { color:var(--blue); }
.optional { color:var(--text); font-size:12px; }
input:not([type=checkbox]),select,textarea { width:100%; display:block; border:1px solid #cfd1dc; border-radius:5px; background:#fafafd; color:var(--ink); margin-top:7px; padding:12px 13px; font-size:15px; font-weight:400; }
select { min-height:46px; cursor:pointer; }
input::placeholder,textarea::placeholder { color:#70737f; }
textarea { resize:vertical; min-height:96px; }
.privacy-line { display:flex; justify-content:space-between; align-items:center; gap:7px; font-size:13px; }
.privacy-line label { display:flex; align-items:center; gap:6px; }
.privacy-line input { width:17px; height:17px; margin:0; accent-color:var(--blue); }
.privacy-line button { text-decoration:underline; text-underline-offset:4px; }
.submit { margin-top:18px; width:100%; min-height:48px; border-radius:6px; justify-content:space-between; padding-inline:19px; background:var(--blue); }
.submit span { font-size:19px; }
.form-feedback { margin-top:10px; font-size:13px; color:#454f77; line-height:1.6; }
.form-feedback:empty { display:none; }

footer { background:#171922; color:white; padding:35px 0 28px; }

.footer-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid #414351; }
.official { font-size:13px; }
footer .official:hover { color:#c2d1ff; }
.company,.copyright { color:#c5c7d0; font-size:12px; line-height:1.8; }
.company { margin-top:15px; }
.company span { margin-right:8px; }
.copyright { font:10px/1.5 var(--font); letter-spacing:.08em; margin-top:13px; }

dialog { width:min(94vw,1000px); max-height:90svh; border:0; border-radius:10px; padding:0; color:var(--ink); background:#fff; box-shadow:0 20px 70px #0e102c33; }
dialog::backdrop { background:#171a2bd1; }
body:has(dialog[open]) { overflow:hidden; }
.modal-bar,.modal-foot { display:flex; justify-content:space-between; align-items:center; padding:14px 19px; gap:12px; }
.modal-bar h2 { font-size:21px; letter-spacing:-.05em; }
.modal-foot { font-size:13px; line-height:1.55; }
.modal-foot>div { display:flex; align-items:center; gap:9px; flex:none; }
.close,.modal-foot button { border-radius:50%; background:var(--paper); width:39px; height:39px; font:24px/1 var(--font); }
.modal-foot button { font-size:17px; }
#work-dialog .modal-bar { position:sticky; top:0; z-index:1; background:#fff; }
#work-original { display:block; }
#dialog-img { width:100%; height:auto; }
#privacy-dialog { max-width:500px; }
.privacy-copy { padding:3px 20px 21px; font-size:14px; line-height:1.75; }
.privacy-copy dl { margin:14px 0; }
.privacy-copy dt { font-weight:700; color:var(--blue); }
.privacy-copy dd { margin:1px 0 8px; }

@media (max-width:1000px) {

  .hero-layout { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:0 24px; }
  .hero h1 { font-size:clamp(38px,4.8vw,47px); }
  .portfolio-layout { grid-template-columns:minmax(155px,.26fr) minmax(0,1fr); gap:25px; }
  .work-grid { gap:25px 13px; }
  .business-card p { font-size:12px; }
  .card-arrow { width:23px; height:23px; font-size:13px; bottom:37px; }
}
@media (max-width:800px) {
  .hero-actions { gap:12px; }
  .text-link { font-size:13px; }
  .portfolio-layout { display:block; }
  .gallery-rail { position:static; }
  .filters { flex-direction:row; flex-wrap:wrap; gap:5px; margin-bottom:20px; }
  .filters button { min-height:34px; border:1px solid #d0d1dd; border-radius:40px; padding:7px 12px; font-size:12px; gap:6px; }
  .filters button[aria-pressed=true] { border-color:var(--blue); }
  .filters small { font-size:10px; }
  .business-card h3 { margin-right:0; }
  .card-arrow { display:none; }
}
@media (max-width:700px) {
  :root { --head:60px; --gutter:20px; }
  .section { padding-block:50px; }
  .header-row { gap:12px; }

  .desktop-nav { display:none; }
  .head-contact { margin-left:auto; font-size:12px; padding:8px 13px; gap:8px; }
  .menu-btn { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:36px; height:42px; padding:4px; }
  .menu-btn i { width:21px; height:2px; background:currentColor; }
  .menu-open .menu-btn i:first-child { transform:translateY(3.5px) rotate(45deg); }
  .menu-open .menu-btn i:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  #mobile-nav:not([hidden]) { display:grid; padding:4px var(--gutter) 13px; }
  #mobile-nav a { font-size:15px; padding:11px 0; border-top:1px solid var(--line); }
  .hero-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; gap:18px; padding-block:31px 12px; }
  .hero-content { grid-area:1/1; padding:0; }
  .hero-picture { grid-area:2/1; min-height:unset; aspect-ratio:1.8; border-radius:10px; }
  .slide-controls { grid-area:3/1; justify-content:flex-start; margin:-8px 0 0; height:35px; font-size:11px; }
  .slide-buttons { margin-left:auto; }
  .hero h1 { font-size:clamp(35px,8.1vw,51px); margin:12px 0; line-height:1.14; }
  #hero-desc { font-size:14px; line-height:1.6; }
  .eyebrow { font-size:10px; }
  .hero-actions { gap:19px; margin-top:17px; }
  .primary { min-height:41px; padding-inline:15px; font-size:13px; gap:10px; }
  .text-link { font-size:13px; }
  .section h2 { font-size:34px; }
  .section-heading { display:block; margin:9px 0 18px; }
  .section-heading>p,.proc-intro { font-size:14px; }
  .section-heading>p { margin-top:9px; }
  .desktop-break { display:none; }
  .biz-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px 10px; }
  .business-card { padding-bottom:11px; }
  .business-card img { margin-bottom:10px; aspect-ratio:1.48; border-radius:6px; }
  .business-card small { font-size:8px; }
  .business-card h3 { font-size:clamp(16px,3.8vw,21px); margin:4px 0; }
  .business-card p { font-size:11px; }
  .proc-wrap>div { display:block; margin-bottom:15px; }
  .proc-wrap h2 { margin:10px 0; }
  .proc-intro { max-width:100%; }
  .steps { grid-template-columns:1fr; gap:0; }
  .steps li { display:grid; grid-template-columns:28px 1fr; gap:10px; border-top:1px solid var(--line); padding:15px 0; }
  .steps li>span { margin:5px 0 0; font-size:12px; }
  .steps h3 { font-size:18px; margin-bottom:4px; }
  .steps p { font-size:13px; }
  .experience-head { display:block; }
  .experience-head h2 { max-width:14em; text-wrap:balance; }
  .experience-head>p { margin-top:10px; font-size:14px; }
  .metrics { margin-top:22px; padding-top:19px; gap:0; }
  .metric { padding-inline:10px; }
  .metric dt { font-size:11px; }
  .metric dt>span { display:none; }
  .metric dd { font-size:clamp(38px,8.8vw,62px); margin-top:8px; gap:.12em; }
  .metric dd small { font-size:12px; }
  .contact-wrap { display:block; }
  .contact h2 br { display:none; }
  .contact-aside>p:not(.eyebrow) { margin-top:10px; }
  .contact-phone { margin-top:16px; }
  form { margin-top:25px; }
  .form-pair { gap:9px; }
  input:not([type=checkbox]),select,textarea { font-size:16px; }
  .privacy-line { font-size:12px; }

  body { padding-bottom:calc(48px + env(safe-area-inset-bottom)); }

  .company { font-size:11px; }
  .official { font-size:12px; }
  .modal-bar,.modal-foot { padding:12px; }
  .modal-foot { flex-direction:column; align-items:stretch; }
  .modal-foot>div { align-self:flex-end; }
}
@media (max-width:560px) {
  .work-grid { grid-template-columns:1fr; gap:23px; }
  .work-info { margin-top:9px; }
}
@media (max-width:360px) {
  :root { --gutter:16px; }
  .form-pair { grid-template-columns:1fr; gap:0; }
  .metrics { grid-template-columns:1.05fr 1fr 1fr; }
  .metric { padding-inline:6px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}