
.gi-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gi-required-note{margin:0 0 22px;color:#A5AEBE;font-size:13px;line-height:1.6}
.req{color:#4D8DFF;font-weight:800}
.choice{margin-left:6px;color:#A5AEBE;font-size:12px;font-weight:500;letter-spacing:0}
.fld-err{min-height:1.4em;margin-top:6px;color:#FFB4A8;font-size:13px;line-height:1.4}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:#FF9A8B}
.gi-consent{position:relative;margin:4px 0 24px;padding:18px 18px 18px 48px;border:1px solid var(--border-dark);color:#A5AEBE}
.gi-consent>input{position:absolute;left:18px;top:20px;width:18px;height:18px;accent-color:#4D8DFF}
.gi-consent>label{display:block;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.gi-consent>p:not(.fld-err){margin-top:8px;font-size:12.5px;line-height:1.65;color:#A5AEBE}
.gi-consent>a{display:inline-block;margin-top:8px;color:#4D8DFF;font-size:12.5px;font-weight:600;text-decoration:none}
.gi-consent[aria-invalid="true"]{border-color:#FF9A8B}
#giSend{border:0;width:100%;cursor:pointer;font-family:inherit}
#giSend[disabled]{opacity:.55;cursor:default}
.gi-msg{margin-top:16px;font-size:15px;line-height:1.6;min-height:1.6em;word-break:keep-all}
.gi-msg.ok{color:#4D8DFF;font-weight:600}
.gi-msg.err{color:#FFB4A8;font-weight:600}

/* ── 운영 매체 ── */
.mediasec .mnote{margin-top:28px;font-size:15px;line-height:1.7;color:var(--slate-light);
  max-width:58ch;word-break:keep-all}
.dark .mediasec .mnote{color:var(--slate-dark)}
.mediasec .mnote b{color:var(--ink);font-weight:700}
.dark .mediasec .mnote b{color:#fff}
.mgrid{margin-top:48px;display:grid;grid-template-columns:repeat(8,1fr);
  gap:1px;background:var(--divider);border:1px solid var(--divider)}
.dark .mgrid{background:var(--border-dark);border-color:var(--border-dark)}
.mgrid .m{background:var(--cream);padding:30px 12px 22px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;min-height:124px}
.dark .mgrid .m{background:var(--navy)}
.mgrid .mk{height:36px;display:flex;align-items:center;justify-content:center}
.mgrid svg{display:block;fill:var(--ink);
  transition:fill .3s ease,transform .35s cubic-bezier(.16,.84,.44,1)}
.dark .mgrid svg{fill:#fff}
.mgrid .wm{font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink);
  transition:color .3s ease,transform .35s cubic-bezier(.16,.84,.44,1)}
.dark .mgrid .wm{color:#fff}
.mgrid .mn{font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--slate-light)}
.dark .mgrid .mn{color:var(--slate-dark)}
.mgrid .m:hover svg{fill:var(--mint-800);transform:translateY(-2px)}
.dark .mgrid .m:hover svg{fill:var(--mint)}
.mgrid .m:hover .wm{color:var(--mint-800);transform:translateY(-2px)}
.dark .mgrid .m:hover .wm{color:var(--mint)}
.mdisc{margin-top:22px;font-size:12.5px;line-height:1.65;color:var(--muted-light);
  max-width:74ch;word-break:keep-all}
.dark .mdisc{color:var(--slate-dark);opacity:.75}
.mgrid .m--more .wm{font-size:20px;font-weight:700;color:var(--slate-light)}
.dark .mgrid .m--more .wm{color:var(--slate-dark)}
.mgrid .m--more:hover .wm{color:var(--mint-800);transform:none}
.dark .mgrid .m--more:hover .wm{color:var(--mint)}
@media (max-width:900px){
  .mgrid{grid-template-columns:repeat(4,1fr)}
  .mgrid .m{min-height:108px;padding:24px 8px 18px;gap:11px}
}
@media (max-width:520px){
  .mgrid{grid-template-columns:repeat(2,1fr);margin-top:32px}
  .mgrid .mk{height:32px}
  .mgrid svg{transform:scale(.9)}
  .mgrid .wm{font-size:23px}
}

/* ── 메뉴 전환: 1024px 이하는 햄버거 ── */
@media (min-width:641px) and (max-width:1024px){
  .gnb-in{gap:14px}
  .gnb-toggle{display:block;-webkit-appearance:none;appearance:none;order:-1;
    width:34px;height:34px;margin:0;border:1px solid var(--border-dark);background:none;
    cursor:pointer;position:relative;flex:none}
  .gnb-toggle::before,.gnb-toggle::after{content:"";position:absolute;left:9px;right:9px;
    height:1.5px;background:#fff;transition:transform .25s ease,top .25s ease}
  .gnb-toggle::before{top:12px}
  .gnb-toggle::after{top:19px}
  .gnb-toggle:checked::before{top:15.5px;transform:rotate(45deg)}
  .gnb-toggle:checked::after{top:15.5px;transform:rotate(-45deg)}

  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--navy-alt);border-bottom:1px solid var(--border-dark);
    max-height:0;overflow:hidden;transition:max-height .28s ease;margin-left:0;z-index:40}
  .gnb-toggle:checked ~ .nav{max-height:calc(100dvh - 76px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:16px}
  .nav>li>a{padding:16px 20px;border-bottom:1px solid var(--border-dark);position:relative}
  .nav>li.on>a::after{display:none}

  /* 서브메뉴는 화살표로 펼칩니다 (좁은 화면 규칙과 동일) */
  .nav>li>.sub{display:block;overflow:hidden;max-height:0;
    transition:max-height .32s cubic-bezier(.16,.84,.44,1);
    position:static;opacity:1;visibility:visible;transform:none;
    background:var(--navy);border:0;box-shadow:none;min-width:0;padding:0}
  .nav>li.gi-open>.sub{max-height:560px}
  .nav>li>a .caret{position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:52px;height:52px;display:flex;align-items:center;justify-content:center;
    font-size:15px;transition:transform .3s ease;margin:0}
  .nav>li.gi-open>a .caret{transform:translateY(-50%) rotate(180deg)}
  .sub a{padding:13px 20px 13px 34px;border-bottom:1px solid var(--border-dark)}

  .gnb .cta{margin-left:auto;padding:11px 18px;font-size:14px}
  .langsw{order:3;margin:0 10px 0 auto;display:inline-flex}
  .langsw span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .gnb .cta{margin-left:8px}
}

/* ── 상단 메뉴 크기 조절 ── */
@media (min-width:1181px){
  .gnb-in{gap:28px}
  .nav{gap:0}
  .nav > li > a{font-size:15.5px;padding-left:15px;padding-right:15px}
  .nav .caret{margin-left:5px}
  .nav .ext{font-size:11.5px;margin-left:4px}
  .gnb .cta{font-size:14px;padding:12px 20px;margin-left:10px}
  .gnb .logo svg{height:24px}
}
@media (min-width:1025px) and (max-width:1180px){
  .gnb-in{gap:20px}
  .nav{gap:0}
  .nav > li > a{font-size:15px;padding-left:13px;padding-right:13px}
  .nav .caret{font-size:9.5px;margin-left:4px}
  .nav .ext{font-size:11px;margin-left:4px}
  .gnb .cta{font-size:13.5px;padding:11px 17px;margin-left:8px}
  .gnb .logo svg{height:22px}
}

/* gi-menu */
/* ── 모바일 메뉴: 서브메뉴 접기 ── */
@media (max-width:1024px){
  /* 메뉴가 화면보다 길어지면 스크롤 — 마지막 항목이 잘리지 않게 */
  .gnb-toggle:checked ~ .nav{
    max-height:calc(100dvh - 62px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;padding-bottom:16px}

  /* 하위 항목은 기본으로 접습니다 */
  .nav > li > .sub{
    display:block;overflow:hidden;max-height:0;
    transition:max-height .32s cubic-bezier(.16,.84,.44,1)}
  .nav > li.gi-open > .sub{max-height:560px}

  /* 화살표를 손가락으로 누를 수 있는 크기로 키웁니다 */
  .nav > li > a{position:relative}
  .nav > li > a .caret{
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:52px;height:52px;display:flex;align-items:center;justify-content:center;
    font-size:15px;transition:transform .3s ease;margin:0}
  .nav > li.gi-open > a .caret{transform:translateY(-50%) rotate(180deg)}
}
@media (prefers-reduced-motion:reduce){
  .nav > li > .sub{transition:none}
}

/* 함께한 브랜드 — 레퍼런스 로고 월 (2026-09-04) */
#brands .brandwall{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
#brands .brandwall li{display:flex;align-items:center;justify-content:center;min-height:112px;padding:20px 22px;
  border-radius:16px;background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);
  box-shadow:0 0 0 1px rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35),
    0 24px 48px -24px rgba(16,20,28,.32),0 8px 20px -14px rgba(77,141,255,.25)}
#brands .brandwall img{display:block;width:auto;max-width:100%;opacity:.72}
@media (hover:hover){#brands .brandwall li:hover img{opacity:1}}
#brands .bw-note{margin-top:28px;max-width:78ch;font-size:13px;line-height:1.7;color:#57606E}
@media (max-width:1024px){#brands .brandwall{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
  #brands .brandwall li{min-height:100px;padding:18px}}
@media (max-width:640px){#brands .brandwall{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
  #brands .brandwall li{min-height:88px;padding:16px}
  #brands .brandwall img{transform:scale(.86)}}

/* gi-phone — 전화번호 상시 노출 (2026-09-08) */
.gnb .gnb-tel{margin-left:auto;margin-right:2px;font-size:13.5px;font-weight:700;letter-spacing:.01em;
  color:#3F4757;text-decoration:none;white-space:nowrap;padding:8px 10px;border-radius:999px}
.gnb .gnb-tel:hover{color:var(--mint-800,#12459E);background:rgba(255,255,255,.55)}
.gnb .gnb-tel + .cta{margin-left:6px}
.gi-phonebar{display:none}
@media (max-width:1024px){
  .gnb .gnb-tel{display:none}
  .gi-phonebar{position:fixed;left:0;right:0;bottom:0;z-index:290;display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
    box-shadow:0 -1px 0 rgba(255,255,255,.7),0 -8px 24px -16px rgba(16,20,28,.25)}
  .gi-phonebar a{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border-radius:999px;
    font-size:14px;font-weight:700;text-decoration:none;color:#10141C;
    background:rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(16,20,28,.14),inset 0 1px 0 rgba(255,255,255,.9)}
  .gi-phonebar a.pri{color:var(--mint-800,#12459E);background:rgba(255,255,255,.62);
    box-shadow:0 0 0 1px rgba(77,141,255,.55),inset 0 1px 0 rgba(255,255,255,.9)}
  body{padding-bottom:72px}
  .gc-l{bottom:84px!important}
}
