@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Freesentation/Freesentation.css');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  --h: 34;
  --bg:      hsl(var(--h) 14% 95%);
  --surface: hsl(var(--h) 20% 99%);
  --ink:     hsl(var(--h) 30% 12%);
  --muted:   hsl(var(--h) 10% 40%);
  --accent:  hsl(var(--h) 62% 32%);
  --line:    hsl(var(--h) 14% 84%);
  --grid:    hsl(var(--h) 12% 88%);
  --head-font: 'Freesentation', 'Pretendard', sans-serif;
  --head-weight: 800;
  --body-font: 'Pretendard', sans-serif;
  --body-weight: 400;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body-font);font-weight:var(--body-weight);
  line-height:1.7;
}
h1,h2,h3{font-family:var(--head-font);font-weight:var(--head-weight);line-height:1.3;margin:0 0 .6em}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.container{max-width:1080px;margin:0 auto;padding-inline:1.25rem}
@media (max-width:640px){.container{padding-inline:1rem}}

/* progress indicator (progressive enhancement, no JS) */
.progress-rail{position:sticky;top:0;height:3px;background:var(--line);z-index:11}
.progress-rail::before{
  content:"";display:block;height:100%;background:var(--accent);
  transform-origin:0 50%;transform:scaleX(0);
}
@supports (animation-timeline: scroll()){
  .progress-rail::before{
    animation: progress-fill linear;
    animation-timeline: scroll(root);
  }
  @keyframes progress-fill{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
}

.site-header{position:sticky;top:3px;z-index:10;background:hsl(var(--h) 20% 96% / .92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.site-header__inner{max-width:1080px;margin:0 auto;padding:.65rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.site-header__logo{font-family:var(--head-font);font-weight:var(--head-weight);font-size:1.3rem;text-decoration:none;color:var(--ink)}
.site-header__cta{display:inline-flex;padding:.5rem 1rem;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;font-size:.82rem;font-weight:700}
.site-header__right{display:flex;align-items:center;gap:.6rem}
.site-header__nav{display:flex;align-items:center;gap:1.1rem}
.site-header__nav a{color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:600}
.site-header__nav a:hover{color:var(--accent)}
@media (max-width:640px){.site-header__nav{display:none}}


.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-block:1.5rem}
.cta{display:inline-flex;align-items:center;padding:.75rem 1.4rem;border-radius:8px;text-decoration:none;font-weight:700;font-size:.95rem}
.cta--primary{background:var(--accent);color:#fff}
.cta--ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}

.hero{position:relative;overflow:hidden;min-height:clamp(320px,46vw,560px);display:flex;flex-direction:column;justify-content:flex-end;border-bottom:1px solid var(--line)}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgb(0 0 0/.72),rgb(0 0 0/.1) 60%)}
.hero .container{position:relative;z-index:2;padding-block:2.5rem}
.hero__title{font-size:clamp(1.7rem,4.4vw,2.35rem);margin-bottom:.5em;color:#fff}
.hero__lede{color:#fff;max-width:64ch;font-size:1.02rem}

.photo-strip{display:flex;gap:.6rem;max-width:900px;margin:1.5rem auto 0;padding-inline:1.25rem}
.photo-strip img{flex:1 1 0;min-width:0;aspect-ratio:1/1;object-fit:cover;border-radius:8px}

.hero--plain{position:static;overflow:visible;min-height:0;display:block;padding-block:2.75rem 1.5rem}
.hero--plain::after{content:none}
.hero--plain .container{padding-block:0}
.hero--plain .hero__title{color:var(--ink)}
.hero--plain .hero__lede{color:var(--muted)}

.service-list{padding-block:1rem 2.5rem}
.service-list__h2{font-size:1.15rem;margin-bottom:.75rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.service-list:first-of-type .service-list__h2{border-top:none;padding-top:0}
.service-list__group{list-style:none;margin:0 0 .5rem;padding:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.service-list__group a{display:block;padding:1.3rem 1.2rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-decoration:none;color:var(--ink);font-size:1.1rem;font-weight:700}
.service-list__group a:hover,.service-list__group a:focus-visible{background:var(--bg)}
@media(max-width:640px){.photo-strip{padding-inline:1rem}}

.layer{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:2rem 1.5rem;margin:2.75rem auto;max-width:900px}
.layer__h2{font-size:1.55rem;margin-top:.3em;margin-bottom:.9em}
.layer__lede{color:var(--muted);margin-bottom:1.1em}
.layer__body p{color:var(--ink)}

.datatable{margin-top:1rem;font-size:.92rem;width:100%}
.datatable th,.datatable td{border:1px solid var(--line);padding:.6rem .75rem;text-align:left;vertical-align:top}
.datatable thead th{background:var(--grid);font-family:var(--head-font);font-weight:700;font-size:.86rem}
.datatable tbody tr:nth-child(even){background:hsl(var(--h) 14% 97%)}
@media(max-width:640px){
  .datatable thead{display:none}
  .datatable, .datatable tbody, .datatable tr, .datatable td{display:block;width:100%}
  .datatable tr{border:1px solid var(--line);border-radius:8px;margin-bottom:.75rem;overflow:hidden}
  .datatable td{border:none;border-top:1px solid var(--line);padding:.5rem .75rem}
  .datatable td:first-child{border-top:none;font-weight:700;font-family:var(--head-font);background:var(--grid)}
  .datatable td::before{content:attr(data-label);display:block;font-size:.72rem;color:var(--muted);font-weight:400;font-family:var(--body-font);margin-bottom:.15rem}
  .datatable td:first-child::before{content:none}
}

.diagram, .flow, .steps{
  margin: 1.5rem auto 0; max-width: 760px;
  padding: 1.5rem 1rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.diagram svg, .flow svg, .steps svg{ width: 100%; height: auto; display: block; }
.diagram figcaption, .flow figcaption, .steps figcaption{
  margin-top: .9rem; font-size: .875rem; color: var(--muted); text-align: center;
}

.kwcarousel{padding-block:2.25rem 1rem}
.kwcarousel__head{font-size:1.7rem;margin-bottom:1rem}
.kwcarousel__track{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;padding-block:.25rem;
  list-style:none;margin:0;padding-left:0;
}
@media(min-width:560px){.kwcarousel__track{grid-template-columns:repeat(3,1fr)}}
.kwcard{min-width:0}
.kwcard__link{
  display:flex;flex-direction:column;gap:.35rem;height:100%;padding:.7rem;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink);text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.kwcard__link:hover,.kwcard__link:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 8px 24px hsl(var(--h) 30% 20% / .12);
}
.kwcard__figure img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px}
.kwcard__title{font-size:.85rem;margin:0;line-height:1.3}
.kwcard__desc{color:var(--muted);font-size:.78rem;margin:0;flex:1}
.kwcard__more{font-size:.74rem;font-weight:700;color:var(--accent)}
@media(max-width:560px){.kwcard__title{font-size:.75rem}.kwcard__more{display:none}.kwcard__link{padding:.45rem}}
@media (prefers-reduced-motion: reduce){
  .kwcard__link{transition:none}
  .kwcard__link:hover{transform:none}
}

.svc-detail{padding-block:1rem}
.svc-detail__head{font-size:1.7rem;margin-bottom:1rem}
.svc-detail__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;list-style:none;margin:0 0 1.25rem;padding:0}
@media(min-width:560px){.svc-detail__grid{grid-template-columns:repeat(4,1fr)}}
.svc-detail__card{text-align:center}
.svc-detail__card a{color:inherit;text-decoration:none;display:block}
.svc-detail__card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px}
.svc-detail__card h3{font-size:.9rem;margin:.5rem 0 0}

.case-cases{padding-block:1rem}
.case-cases__head{font-size:1.7rem;margin-bottom:1rem}
.case-grid{display:grid;gap:1.25rem;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media(min-width:640px){.case-grid{grid-template-columns:1fr 1fr}}
.case-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.25rem}
.case-card__title{font-size:1rem;margin-bottom:.75rem}
.case-card__pair{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:0 0 .75rem;list-style:none;padding:0}
.case-card__pair img{aspect-ratio:3/4;object-fit:cover;border-radius:8px;width:100%}
.case-card__pair figcaption{font-size:.72rem;color:var(--muted);text-align:center;margin-top:.3rem}
.case-card__videos{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.75rem}
.case-card__videos video{width:100%;border-radius:8px;min-width:0;grid-column:span 1}
.case-card__videos video:only-child{grid-column:1/-1}

.case-gallery{padding-block:1rem}
.case-gallery__head{font-size:1.3rem;margin-bottom:1rem}
.case-gallery__group{margin-bottom:1.5rem}
.case-gallery__group h3{font-size:.92rem;margin-bottom:.6rem}
.case-gallery__group ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr)}
.case-gallery__group img{aspect-ratio:1/1;object-fit:cover;border-radius:8px}

