@charset "UTF-8";

body {background: #fff; color: var(--color-ink);}
body:has(.main-visual) {background: var(--color-bg);}

.wrap {width: 100%; max-width: 1680px; margin: 0 auto; padding: 0 40px;}
.skip-to-content:focus {position: fixed; top: 10px; left: 10px; z-index: 1000; width: auto; height: auto; padding: 10px 16px; background: #fff;}

@media (max-width: 768px) {
    .wrap {padding: 0 20px;}
}

/* =========================================================
   HEADER
   ========================================================= */
/* 불투명 유리 : 뒤 콘텐츠가 뿌옇게 비침 */
header {position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 1px 0 rgba(20, 18, 24, .06); transition: background .4s, box-shadow .4s;}
/* 읽기 진행선 : 스크롤한 만큼 하단에 채워짐 (서브페이지, common.js) */
header::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #00b4e6, #2f6bff); transform: scaleX(var(--progress, 0)); transform-origin: left; pointer-events: none;}
header.so-open::after, header.mo-open::after {display: none;}
header .header-top .wrap {display: flex; align-items: center; gap: 40px; max-width: 1840px; height: 88px; padding: 0 60px;}

/* 진입 : 로고 → 메뉴 → 버튼 순서로 위에서 내려옴. 끝난 뒤에는 효과를 남기지 않아 사이트맵 열림 스타일과 충돌하지 않음 */
header .logo, header .gnb-list > li, header .header-etc > * {animation: headerIn .6s var(--ease) backwards;}
header .gnb-list > li {animation-delay: calc(.08s + var(--n, 0) * .05s);}
header .gnb-list > li:nth-child(2) {--n: 1;}
header .gnb-list > li:nth-child(3) {--n: 2;}
header .gnb-list > li:nth-child(4) {--n: 3;}
header .gnb-list > li:nth-child(5) {--n: 4;}
header .gnb-list > li:nth-child(6) {--n: 5;}
header .header-etc > * {animation-delay: .4s;}
header .header-etc > :last-child {animation-delay: .46s;}
@keyframes headerIn {
    from {opacity: 0; transform: translateY(-14px);}
}
@media (prefers-reduced-motion: reduce) {
    header .logo, header .gnb-list > li, header .header-etc > * {animation: none;}
}

header .logo {flex-shrink: 0; line-height: 1; transition: opacity .3s;}
header .logo a {display: block;}
header .logo img {display: block; height: 45px; width: auto;}

/* GNB */
header .gnb {margin: 0 auto; height: 100%; transition: opacity .3s, visibility .3s;}
header .gnb-list {display: flex; gap: 6px; height: 100%;}
header .gnb-list > li {position: relative; display: flex; align-items: center; height: 100%;}
header .gnb-list > li > a {position: relative; display: block; padding: 8px 24px; font-weight: 500; font-size: 20px; letter-spacing: -0.03em; color: #1a1f2e; transition: color .3s;}
header .gnb-list > li > a::after {content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);}
header .gnb-list > li:hover > a,
header .gnb-list > li:focus-within > a {color: var(--color-primary);}
header .gnb-list > li:hover > a::after,
header .gnb-list > li:focus-within > a::after {transform: scaleX(1); transform-origin: left;}

/* 우측 버튼 */
header .header-etc {display: flex; align-items: center; gap: 10px; margin-left: auto;}

/* 제작 상담하기 */
@property --ca {syntax: '<angle>'; inherits: false; initial-value: 0deg;}
header .header-contact {position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 28px; border-radius: 999px; background: linear-gradient(120deg, #0a1f5c 0%, #1f47c2 55%, #2f6bff 100%) 0 0 / 200% 100%; font-weight: 500; font-size: 17px; color: #fff; transition: background-position .6s var(--ease);}
header .header-contact::before {content: ""; position: absolute; inset: -3px; z-index: -1; padding: 3px; border-radius: inherit; background: conic-gradient(from var(--ca), transparent 0 50%, #00b4e6 75%, #2f6bff 94%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: contactRing 2.6s linear infinite; pointer-events: none;}
header .header-contact span {display: inline-flex; font-size: 14px; line-height: 1; transition: transform .3s var(--ease);}
header .header-contact span i::before {font-weight: 700 !important; -webkit-text-stroke: .4px currentColor;}
header .header-contact:hover {background-position: 100% 0; color: #fff;}
header .header-contact:hover span {transform: translateX(3px);}
@keyframes contactRing {to {--ca: 360deg;}}

/* 사이트맵 버튼 */
header .sitemap {display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #d5dae5; border-radius: 50%; background: #fff; color: #0a1f5c; cursor: pointer; transition: background .3s, color .3s, border-color .3s;}
header .sitemap .icon {display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; transition: transform .5s var(--ease);}
header .sitemap .icon i {width: 4px; height: 4px; border-radius: 1px; background: currentColor;}
header .sitemap:hover {border-color: #0a1f5c; background: #0a1f5c; color: #fff;}
header .sitemap.is-open .icon {transform: rotate(45deg);}

/* 메인 · 서브 상단 : 투명, 선 없음 */
body:has(.main-visual, .sub-visual) header:not(.scroll-on):not(.so-open) {background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;}

/* 스크롤 시 */
header.scroll-on {background: rgba(255, 255, 255, .72); box-shadow: 0 6px 24px -12px rgba(20, 18, 24, .15);}

/* 사이트맵 열림 */
header.so-open {background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;}
header.so-open .logo,
header.so-open .gnb,
header.so-open .header-contact {opacity: 0; visibility: hidden;}
header.so-open .sitemap {border-color: rgba(255, 255, 255, .5); color: #fff; background: transparent;}
header.so-open .sitemap:hover {background: #fff; color: var(--color-ink);}

/* 모바일 메뉴 열림 */
header.mo-open {background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;}
header.mo-open .logo,
header.mo-open .header-contact {opacity: 0; visibility: hidden;}

@media (max-width: 1600px) {
    header .gnb-list > li > a {padding: 8px 18px; font-size: 19px;}
    header .gnb-list > li > a::after {left: 18px; right: 18px;}
}
@media (max-width: 1400px) {
    header .header-top .wrap {gap: 24px; padding: 0 40px;}
    header .gnb-list {gap: 0;}
    header .gnb-list > li > a {padding: 8px 14px; font-size: 18px;}
    header .gnb-list > li > a::after {left: 14px; right: 14px;}
}
@media (max-width: 1200px) {
    header .gnb {display: none;}
}
@media (max-width: 768px) {
    header .header-top .wrap {height: 64px; padding: 0 20px;}
    header .header-contact {display: none;}
    header .logo img {height: 24px;}
}

/* =========================================================
   SITEMAP (PC)
   ========================================================= */
#sitemap {position: fixed; inset: 0; z-index: 99; overflow: hidden; background: #0b1530; color: #fff; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;}
#sitemap.is-open {opacity: 1; visibility: visible;}
#sitemap .bg {position: absolute; right: -10%; bottom: -30%; width: 70vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(80, 135, 255, .4), rgba(31, 71, 194, .15) 45%, transparent 70%); pointer-events: none;}
#sitemap .inner {position: relative; z-index: 1; display: grid; grid-template-columns: 1.7fr 1fr; gap: 80px; height: 100%; max-width: 1400px; margin: 0 auto; padding: 140px 60px 60px;}

/* 메뉴 */
#sitemap .menu {display: grid; grid-template-columns: auto 1fr; column-gap: 50px;}
#sitemap .menu-item {display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .8s var(--ease);}
#sitemap.is-open .menu-item {opacity: 1; transform: none;}
#sitemap.is-open .menu-item:nth-child(2) {transition-delay: .05s;}
#sitemap.is-open .menu-item:nth-child(3) {transition-delay: .1s;}
#sitemap.is-open .menu-item:nth-child(4) {transition-delay: .15s;}
#sitemap.is-open .menu-item:nth-child(5) {transition-delay: .2s;}
#sitemap.is-open .menu-item:nth-child(6) {transition-delay: .25s;}
#sitemap .menu-item > a {display: flex; align-items: baseline; gap: 18px; color: #fff;}
#sitemap .menu-item > a p {font-size: clamp(30px, 3vw, 44px); letter-spacing: -0.04em; transition: color .3s, transform .4s var(--ease);}
#sitemap .menu-item > a:hover p {color: #8fb0f2; transform: translateX(8px);}
#sitemap .menu-item .desc {overflow: hidden; font-size: clamp(16px, 1.25vw, 19px); white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, .7);}

/* 우측 */
#sitemap .fr {display: flex; flex-direction: column; padding-top: 18px;}
#sitemap .fr .logo {font-weight: 700; font-size: 26px; color: #fff;}
#sitemap .tagline {margin-top: 30px; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.4; letter-spacing: -0.04em;}
#sitemap .tagline .line {display: block;}
#sitemap .fb {margin-top: auto;}

/* 연락처 */
#sitemap .contact {display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 50px; margin: 0; padding: 26px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .15);}
#sitemap .contact li {display: flex; flex-direction: column; gap: 8px;}
#sitemap .contact .label {display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5);}
#sitemap .contact .label i {font-size: 14px; color: #8fb0f2;}
#sitemap .contact a {font-weight: 500; font-size: clamp(18px, 1.4vw, 21px); letter-spacing: -0.01em; color: #fff; transition: color .3s;}
#sitemap .contact a:hover {color: #8fb0f2;}

/* 상담 CTA */
#sitemap .sm-contact {position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; padding: 30px 30px 30px 34px; border-radius: 24px; background: linear-gradient(120deg, #1f47c2 0%, #2f6bff 60%, #00b4e6 100%) 0 0 / 200% 100%; color: #fff; box-shadow: 0 24px 50px -20px rgba(47, 107, 255, .7); opacity: 0; transform: translateY(20px); transition: opacity .6s .3s, transform .8s .3s var(--ease), background-position .6s var(--ease), box-shadow .4s;}
#sitemap .sm-contact::before {content: ""; position: absolute; inset: -2px; z-index: -1; padding: 2px; border-radius: 26px; background: conic-gradient(from var(--ca), transparent 0 50%, #7fe3ff 75%, #fff 94%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: contactRing 2.6s linear infinite; pointer-events: none;}
#sitemap.is-open .sm-contact {opacity: 1; transform: none;}
#sitemap .sm-contact .txt {display: flex; flex-direction: column; gap: 6px;}
#sitemap .sm-contact em {font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: .12em; color: rgba(255, 255, 255, .75);}
#sitemap .sm-contact strong {font-weight: 700; font-size: clamp(24px, 2vw, 30px); letter-spacing: -0.04em;}
#sitemap .sm-contact small {font-size: 15px; color: rgba(255, 255, 255, .85);}
#sitemap .sm-contact .ico {flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #1f47c2; font-size: 18px; line-height: 1;}
#sitemap .sm-contact .ico i {display: block; transition: transform .3s var(--ease);}
#sitemap .sm-contact .ico i::before {display: block; font-weight: 700 !important; -webkit-text-stroke: .6px currentColor;}
#sitemap .sm-contact:hover {background-position: 100% 0; box-shadow: 0 30px 60px -18px rgba(0, 180, 230, .75); color: #fff;}
#sitemap .sm-contact:hover .ico i {transform: translateX(3px);}

@media (max-width: 1200px) {
    #sitemap {display: none;}
}

/* =========================================================
   GNB MOBILE
   ========================================================= */
.gnb-dim {position: fixed; inset: 0; z-index: 98; background: rgba(20, 18, 24, .45); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;}
.gnb-dim.is-open {opacity: 1; visibility: visible;}

#gnb-mo {position: fixed; top: 0; right: 0; bottom: 0; z-index: 99; width: min(420px, 100%); overflow-y: auto; background: #fff; transform: translateX(100%); transition: transform .5s var(--ease); visibility: hidden;}
#gnb-mo.is-open {transform: none; visibility: visible;}
#gnb-mo .inner {display: flex; flex-direction: column; min-height: 100%; padding: 100px 28px 36px;}
#gnb-mo .menu-item > a {display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-line);}
#gnb-mo .menu-item p {font-size: 28px; letter-spacing: -0.04em;}

/* 상담 CTA */
#gnb-mo .mo-contact {position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 30px 0 40px; padding: 22px 20px 22px 24px; border-radius: 20px; background: linear-gradient(120deg, #1f47c2 0%, #2f6bff 60%, #00b4e6 100%) 0 0 / 200% 100%; color: #fff; box-shadow: 0 18px 36px -16px rgba(47, 107, 255, .7); transition: background-position .6s var(--ease);}
#gnb-mo .mo-contact::before {content: ""; position: absolute; inset: -2px; z-index: -1; padding: 2px; border-radius: 22px; background: conic-gradient(from var(--ca), transparent 0 50%, #00b4e6 75%, #2f6bff 94%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: contactRing 2.6s linear infinite; pointer-events: none;}
#gnb-mo .mo-contact .txt {display: flex; flex-direction: column; gap: 4px;}
#gnb-mo .mo-contact em {font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: .12em; color: rgba(255, 255, 255, .75);}
#gnb-mo .mo-contact strong {font-weight: 700; font-size: 22px; letter-spacing: -0.04em;}
#gnb-mo .mo-contact .ico {flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #1f47c2; font-size: 16px; line-height: 1;}
#gnb-mo .mo-contact .ico i {display: block; transition: transform .3s var(--ease);}
#gnb-mo .mo-contact .ico i::before {display: block; font-weight: 700 !important; -webkit-text-stroke: .6px currentColor;}
#gnb-mo .mo-contact:hover {background-position: 100% 0; color: #fff;}
#gnb-mo .mo-contact:hover .ico i {transform: translateX(3px);}

/* 연락처 */
#gnb-mo .contact {display: flex; flex-direction: column; gap: 18px; margin: auto 0 0; padding: 24px 0 0; list-style: none; border-top: 1px solid var(--color-line);}
#gnb-mo .contact li {display: flex; flex-direction: column; gap: 6px;}
#gnb-mo .contact .label {display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-gray);}
#gnb-mo .contact .label i {font-size: 13px; color: var(--color-primary);}
#gnb-mo .contact a {font-weight: 500; font-size: 18px; color: var(--color-ink);}

@media (min-width: 1201px) {
    #gnb-mo, .gnb-dim {display: none;}
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {padding: 0 0 50px; background: #fff;}
.footer .footer-top {display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 30px; border-top: 1px solid var(--color-line);}
.footer .footer-logo {display: block; flex-shrink: 0; line-height: 1;}
.footer .footer-logo img {display: block; height: 26px; width: auto;}
.footer .footer-copyright {font-size: 13px; color: var(--color-gray);}
.footer .footer-about {margin-top: 20px; font-size: 14px; color: var(--color-ink-2);}
.footer .footer-info {display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 10px;}
.footer .footer-info li {display: flex; gap: 8px; font-size: 13px; color: var(--color-gray);}
.footer .footer-info b {font-weight: 500; color: var(--color-ink-2);}

@media (max-width: 768px) {
    .footer .footer-top {flex-direction: column; align-items: flex-start;}
    .footer .footer-info {flex-direction: column;}
}

/* =========================================================
   FLOATING
   ========================================================= */
.floating {position: fixed; right: 26px; bottom: 26px; z-index: 90; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s, visibility .4s, transform .4s;}
.floating.is-show {opacity: 1; visibility: visible; transform: none;}

.floating .go-top {display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-ink); cursor: pointer; box-shadow: 0 10px 24px -8px rgba(10, 31, 92, .45); transition: transform .3s var(--ease), background .3s;}
.floating .go-top i {font-size: 18px; line-height: 1; color: #fff;}
.floating .go-top:hover {background: var(--color-primary); transform: translateY(-3px);}

@media (max-width: 768px) {
    .floating {right: 16px; bottom: 16px;}
    .floating .go-top {width: 52px; height: 52px;}
    .floating .go-top i {font-size: 16px;}
}