/**** =============================
  Base · WebKit · A11y
============================== ****/
:root{scroll-behavior:smooth}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html { -webkit-text-size-adjust: 100% }
html, body { height: 100% }
body { margin: 0; color: var(--color-text); background: var(--color-bg); font: 400 16px/1.6 var(--font-basic); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
*{-webkit-tap-highlight-color:transparent}
img { max-width: 100%; height: auto; vertical-align: middle; image-rendering: auto; transition: transform .3s ease, opacity .3s ease, filter .3s ease }
svg { vertical-align: middle }
iframe { display: block; width: 100%; border: 0; background: transparent }
object { display: block; width: 100%; border: 0; background: transparent }
embed { display: block; width: 100%; border: 0; background: transparent }
a { color: inherit; text-decoration: none; transition: color .25s ease, background-color .25s ease, opacity .25s ease, filter .25s ease }
a:focus { outline: 2px solid var(--color-focus); outline-offset: 2px }
a:focus-visible, button:focus-visible {outline:2px solid var(--color-focus);outline-offset:2px}
button { font: inherit; background: none; border: 0; cursor: pointer }
ul { margin: 0; padding: 0; list-style: none }
ol { margin: 0; padding: 0; list-style: decimal }
h1 { margin: 0; font-family: var(--font-title); line-height: 1.25; letter-spacing: -.02em }
h2 { margin: 0; font-family: var(--font-title); line-height: 1.3; letter-spacing: -.02em }
h3 { margin: 0; font-family: var(--font-title); line-height: 1.35 }
h4 { margin: 0; font-family: var(--font-title) }
h5 { margin: 0; font-family: var(--font-title) }
p { margin: 0 }
.skip-nav { position: fixed; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden }
.skip-nav:focus { left: 16px; top: 16px; width: auto; height: auto; padding: 10px 14px; background: #000; color: #fff; z-index: 9999; border-radius: 6px }
.sound-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }

/**** =============================
  Typography helpers
============================== ****/
.ft-title { font-family: var(--font-title) }
.ft-emphasis { font-family: var(--font-emphasis) }
.fw-300 { font-weight: 300 }
.fw-500 { font-weight: 500 }
.fw-700 { font-weight: 700 }
.fw-800 { font-weight: 800 }
.fw-900 { font-weight: 900 }

/**** =============================
  Layout · Container · Section
============================== ****/
.sec { position: relative; width: 100%; overflow: clip; padding: 72px 0 }
.sec--tight { padding: 40px 0 }
.sec--flush { padding: 0 }
.cont-wrap { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); width: 100% }
.cont {margin-inline: auto;}
.tac {text-align:center;}
.tal {text-align:left;}
.tar {text-align:right;}
.list-item{}
.item{}
.sub-list-item{}
.sub-item{}
.title{font-size:3.2rem; font-weight:600;letter-spacing:-.02em;line-height:1.25}
.desc{font-size:1.8rem; color:var(--color-warm-gray,#707070);line-height:1.55}
.link{display:inline-block}

/**** =============================
  Flex · Grid
============================== ****/
.block { display: block }
.inline { display: inline }
.inline-block { display: inline-block }
.flex { display: flex; flex-wrap: wrap; }
.inline-flex { display: inline-flex }
.grid { display: grid }
.flex-row { flex-direction: row }
.flex-col { flex-direction: column }
.flex-wrap { flex-wrap: wrap }
.flex-nowrap { flex-wrap: nowrap }
.flex-jc {justify-content: center}
.flex-jsb {justify-content: space-between}
.flex-jl {justify-content: left}
.flex-jr {justify-content: right}
.flex-jfs {justify-content: flex-start}
.flex-jfe {justify-content: flex-end}
.flex-ac {align-items: center}
.flex-afs {align-items: flex-start}
.flex-afe {align-items: flex-end}
.flex-ast {align-items: stretch}
.items-start { align-items: flex-start }
.items-center { align-items: center }
.items-end { align-items: flex-end }
.justify-start { justify-content: flex-start }
.justify-center { justify-content: center }
.justify-between { justify-content: space-between }
.justify-end { justify-content: flex-end }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.gap-0 { gap: 0 }
.gap-4 { gap: 4px }
.gap-8 { gap: 8px }
.gap-10 { gap: 10px }
.gap-12 { gap: 12px }
.gap-16 { gap: 16px }
.gap-20 { gap: 20px }
.gap-24 { gap: 24px }
.gap-28 { gap: 28px }
.gap-32 { gap: 32px }
.gap-40 { gap: 40px }
.gap-48 { gap: 48px }

/* 변수 기반 gap 유틸 */
.gap-var { gap: var(--g, 0) var(--gx, var(--g, 0)); }

/* 공통 값 매핑(인라인 없음) */
.gap-var[data-g="8"]{--g:8px}
.gap-var[data-g="12"]{--g:12px}
.gap-var[data-g="16"]{--g:16px}
.gap-var[data-g="20"]{--g:20px}
.gap-var[data-g="24"]{--g:24px}
.gap-var[data-g="32"]{--g:32px}
.gap-var[data-g="40"]{--g:40px}
.gap-var[data-gx="8"]{--gx:8px}
.gap-var[data-gx="12"]{--gx:12px}
.gap-var[data-gx="16"]{--gx:16px}
.gap-var[data-gx="20"]{--gx:20px}
.gap-var[data-gx="24"]{--gx:24px}
.gap-var[data-gx="32"]{--gx:32px}
.gap-var[data-gx="40"]{--gx:40px}

/**** =============================
  Position · Z-Index
============================== ****/
.pos-rel { position: relative }
.pos-abs { position: absolute }
.pos-fix { position: fixed }
.pos-sticky { position: sticky }
.t0 { top: 0 }
.r0 { right: 0 }
.b0 { bottom: 0 }
.l0 { left: 0 }
.abs-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
.z-1 { z-index: 1 }
.z-10 { z-index: 10 }
.z-100 { z-index: 100 }
.z-header { z-index: var(--z-header) }
.z-overlay { z-index: var(--z-overlay) }

/**** =============================
  Visibility · Responsive toggles
============================== ****/
.visible { display: block !important }
.hidden { display: none !important }
.pc-show { display: block }
.mb-show { display: none }
@media (max-width: 1024px) { .pc-show { display: none } }
@media (max-width: 1024px) { .mb-show { display: block } }

/**** =============================
  Spacing – Margin / Padding (0~80)
============================== ****/
.m-0 { margin: 0 }
.m-4 { margin: 4px }
.m-8 { margin: 8px }
.m-12 { margin: 12px }
.m-16 { margin: 16px }
.m-20 { margin: 20px }
.m-24 { margin: 24px }
.m-32 { margin: 32px }
.m-40 { margin: 40px }
.m-48 { margin: 48px }
.m-56 { margin: 56px }
.m-64 { margin: 64px }
.m-72 { margin: 72px }
.m-80 { margin: 80px }
.mt-0 { margin-top: 0 }
.mt-4 { margin-top: 4px }
.mt-8 { margin-top: 8px }
.mt-12 { margin-top: 12px }
.mt-16 { margin-top: 30px }
.mt-20 { margin-top: 20px }
.mt-24 { margin-top: 24px }
.mt-32 { margin-top: 32px }
.mt-36 { margin-top: 36px }
.mt-40 { margin-top: 40px }
.mt-48 { margin-top: 48px }
.mt-56 { margin-top: 56px }
.mt-64 { margin-top: 64px }
.mt-72 { margin-top: 72px }
.mt-80 { margin-top: 80px }
.mb-0 { margin-bottom: 0 }
.mb-4 { margin-bottom: 4px }
.mb-8 { margin-bottom: 8px }
.mb-12 { margin-bottom: 12px }
.mb-16 { margin-bottom: 16px }
.mb-20 { margin-bottom: 20px }
.mb-24 { margin-bottom: 44px }
.mb-32 { margin-bottom: 32px }
.mb-36 { margin-bottom: 36px }
.mb-40 { margin-bottom: 40px }
.mb-48 { margin-bottom: 48px }
.mb-56 { margin-bottom: 56px }
.mb-64 { margin-bottom: 64px }
.mb-72 { margin-bottom: 72px }
.mb-80 { margin-bottom: 80px }
.ml-0 { margin-left: 0 }
.ml-4 { margin-left: 4px }
.ml-8 { margin-left: 8px }
.ml-12 { margin-left: 12px }
.ml-16 { margin-left: 16px }
.ml-20 { margin-left: 20px }
.ml-24 { margin-left: 24px }
.ml-32 { margin-left: 32px }
.ml-36 { margin-left: 36px }
.ml-40 { margin-left: 40px }
.ml-48 { margin-left: 48px }
.ml-56 { margin-left: 56px }
.ml-64 { margin-left: 64px }
.ml-72 { margin-left: 72px }
.ml-80 { margin-left: 80px }
.mr-0 { margin-right: 0 }
.mr-4 { margin-right: 4px }
.mr-8 { margin-right: 8px }
.mr-12 { margin-right: 12px }
.mr-16 { margin-right: 16px }
.mr-20 { margin-right: 20px }
.mr-24 { margin-right: 24px }
.mr-32 { margin-right: 32px }
.mr-36 { margin-right: 36px }
.mr-40 { margin-right: 40px }
.mr-48 { margin-right: 48px }
.mr-56 { margin-right: 56px }
.mr-64 { margin-right: 64px }
.mr-72 { margin-right: 72px }
.mr-80 { margin-right: 80px }
.p-0 { padding: 0 }
.p-4 { padding: 4px }
.p-8 { padding: 8px }
.p-12 { padding: 12px }
.p-16 { padding: 16px }
.p-20 { padding: 20px }
.p-24 { padding: 24px }
.p-32 { padding: 32px }
.p-40 { padding: 40px }
.p-48 { padding: 48px }
.p-56 { padding: 56px }
.p-64 { padding: 64px }
.p-72 { padding: 72px }
.p-80 { padding: 80px }
.pt-0 { padding-top: 0 }
.pt-4 { padding-top: 4px }
.pt-8 { padding-top: 8px }
.pt-12 { padding-top: 12px }
.pt-16 { padding-top: 16px }
.pt-20 { padding-top: 20px }
.pt-24 { padding-top: 24px }
.pt-32 { padding-top: 32px }
.pt-40 { padding-top: 40px }
.pt-48 { padding-top: 48px }
.pt-56 { padding-top: 56px }
.pt-64 { padding-top: 64px }
.pt-72 { padding-top: 72px }
.pt-80 { padding-top: 80px }
.pb-0 { padding-bottom: 0 }
.pb-4 { padding-bottom: 4px }
.pb-8 { padding-bottom: 8px }
.pb-12 { padding-bottom: 12px }
.pb-16 { padding-bottom: 16px }
.pb-20 { padding-bottom: 20px }
.pb-24 { padding-bottom: 24px }
.pb-32 { padding-bottom: 32px }
.pb-40 { padding-bottom: 40px }
.pb-48 { padding-bottom: 48px }
.pb-56 { padding-bottom: 56px }
.pb-64 { padding-bottom: 64px }
.pb-72 { padding-bottom: 72px }
.pb-80 { padding-bottom: 80px }
.pl-0 { padding-left: 0 }
.pl-4 { padding-left: 4px }
.pl-8 { padding-left: 8px }
.pl-12 { padding-left: 12px }
.pl-16 { padding-left: 16px }
.pl-20 { padding-left: 20px }
.pl-24 { padding-left: 24px }
.pl-32 { padding-left: 32px }
.pl-40 { padding-left: 40px }
.pl-48 { padding-left: 48px }
.pl-56 { padding-left: 56px }
.pl-64 { padding-left: 64px }
.pl-72 { padding-left: 72px }
.pl-80 { padding-left: 80px }
.pr-0 { padding-right: 0 }
.pr-4 { padding-right: 4px }
.pr-8 { padding-right: 8px }
.pr-12 { padding-right: 12px }
.pr-16 { padding-right: 16px }
.pr-20 { padding-right: 20px }
.pr-24 { padding-right: 24px }
.pr-32 { padding-right: 32px }
.pr-40 { padding-right: 40px }
.pr-48 { padding-right: 48px }
.pr-56 { padding-right: 56px }
.pr-64 { padding-right: 64px }
.pr-72 { padding-right: 72px }
.pr-80 { padding-right: 80px }

/**** =============================
  Opacity · Filter
============================== ****/
.op-0 { opacity: 0 }
.op-10 { opacity: .1 }
.op-20 { opacity: .2 }
.op-30 { opacity: .3 }
.op-40 { opacity: .4 }
.op-50 { opacity: .5 }
.op-60 { opacity: .6 }
.op-70 { opacity: .7 }
.op-80 { opacity: .8 }
.op-90 { opacity: .9 }
.op-100 { opacity: 1 }
.f-none { filter: none }
.f-grayscale { filter: grayscale(1) }
.f-bright-110 { filter: brightness(1.1) }
.f-contrast-110 { filter: contrast(1.1) }
.f-blur-2 { filter: blur(2px) }

/**** =============================
  Cards · Figure
============================== ****/
.card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm) }
.figure { display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border) }