.faq{padding-block:1rem}
.faq__item{border-top:1px solid var(--line);padding-block:1.1rem}
.faq__q{font-weight:700;margin:0 0 .5em}
.faq__a{color:var(--muted);margin:0}

.site-footer.site-footer--v0{background:hsl(var(--h) 24% 14%);color:hsl(var(--h) 10% 82%);margin-top:3rem}
.site-footer__inner{max-width:1080px;margin:0 auto;padding:2.25rem 1.25rem}
.site-footer__biz{display:flex;flex-wrap:wrap;row-gap:.3rem;font-size:.85rem;line-height:1.5;color:hsl(var(--h) 10% 70%)}
.site-footer__biz span:not(:first-child){margin-left:.9rem;padding-left:.9rem;border-left:1px solid hsl(var(--h) 10% 40%)}
.site-footer__biz a{color:#fff;text-decoration:underline}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.5rem 0;font-size:.85rem}
.site-footer__nav a{text-decoration:none;color:hsl(var(--h) 10% 82%)}
.site-footer__nav a:hover{text-decoration:underline}
.site-footer__copy{font-size:.78rem;color:hsl(var(--h) 10% 55%);margin:0}
@media(max-width:640px){
  .site-footer.site-footer--v0{margin-top:1.5rem}
  .site-footer__inner{padding:1.25rem 1rem}
  .site-footer__biz{font-size:.76rem;line-height:1.45}
  .site-footer__nav{gap:.5rem .7rem;margin:.9rem 0;font-size:.76rem}
  .site-footer__copy{font-size:.7rem}
}

.gallery{max-width:720px;margin:0 auto;padding:2.5rem 1.25rem 0}
.gallery h2{font-size:1.2rem;text-align:center}
.gallery__grid{display:grid;grid-template-columns:repeat(2,minmax(0,220px));justify-content:center;gap:1rem;margin-top:1rem}
.gallery__grid img{border-radius:10px;aspect-ratio:3/4;object-fit:cover}
@media(max-width:480px){.gallery__grid{grid-template-columns:minmax(0,260px)}}

.related{max-width:720px;margin:0 auto;padding:1rem 1.25rem 3rem}
.related h2{font-size:1.1rem;text-align:center;color:var(--muted)}
.related__list{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;list-style:none;padding:0;margin:1rem 0 0}
.related__list a{display:inline-flex;padding:.5rem .9rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.85rem}

.gallery__pairs{display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem}
.gallery__pair{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;width:100%;max-width:480px;margin:0 auto}
.gallery__pair figure{position:relative;margin:0;min-width:0}
.gallery__pair img{border-radius:10px;aspect-ratio:3/4;object-fit:cover;width:100%}
.gallery__tag{position:absolute;top:.5rem;left:.5rem;background:rgba(0,0,0,.65);color:#fff;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px}
.gallery__tag--after{background:var(--accent);color:#2c1c04}
@media(max-width:480px){.gallery__pair{max-width:300px}}