/**** =============================
  Color Labels
============================== ****/
.color-label { position: relative; display: flex; align-items: center; justify-content: center; font-size: 20px; background: #d0cdca; transition: background-color .3s ease, color .3s ease, opacity .3s ease, filter .3s ease }
.color-label::after { content: ""; position: absolute; top: 50%; left: 50%; width: calc(100% - 16px); height: calc(100% - 16px); transform: translate(-50%, -50%); border: 1px solid #fff }
.color-label.gray { background: #d0cdca }
.color-label.light-green { background: #c3d8c4 }
.color-label.light-blue { background: #9bced0 }
.center-txt-label { display: flex; align-items: center; justify-content: center }

/**** =============================
  Media Wrappers
============================== ****/
.youtube-wrap { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden }
.youtube-wrap.bg-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0 }
.youtube-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100% }
.media-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden }
.media-embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.media-embed > object { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.media-embed > embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.video-wrapper { position: relative; left: 50%; width: 100%; height: 100%; overflow: hidden }
.video-wrapper.type-content { transform: translate(-50%, 0) }
.video-wrapper.type-bg { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; pointer-events: none }
.video-content { width: 100%; height: 100% }

/**** =============================
  Rolling / Line loop
============================== ****/
@keyframes textLoop { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
.line-wrap { display: flex; flex-wrap: nowrap; flex: 0 0 auto; white-space: nowrap; width: auto; overflow: hidden; transition: transform .3s ease, opacity .3s ease, filter .3s ease; z-index: 0 }
.line { display: inline-flex; margin: 0 5px; gap: 10px; flex-wrap: nowrap; width: auto; animation: textLoop 20s linear infinite }
.rolling-wrap { display: flex; flex-wrap: nowrap; flex: 0 0 auto; gap: 40px; white-space: nowrap; width: auto; overflow: hidden; transition: transform .3s ease, opacity .3s ease, filter .3s ease; z-index: 0 }
.rolling { display: inline-flex; gap: 40px; flex-wrap: nowrap; width: auto; animation-name: textLoop; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite }
@media (prefers-reduced-motion: reduce) { .line { animation: none } }
@media (prefers-reduced-motion: reduce) { .rolling { animation: none } }

/**** =============================
  Buttons
============================== ****/
.btn { --btn-h: 48px; display: inline-flex; align-items: center; justify-content: center;  padding: 0 18px; min-height: var(--btn-h); line-height: 1.65; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 700; transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, opacity .3s ease, filter .3s ease }
.btn:focus { outline: 2px solid var(--color-focus); outline-offset: 2px }
.btn--primary { background: var(--primary); color: var(--primary-contrast) }
.btn--primary:hover { background: var(--primary-hover) }
.btn--ghost { background: transparent; border-color: var(--color-border-strong); color: var(--color-text) }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary) }
.btn--link { background: none; border: 0; padding: 0; color: var(--primary); min-height: auto }
.btn--link:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px }
.btn--lg { --btn-h: 56px; padding: 0 22px; font-size: 1.0625rem }
.btn--sm { --btn-h: 40px; padding: 0 14px; font-size: .9375rem }

/**** =============================
  Forms · Inputs
============================== ****/
legend { position: absolute; top: -2000%; left: -2000%; visibility: hidden; width: 0; height: 0; overflow: hidden; z-index: -1 }
input[type="tel"] { padding: 12px 10px; height: 48px; background: #fff; border: 1px solid var(--color-border); border-radius: 6px; font-size: 16px; appearance: none; -webkit-appearance: none; -moz-appearance: none; color: rgba(0,0,0,.5); transition: border-color .3s ease, box-shadow .3s ease, color .3s ease, background-color .3s ease, transform .3s ease, opacity .3s ease, filter .3s ease }
input[type="text"] { padding: 12px 10px; height: 48px; background: #fff; border: 1px solid var(--color-border); border-radius: 6px; font-size: 16px; appearance: none; -webkit-appearance: none; -moz-appearance: none; color: rgba(0,0,0,.5); transition: border-color .3s ease, box-shadow .3s ease, color .3s ease, background-color .3s ease, transform .3s ease, opacity .3s ease, filter .3s ease }
input[type="password"] { padding: 12px 10px; height: 48px; background: #fff; border: 1px solid var(--color-border); border-radius: 6px; font-size: 16px; appearance: none; -webkit-appearance: none; -moz-appearance: none; color: rgba(0,0,0,.5); transition: border-color .3s ease, box-shadow .3s ease, color .3s ease, background-color .3s ease, transform .3s ease, opacity .3s ease, filter .3s ease }
select { padding: 12px 10px; height: 48px; background: #fff; border: 1px solid var(--color-border); border-radius: 6px; font-size: 16px; appearance: none; -webkit-appearance: none; -moz-appearance: none; color: rgba(0,0,0,.5); transition: border-color .3s ease, box-shadow .3s ease, color .3s ease, background-color .3s ease, transform .3s ease, opacity .3s ease, filter .3s ease }
#bo_w .bo_w_select select {padding: 4px 10px;}
.bo_sch select {padding: 4px 10px;}
textarea { padding: 12px 10px; min-height: 120px; background: #fff; border: 1px solid var(--color-border); border-radius: 6px; font-size: 16px; appearance: none; -webkit-appearance: none; -moz-appearance: none; color: rgba(0,0,0,.5); transition: border-color .3s ease, box-shadow .3s ease, color .3s ease, background-color .3s ease, transform .3s ease, opacity .3s ease, filter .3s ease; resize: vertical }
input::placeholder { color: rgba(0,0,0,.5) }
textarea::placeholder { color: rgba(0,0,0,.5) }
select:valid { color: var(--menu-font-color, #000) }
input:hover { border-color: var(--primary); filter: brightness(1.02) }
select:hover { border-color: var(--primary); filter: brightness(1.02) }
textarea:hover { border-color: var(--primary); filter: brightness(1.02) }
input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(196,169,108,.2); outline: 0; background: #fff; color: #111 }
select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(196,169,108,.2); outline: 0; background: #fff; color: #111 }
textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(196,169,108,.2); outline: 0; background: #fff; color: #111 }
.custom-checkbox { position: relative; padding-left: 30px; cursor: pointer; user-select: none }
.custom-checkbox input { position: absolute; opacity: 0; height: 0; width: 0 }
.checkmark { position: absolute; top: 50%; left: 0; width: 24px; height: 24px; transform: translateY(-50%); border: 2px solid #333; border-radius: 50%; transition: border-color .2s ease, background-color .2s ease, opacity .2s ease, filter .2s ease }
.custom-checkbox input:checked ~ .checkmark { border: 2px solid #333 }
.custom-checkbox input:checked ~ .checkmark::after { content: ""; position: absolute; left: 6px; top: 0; width: 8px; height: 14px; border: solid #333; border-width: 0 2px 2px 0; transform: rotate(45deg) }
.custom-checkbox.type-2 { padding-left: 0; width: 24px }
.custom-checkbox.type-2 input:checked ~ .checkmark { border: none }
.custom-checkbox.type-2 .checkmark { background: #fff }
.custom-checkbox.type-2 input:checked ~ .checkmark::after { border: solid var(--primary); border-width: 0 2px 2px 0 }

/**** =============================
  Header · Util bar · GNB
============================== ****/
.site-header{position:sticky;top:0;z-index:var(--z-header);background:#fff;border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px)}
.site-header__row{position: relative; height:8.8rem; max-width: var(--container-lg-max); }
.site-header__brand a{display:inline-flex;align-items:center;transition:opacity .25s ease,filter .25s ease}
.site-header__brand a:hover{opacity:.9}

.util-nav{height:4.6rem; background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.util-nav .cont-wrap {width:100%; max-width: var(--container-lg-max); height: 100%;}
.util-nav__list {height: 100%}
.util-nav__list li {width: 136px; height: 100%; border-left:1px solid var(--color-border);}
.util-nav__list li:last-child {border-right:1px solid var(--color-border);}
.util-nav .btn--link {padding:0 1.8rem; width: 100%; height: 100%; font-weight:normal; font-size:1.2rem; color:var(--color-text-util);}
.util-nav .btn--link.flex-jsb {justify-content: space-between;}

/* Icons (mask) – 경로 맞춰 쓰면 됨 */
.ico{display:inline-block;width:28px;height:28px;background:currentColor}
.ico--user{-webkit-mask:url('<?=G5_THEME_IMG_URL?>/ico/user.svg') no-repeat center/20px;mask:url('<?=G5_THEME_IMG_URL?>/ico/user.svg') no-repeat center/20px}
.ico--hamburger{-webkit-mask:url('<?=G5_THEME_IMG_URL?>/ico/hamburger.svg') no-repeat center/22px;mask:url('<?=G5_THEME_IMG_URL?>/ico/hamburger.svg') no-repeat center/22px}

/* =========================
   GNB (BEM)
   ========================= */
.gnb{position:relative}
.gnb__toggle{display:none}
.gnb__list{display:flex;align-items:center;gap:8.8rem;}
.gnb__item{position:relative; padding:0 1.6rem;}
.gnb__link{min-height:72px;font-weight:500;transition:color .25s ease; width: 100%;}
.gnb__link:hover,.gnb__item:focus-within .gnb__link{color:var(--primary)}
.gnb__ico{margin-left:6px;opacity:.7}

/* 2차 래퍼: absolute + full-bleed 회색 배경 */
.gnb .gnb__depth2-wrap{
    position:absolute;
    left:0;
    top:100%;
    transform: translateY(-10%);
    padding:60px 0 100px;
    height: 0;
    width: 0;
    opacity: 0;

    /* ▼ 뷰포트 좌우로 꽉 차는 회색바(요소 위치와 무관) */
    box-shadow:0 0 0 100vmax #fff;
    clip-path:inset(0 -100vmax);

    /* 상/하 1px 라인 */
    background:#fff;
    transition: all 0.5s;

    overflow: hidden;
    visibility: hidden;
    z-index:1000;
}

/* 열림 조건 */
.gnb .gnb__item:hover > .gnb__depth2-wrap,
.gnb .gnb__item:focus-within > .gnb__depth2-wrap{
    transform: translateY(0%);
    width: auto;
    height: auto;
    opacity: 1;
    overflow: visible;
    visibility: visible;
}

/* 2차 목록(세로) */
.gnb .gnb__depth2{
    display:flex; flex-direction:column; gap:0;
    padding:0 1.6rem;
    width: 100%; max-width: 400px; min-width: 220px;
}
.gnb .gnb__item:nth-child(1) .gnb__depth2 {
    min-width: 320px;
}
.gnb .gnb__item:nth-child(2) .gnb__depth2 {
    min-width: 272px;
}
.gnb .gnb__item .gnb__depth2 .gnb__name__rights_entitlements .gnb__depth3 {
    /*min-width: 280px;*/
}
.gnb .gnb__item {
    position: relative;
}
/* 메뉴가 열려 있을 때, 아래로 투명한 히트존 확장 */
.gnb .gnb__item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;           /* 1차 메뉴 바로 아래부터 시작 */
    height: 200px;       /* 아래로 얼마나 유지할지: 필요하면 200~260px 사이로 조정 */
    pointer-events: none;
    z-index: 900;        /* 2차/3차 메뉴(z-index:1000)보다 살짝 아래 */
}
/* hover / focus 상태일 때만 실제 hover 영역으로 활성화 */
.gnb .gnb__item:hover::after,
.gnb .gnb__item:focus-within::after {
    pointer-events: auto;
}

.gnb .gnb__d2item{position:relative}
.gnb .gnb__d2link{
    display:-webkit-box; padding:1.0rem 0; font-size:1.4rem; font-weight:500; border-radius:8px;
    overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    transition:color .2s ease, background-color .2s ease;
}
.gnb .gnb__d2item:hover .gnb__d2link,
.gnb .gnb__d2item:focus-within>.gnb__d2link{
    color:var(--color-navy,#002d6b);
}

.gnb .gnb__depth3{
    position:relative;
    transform: translateY(-10%);
    padding:0 28px;
    width: 0;
    height: 0;
    background-color:#fff;
    border-radius:13px;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition:margin-top .3s ease, margin-bottom .3s ease, padding .3s ease, height .3s ease, height .3s ease, transform .4s ease;
    z-index:1001;
}
.gnb .gnb__d2item:hover > .gnb__depth3,
.gnb .gnb__d2item:focus-within > .gnb__depth3{transform: translateY(0%); margin-top:6px; margin-bottom:14px; padding:18px 28px; width: 100%; height:auto; background:#f3f3f3;
    opacity: 1; overflow: visible; visibility: visible;}

.gnb .gnb__d3link{
    display:-webkit-box; padding:0.4rem 0; font-size:1.4rem; font-weight:400; color:var(--color-warm-gray);
    overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    border-radius:6px; transition:color .2s ease, background-color .2s ease;
}
.gnb .gnb__d3link:hover,.gnb .gnb__d3link:focus{
    color:var(--primary,#1a56db);
}

/* 모바일: 레이아웃 충돌 방지를 위해 static 전환 */
@media (max-width:1024px){
    .gnb .gnb__depth2-wrap{
        position:static; display:block !important; padding:0;
        box-shadow:none; clip-path:none; background:none;
    }
    .gnb .gnb__depth2{width:auto; padding:0}
    .gnb .gnb__depth3{position:static; margin-top:0; border:0; border-radius:0; box-shadow:none; display:block}
}
/* 접근성 개선 */
.gnb__toggle:focus,
.gnb__link:focus,
.gnb__d2link:focus,
.gnb__d3link:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* =========================
   Mypage dropdown
   ========================= */
.mypage{position:relative}
.mypage__btn{display:inline-flex;align-items:center;gap:8px}
.mypage__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;background:#fff;border:1px solid var(--color-border);border-radius:10px;box-shadow:var(--shadow-sm);padding:6px 0;z-index:var(--z-overlay,1000);}
.mypage__menu[hidden]{display:none}
.mypage__menu a{display:block;padding:8px 12px}
.mypage__menu a:hover,.mypage__menu a:focus{background:var(--primary-soft);color:var(--primary)}
/* 포커스 접근성 – JS 없이도 열릴 수 있도록 */
.mypage:focus-within .mypage__menu{display:block}
.js-gnb-all { position: relative; padding: 15px 10px; border: none; background-color: transparent; cursor: pointer; float: right; }
.hamburger-icon { position: relative; display: block; width: 24px; height: 3px; background-color: #333; margin-left: 12px; transition: all 0.3s ease-in-out; }
.hamburger-icon::before, .hamburger-icon::after { content: ''; position: absolute; height: 3px; background-color: #333; right: 0; transition: all 0.3s ease-in-out; }
.hamburger-icon::before { width: 36px; top: -10px; }
.hamburger-icon::after { width: 36px; bottom: -10px; }
.js-gnb-all.is-active .hamburger-icon { background-color: transparent; }
.js-gnb-all.is-active .hamburger-icon::before { top: 0; transform: rotate(45deg); }
.js-gnb-all.is-active .hamburger-icon::after { bottom: 0; transform: rotate(-45deg); }

/* =========================
   GNB All (full overlay)
   ========================= */
.gnb-all[hidden]{display:none!important}
.gnb-all{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    width: 100vw;
    max-width: 2560px;
    background: rgba(255, 255, 255, 0.99);
    box-shadow:var(--shadow-md);
    z-index:var(--z-gnb,700);
}
.gnb-all .cont-wrap {max-width: var(--container-sub-max); overflow: auto}
.gnb-all__list{
    gap:1.2rem;
    max-height:min(70vh,720px);
    padding:84px 24px;
    position:relative;
    margin:0 auto;         /* 가로 중앙정렬 */
}
.gnb-all__quick-list {display: none;}
.gnb-all a:hover {text-decoration: underline; text-underline-offset: 4px;}
.gnb-all__item{padding:8px 0; width: calc(100% / 4 - 1.2rem * 3 / 4)}
.gnb-all__link{display:inline-flex;align-items:center;font-weight:800;padding:8px 6px}
.gnb-all__depth2{gap:1.6rem; padding:8px 0 0 8px}
.gnb-all__depth2 .sub-item {padding:0.4rem 0; width: 100%; transition: color 0.2s;}
.gnb-all__depth2 .sub-item a {transition: color 0.2s;}
.gnb-all__depth2 .sub-item:hover > a {color:var(--color-navy); font-weight: 400; text-decoration: unset;}
.gnb-all__depth2 .sub-list-item {padding:4px 0 0 8px; font-size: 1.4rem; font-weight: 300; color: var(--color-warm-gray);}
.gnb-all__close{position:absolute;top:24px;right:24px}
#gnb_all_bg,
.gnb-all__bg{display:none!important}

/* =========================
   Focus / A11y
   ========================= */
.gnb__link:focus-visible,
.gnb__d2link:focus-visible,
.gnb__d3link:focus-visible,
.gnb-all__link:focus-visible,
.gnb-all__close:focus-visible,
.mypage__btn:focus-visible,
.mypage__menu a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

/* =========================
   Dialog · Search
   ========================= */
.site-search{border:none;border-radius:16px;padding:0;width:min(640px,92vw)}
.search-form{padding:20px;background:#fff;border:1px solid var(--color-border);border-radius:16px}
.search-input{width:100%;height:44px;padding:0 12px;border:1px solid var(--color-border);border-radius:12px;margin-bottom:12px;transition:border-color .25s ease,box-shadow .25s ease}
.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(196,169,108,.2);outline:0}
.search-actions{display:flex;gap:8px;justify-content:flex-end}

/* =========================
   Shape
   ========================= */
.check-shape{
    display: inline-flex;
    margin-bottom:4px;
    width: 12px;
    height: 18px;
    box-sizing: border-box;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    border-radius: 2px;
    transform: rotate(45deg);
    vertical-align: middle;
}


/* =========================
   Motion Prefs
   ========================= */
@media (prefers-reduced-motion:reduce){
    .gnb__link,.gnb__d2link,.gnb__d3link,.mypage__menu a{transition:none}
}


/**** =============================
  Footer
============================== ****/
.site-footer{background:#262626; margin-top: 100px;}
.site-footer a{}
.site-footer a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

/* 상단 바 */
.footer__bar{padding:2.8rem 0; border-bottom:1px solid var(--color-warm-gray);}
.footer__bar .cont-wrap{max-width: var(--container-lg-max);}
.ft-link{position:relative;font-size:1.1rem; opacity: 0.7;}
.footer__policy li:not(:last-child) .ft-link::after{content:'';display:block;position: absolute;top:50%;right:-0.8rem;transform: translateY(-40%); width: 1px;height: 1.2rem; background: rgba(255, 255, 255, 0.7);}
.ft-link:hover{opacity: 1;text-decoration:underline;text-underline-offset:3px}

/* SNS – 이미지 없이 빈 앵커(접근성 라벨만) */
.item-sns {margin:0 0 0 40.0rem;}
.ft-sns{}
.ft-sns:hover{border-color:#fff}
.footer__sns li:last-child .ft-link {padding:0 0 0 1.2rem;}

/* 메인 레이아웃 */
.footer__main{padding-top:6.0rem; padding-bottom:7.2rem; max-width: var(--container-lg-max);}
.footer__brand img {}
.footer__partner {
    position: absolute;
    bottom:0;
    transform: translateX(320%) translateY(272%);
}
.footer__partner img{}
.footer__info{padding:0 10.0rem 0 7.0rem; line-height:1.8; font-size:1.1rem;}
.footer__info .addr{}
.footer__info .copy{}
@media (max-width:768px){.footer__bottom{flex-direction:column;gap:8px}}

/**** =============================
  Table System
============================== ****/
.table-wrap{position:relative;width:100%}
.table-wrap--scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap--scroll::-webkit-scrollbar{height:10px}
.table-wrap--scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:10px}
.table-caption{margin-bottom:8px;font-weight:700}
.table-note{margin-top:8px;color:var(--color-text-weak);font-size:.875rem}

.table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}
.table thead{background:var(--color-bg-soft)}
.table tfoot{background:var(--color-bg-soft)}
.table th{position:sticky;top:0;padding:12px 14px;text-align:left;border:1px solid var(--color-border);font-weight:700;white-space:nowrap}
.table td{padding:12px 14px;border:1px solid var(--color-border);vertical-align:middle}
.table tr{transition:background-color .2s ease}
.table tbody tr:hover{background:rgba(0,0,0,.02)}
.table--center td{text-align:center}
.table--center th{text-align:center}
.table--compact th{padding:8px 10px}
.table--compact td{padding:8px 10px}
.table--zebra tbody tr:nth-child(odd){background:rgba(0,0,0,.015)}
.table a:focus{outline:2px solid var(--color-focus);outline-offset:2px}

@media (max-width:640px){.table--stack thead{display:none}}
@media (max-width:640px){.table--stack tbody tr{display:grid;grid-template-columns:1fr;border:1px solid var(--color-border);margin-bottom:12px}}
@media (max-width:640px){.table--stack tbody td{display:grid;grid-template-columns:120px 1fr;gap:8px;border:0;border-top:1px solid var(--color-border)}}
@media (max-width:640px){.table--stack tbody td:first-child{border-top:0}}
@media (max-width:640px){.table--stack tbody td::before{content:attr(data-th);font-weight:700;color:var(--color-text)}}

/**** =============================
  A11y · Motion · WebKit
============================== ****/
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.gnb__link{transition:none}.gnb__d2link{transition:none}.gnb__d3link{transition:none}.ft-link{transition:none}.site-header__brand a{transition:none}.search-input{transition:none}}

/**** =============================
  Circular Arrow Buttons (black/white/blue)
============================== ****/
/* 사용: <button class="arrow arrow--right arrow--black"></button> */
.arrow { --size: 44px; --bg: #000; --fg: #fff; width: var(--size); height: var(--size); border-radius: 50%; background: var(--bg); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; transition: transform .25s ease, background-color .25s ease, color .25s ease, opacity .25s ease, filter .25s ease }
.arrow:hover {transform: scale(1.15);}
.arrow::before { content: ""; width: 8px; height: 8px; border: solid var(--fg); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .25s ease; }
.arrow--left::before { transform: rotate(135deg) }
.arrow--up::before { transform: rotate(-45deg) }
.arrow--down::before { transform: rotate(135deg) }
.arrow--sm { --size: 36px }
.arrow--lg { --size: 56px }
.arrow--black { --bg: #000; --fg: #fff }
.arrow--white { --bg: #fff; --fg: #000; border: 1px solid #000 }
.arrow--blue { --bg: #5aa6d5; --fg: #fff }
.arrow:hover { filter: brightness(1.08) }
.arrow:disabled { opacity: .45; cursor: not-allowed }

/**** =============================
  BBS Common Custom
============================== ****/
main #bo_v_share .btn {display: inline-flex; align-items: center; font-size: 1.4rem;}
main #bo_v_info .profile_info .profile_info_ct {line-height: 1.45;}

/**** =============================
  Motion Prefs
============================== ****/
@media (hover: none) { a { transition: none } }
@media (hover: none) { img { transition: none } }
@media (hover: none) { .btn { transition: none } }
@media (hover: none) { .arrow { transition: none } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important } }


/* =========================================
   Responsive breakpoints
   1280 / 1024 / 768 / 480
   ========================================= */

/* <= 1480 */
@media (max-width:1480px) {

}

/* <= 1280 */
@media (max-width:1280px){
    .gnb__list {
        gap:4.0rem;
    }
}

/* <= 1080 */
@media (max-width:1080px) {
    .gnb__list {
        gap:3.0rem;
    }
    .footer__info {
        padding:0 6.0rem 0 4.0rem;
    }
    .footer__partner {
        transform:translateX(300%) translateY(272%);
    }
}

/* <= 1024 */
@media (max-width:1024px){
    .gap-0 { gap: 0 }
    .gap-4 { gap: calc(var(--mb-vw) * 4) }
    .gap-8 { gap: calc(var(--mb-vw) * 8) }
    .gap-10 { gap: calc(var(--mb-vw) * 10) }
    .gap-12 { gap: calc(var(--mb-vw) * 12) }
    .gap-16 { gap: calc(var(--mb-vw) * 16) }
    .gap-20 { gap: calc(var(--mb-vw) * 20) }
    .gap-24 { gap: calc(var(--mb-vw) * 24) }
    .gap-28 { gap: calc(var(--mb-vw) * 28) }
    .gap-32 { gap: calc(var(--mb-vw) * 32) }
    .gap-40 { gap: calc(var(--mb-vw) * 40) }
    .gap-48 { gap: calc(var(--mb-vw) * 48) }

    .util-nav {
        display: none
    }
    .hd-ctrl {
    }
    .item-mypage {
        display: none;
    }
    .gnb {
        display: none;
    }
    .gnb__list {
        display: none
    }
    .gnb-all__list {
        padding:0;
        max-height: auto;
    }
    .js-gnb-all {
        display: inline-block
    }
    .gnb-all__quick {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: calc(var(--mb-vw) * 12) 0;
    }
    .gnb-all__quick-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(var(--mb-vw) * 8) calc(var(--mb-vw) * 12);
    }
    .gnb-all__list {
    }
    .gnb-all__item {
        width: 100%;
    }
    .gnb-all__quick-list .item a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        line-height: 1.2
    }
    .gnb-all__quick-list .item a:focus-visible {
        outline: 2px solid var(--color-focus);
        outline-offset: 2px
    }

    .site-header__row {
        height: calc(var(--mb-vw) * 97);
    }
    .site-header__brand img {
        width: calc(var(--mb-vw) * 180);
    }
    .hamburger-icon { width: calc(var(--mb-vw) * 20); height: calc(var(--mb-vw) * 2); margin-left: calc(var(--mb-vw) * 12); }
    .hamburger-icon::before, .hamburger-icon::after { height: calc(var(--mb-vw) * 2) }
    .hamburger-icon::before { width: calc(var(--mb-vw) * 32); top: calc(var(--mb-vw) * 10 * -1); }
    .hamburger-icon::after { width:calc(var(--mb-vw) * 32); bottom: calc(var(--mb-vw) * 10 * -1); }
    .gnb-all {
        height: calc(100dvh - (var(--mb-vw) * 97));
    }
    .footer__bar {
        padding: calc(var(--mb-vw) * 30) 0 calc(var(--mb-vw) * 48) 0;
    }
    .footer__bar .cont-wrap {
        flex-direction: column;
        gap:calc(var(--mb-vw) * 18);
    }
    .footer__bar .cont-wrap nav {
        width: 100%;
    }
    .item-sns {
        margin:0;
        width: 100%;
    }
    .footer__sns {
        justify-content: flex-start;
        margin:calc(var(--mb-vw) * 6) auto 0;
        width: 100%;
    }
    .ft-link {
        font-size: calc(var(--mb-vw) * 11);
    }
    .footer__partner {
        position: relative;
        top:unset;
        bottom:unset;
        transform: translate(0,0);
        width:100%;
        text-align: left;
    }
    .footer__partner img {
        width: calc(var(--mb-vw) * 204);
    }
    .footer__main {
        flex-direction: column;
        gap:calc(var(--mb-vw) * 21);
        padding-top:calc(var(--mb-vw) * 47);
        padding-bottom:calc(var(--mb-vw) * 48);
    }
    .footer__brand {
        width: 100%;
        text-align: left;
    }
    .footer__brand img {
        width: calc(var(--mb-vw) * 192);
    }
    .footer__info {
        padding:0;
        font-size:calc(var(--mb-vw) * 11);
        width: 100%;
    }

    .check-shape {
        margin-bottom: calc(var(--mb-vw) * 4);
        width: calc(var(--mb-vw) * 12);
        height: calc(var(--mb-vw) * 18);
        border-right: calc(var(--mb-vw) * 3) solid currentColor;
        border-bottom: calc(var(--mb-vw) * 3) solid currentColor;
        border-radius: calc(var(--mb-vw) * 2);
    }
}

/* <= 768 */
@media (max-width:768px){

}

/* <= 480 */
@media (max-width:480px) {

}