/* =====================================================
   1. RESET
===================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%;background:#E4E4E4}
img[alt]:not([alt=""]){font-size:13px;color:#888}

/* =====================================================
   2. TOKENS
===================================================== */
:root{
  --font-sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
              system-ui,'Malgun Gothic',sans-serif;

  /* type scale */
  --fs-hero:44px; --fs-h1:32px; --fs-h2:24px; --fs-h3:20px;
  --fs-lead:16px; --fs-nav:15px; --fs-body:14px; --fs-cap:13px;
  --lh-tight:1.2; --lh-heading:1.4; --lh-body:1.7; --lh-loose:1.9;
  --fw-regular:400; --fw-medium:500; --fw-bold:700;
  --ls-tight:-.02em; --ls-normal:0; --ls-wide:.04em;

  /* color â brand */
  --accent:#00FE00;          /* dark bg */
  --accent-dark:#00CB00;     /* white bg */
  --accent-on-tint:#007A00;  /* #D8EEFD bg */
  --accent-hover:#00D800;

  /* color â surface */
  --page-bg:#FDFDFD;
  --surface-1:#FFFFFF;
  --surface-2:#D8EEFD;
  --surface-3:#D8EEFD;
  --surface-dark:#1A1A1A;
  --surface-hero:#0F0F0F;
  --hdr-hover:#F7F7F7;
  --gray-50:#F6F6F6;

  /* color â text */
  --ink:#1A1A1A;
  --nav:#222222;
  --text-2:#555555;
  --muted:#808080;
  --muted-on-tint:#6B6B6B;
  --muted-head:#7D7D7D;      /* P20¡¤P40¡¤P41 page-head subÀü¿ë ½Ç¸ñ°ª */
  --on-dark:#FFFFFF;
  --on-dark-2:#DDDDDD;
  --on-dark-3:#B4B4B4;

  /* color â line / state */
  --border:#DFDFDF;
  --border-2:#E2E2E2;
  --focus:#00CB00;
  --disabled-opacity:.4;

  /* spacing (4px scale) */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;  --sp-5:20px;
  --sp-6:24px;  --sp-8:32px;  --sp-9:36px;  --sp-10:40px; --sp-12:48px;
  --sp-15:60px; --sp-16:64px; --sp-20:80px; --sp-22:88px; --sp-24:96px;
  --sp-25:100px;--sp-30:120px;--sp-40:160px;--sp-42:168px;

  /* animation */
  --dur-fast:200ms; --dur-base:300ms; --dur-slow:400ms; --dur-reveal:700ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);

  /* layout */
  --container:1400px;
  --gutter:40px;
  --header-h:96px;    /* 170px에서 로고를 2.5배 줄이면서 다시 96px로 축소 */

  /* z-index */
  --z-menu:120; --z-float:110; --z-header:100;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* =====================================================
   3. BASE
===================================================== */
html{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--page-bg);
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}
body{overflow-x:hidden}
section[id]{scroll-margin-top:var(--header-h)}

h1,h2,h3,h4{font-weight:var(--fw-bold);line-height:var(--lh-heading)}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px}


/* =====================================================
   4. LAYOUT
===================================================== */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-5)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);
        column-gap:var(--gutter);row-gap:var(--sp-15)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
@media (max-width:1023px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:767px){ .grid-4{grid-template-columns:1fr} }

/* placeholder box */
.ph{width:100%;height:100%;background:#D8D8D8;color:#666;font-size:12px;line-height:1.5;
    display:flex;align-items:center;justify-content:center;text-align:center;padding:8px}

/* icon */
.icon{width:24px;height:24px;flex:none;display:inline-block}
.icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;
          stroke-linecap:round;stroke-linejoin:round}

/* =====================================================
   5. COMPONENTS
===================================================== */

/* ---- Button (line / fill) ---- */
.btn{display:inline-grid;place-items:center;font-weight:var(--fw-bold);font-size:var(--fs-cap);
     transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
     min-height:44px;padding:0 var(--sp-6)}
.btn--line{border:1px solid var(--accent-dark);color:var(--accent-dark);background:transparent}
.btn--line:hover{background:var(--accent-dark);color:#fff}
.btn--fill{background:var(--ink);color:var(--accent)}
.btn--fill:hover{background:#000}
@media (hover:none){
  .btn--line:hover{background:transparent;color:var(--accent-dark)}
}

/* ---- SectionHead / PageHead (P20¡¤P40¡¤P41 °ø¿ë) ---- */
.page-head{text-align:center}
.page-head h2{font-size:var(--fs-h1);color:var(--ink)}
.page-head p{margin-top:27px;font-size:var(--fs-body);font-weight:var(--fw-regular);
             color:var(--muted-head);line-height:1.85}
.section--tint .page-head p{color:var(--muted-on-tint)}

/* ---- Empty state ---- */
.empty{display:grid;place-items:center;min-height:400px;text-align:center;gap:var(--sp-8)}
.empty__icon{width:80px;height:80px;color:#D0D0D0}
.empty p{font-size:15px;color:var(--muted)}
.section--tint .empty p{color:var(--muted-on-tint)}

/* ---- tint section helper ---- */
.section--tint{background:var(--surface-2)}
.section--tint .label{color:var(--accent-on-tint)}
.section--tint .muted{color:var(--muted-on-tint)}

/* =====================================================
   6. HEADER (parts/header.html)
===================================================== */
.gnb{position:fixed;inset:0 0 auto;height:var(--header-h);z-index:var(--z-header);
     transition:background var(--dur-base) var(--ease-out)}
.gnb .container{display:flex;align-items:center;height:100%}
.gnb__logo img{height:70px;display:block}
.gnb__logo a{font-size:45px;font-weight:var(--fw-bold);letter-spacing:.01em}
.gnb__nav{display:flex;gap:var(--sp-10);margin-left:auto;
          font-size:var(--fs-nav);font-weight:var(--fw-medium)}
.gnb__item{position:relative;height:100%;display:flex;align-items:center}
.gnb__item > a{padding:var(--sp-2) 0}
.gnb__cta{margin-left:var(--sp-10);width:110px;height:32px;min-height:0;padding:0;
          background:var(--accent);color:#000;border-radius:2px}
body[data-header="overlay"] .gnb__cta{background:var(--accent)}
body[data-header="solid"] .gnb__cta{background:var(--accent-dark);color:#000}
.gnb__cta:hover{background:var(--accent-hover)}
.gnb__menu{display:none;width:24px;height:18px;margin-left:var(--sp-6);
           flex-direction:column;justify-content:space-between}
.gnb__menu span{display:block;height:2px;background:currentColor;
                 transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.gnb__menu.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.gnb__menu.is-open span:nth-child(2){opacity:0}
.gnb__menu.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* --- B variant : solid â body[data-header="solid"] °¡ header.html ÀÚü¸¦ °¨½Ñ °ÍÀ» ´ëüÇÔ (include·Î ¼Ó¼º À¯½Ç ¹æÁö) --- */
body[data-header="solid"] .gnb{background:var(--page-bg);border-bottom:1px solid var(--border);color:var(--nav)}
body[data-header="solid"] .gnb__nav a,body[data-header="solid"] .gnb__logo{color:var(--nav)}
body[data-header="solid"] .gnb__menu{color:var(--nav)}

/* --- A variant : overlay + hover reversal --- */
body[data-header="overlay"] .gnb{background:transparent;color:#fff}
body[data-header="overlay"] .gnb__nav a,body[data-header="overlay"] .gnb__logo{color:#fff;
          transition:color var(--dur-base) var(--ease-out)}
body[data-header="overlay"] .gnb__menu{color:#fff}
body[data-header="overlay"] .gnb.is-scrolled{background:rgba(0,0,0,.40)}
body[data-header="overlay"] .gnb:hover,
body[data-header="overlay"] .gnb.is-scrolled:hover{background:var(--hdr-hover)}
body[data-header="overlay"] .gnb:hover .gnb__nav a,
body[data-header="overlay"] .gnb:hover .gnb__logo,
body[data-header="overlay"] .gnb:hover .gnb__menu{color:var(--nav)}

/* --- active nav item --- */
body[data-page="about"]   .gnb [data-nav="about"],
body[data-page="event"]   .gnb [data-nav="event"],
body[data-page="product"] .gnb [data-nav="product"],
body[data-page="support"] .gnb [data-nav="support"]{
  font-weight:var(--fw-bold);
}
body[data-header="solid"] [data-nav].is-active{color:var(--accent-dark)}
body[data-header="overlay"] .gnb:hover [data-nav].is-active{color:var(--accent-dark)}
body[data-header="overlay"] [data-nav].is-active{color:var(--accent)}

/* --- dropdown --- */
.drop{position:absolute;left:0;top:100%;width:180px;
      background:var(--hdr-hover);padding:var(--sp-4) 0;
      display:none;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.gnb__item--has-sub:hover .drop,
.gnb__item--has-sub:focus-within .drop{display:block}
.drop a{display:block;height:40px;line-height:40px;padding:0 var(--sp-5);
        font-size:var(--fs-body);color:var(--nav);
        transition:color var(--dur-fast) var(--ease-out)}
.drop a:hover,.drop a[aria-current="page"]{color:var(--accent-dark);font-weight:var(--fw-bold)}

@media (max-width:1023px){
  .gnb{height:58px}    /* 기존 48px 에서 20% 확대 */
  .gnb__logo a{font-size:25px}   /* 데스크톱 45px 를 그대로 쓰면 58px 바 안에서 줄바꿈되며 잘린다(실측 확인) */
  .gnb__nav{display:none}
  .gnb__cta{display:none}
  .gnb__menu{display:flex}
  .drop{display:none !important}
}
@media (hover:none){
  body[data-header="overlay"] .gnb:hover{background:transparent}
  body[data-header="overlay"] .gnb.is-scrolled:hover{background:rgba(0,0,0,.40)}
  body[data-header="overlay"] .gnb:hover .gnb__nav a,
  body[data-header="overlay"] .gnb:hover .gnb__logo,
  body[data-header="overlay"] .gnb:hover .gnb__menu{color:#fff}
  .gnb__item--has-sub:hover .drop{display:none}
}

/* --- mobile fullscreen overlay menu --- */
.gnb__overlay{position:fixed;inset:0;background:var(--surface-dark);z-index:var(--z-menu);
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(var(--header-h) + 8px) var(--sp-6) var(--sp-12);
  opacity:0;pointer-events:none;transform:translateY(-10px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.gnb__overlay.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
/* margin:auto — 내용이 짧으면 가운데, 길어지면 위에서부터 흐르며 스크롤된다.
   justify-content:center 로는 넘칠 때 위쪽이 잘려서 접근이 안 된다 */
.gnb__overlay-inner{margin:auto;width:100%;max-width:420px;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-6)}
.gnb__overlay a{color:#fff;text-decoration:none}
.gnb__overlay .btn{width:128px;height:40px;min-height:0;padding:0;
                    background:var(--accent);color:#000}
.gnb__overlay__tel{color:var(--on-dark-3);font-size:var(--fs-body)}

/* --- 모바일 아코디언 내비게이션 --- */
.mnav{width:100%}
.mnav__group + .mnav__group{border-top:1px solid rgba(255,255,255,.12)}
.gnb__overlay .mnav__link,.mnav__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  width:100%;padding:var(--sp-5) var(--sp-2);
  font:var(--fw-bold) var(--fs-h2)/1.3 var(--font-sans);color:#fff;text-align:left}
.mnav__toggle{background:none;border:0;cursor:pointer}
.mnav__chev{flex:none;width:9px;height:9px;margin-right:4px;
  border-right:2px solid rgba(255,255,255,.55);border-bottom:2px solid rgba(255,255,255,.55);
  transform:translateY(-3px) rotate(45deg);
  transition:transform var(--dur-fast) var(--ease-out)}
.mnav__toggle[aria-expanded="true"] .mnav__chev{transform:translateY(2px) rotate(-135deg)}
.mnav__sub{max-height:0;overflow:hidden;
  transition:max-height var(--dur-base) var(--ease-out)}
.mnav__toggle[aria-expanded="true"] + .mnav__sub{max-height:200px}
.gnb__overlay .mnav__sub a{display:block;padding:var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-6);
  font-size:var(--fs-lead);font-weight:var(--fw-medium);color:var(--on-dark-3)}
.mnav__sub li:last-child a{padding-bottom:var(--sp-5)}
.gnb__overlay .mnav__sub a[aria-current="page"]{color:var(--accent)}

/* =====================================================
   7. FOOTER (parts/footer.html)
===================================================== */
.footer{background:var(--surface-dark);padding:var(--sp-15) 0 var(--sp-10)}
.footer .container{padding:0 40px}
.footer__tel{font:700 30px/1 var(--font-sans);color:#fff}
.footer__hours{margin-top:var(--sp-6);font-size:var(--fs-cap);color:#CCCCCC}
.footer__info{margin-top:var(--sp-10);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10)}
.footer__info h3{font:700 13px/1 var(--font-sans);color:#fff}
.footer__info dl{margin-top:var(--sp-4);display:grid;grid-template-columns:120px 1fr;
                 row-gap:var(--sp-3);font-size:var(--fs-cap);color:#CCCCCC}
.footer__policy{margin-top:var(--sp-10);font:700 13px/1 var(--font-sans);color:#fff;display:flex;gap:var(--sp-3)}
.footer__policy span{color:#555}
.footer__sns{display:flex;gap:20px;margin-top:var(--sp-10)}
.footer__sns a{width:36px;height:36px;border-radius:50%;background:#3A3A3A;display:grid;place-items:center;color:#fff}
.footer__bottom{margin-top:var(--sp-10);padding-top:var(--sp-10);border-top:1px solid #3A3A3A;
                font-size:12px;color:#999}
.footer__bottom .container{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:flex-start;padding:0 40px}
.footer__logo{font-weight:var(--fw-bold);color:#fff;flex:none}
@media (max-width:1023px){
  .footer .container{padding:0 20px}
  .footer__info{grid-template-columns:1fr}
}

/* =====================================================
   6-1. SubHero (P10 A1 / P11 C1 °ø¿ë)
===================================================== */
.subhero{position:relative;height:477px;background:var(--surface-hero);color:#fff;overflow:hidden}
.subhero__bg{position:absolute;inset:0}
.subhero .container{position:relative;z-index:1;padding-top:172px;text-align:center}
.subhero__label{font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--accent);letter-spacing:var(--ls-wide)}
.subhero h2{margin-top:25px;font:700 var(--fs-hero)/1.1 var(--font-sans);color:#FDFDFD}
.subhero p{margin-top:33px;font-size:var(--fs-body);color:var(--on-dark-3)}

/* SubHero — 화이트 변형 (about/greeting 전용).
   .subhero는 about/brand 페이지와 공유하는 컴포넌트라 원본은 그대로 두고,
   이 modifier를 추가로 붙인 페이지에서만 화이트 기반으로 오버라이드한다. */
.subhero--light{background:#FFFFFF;color:var(--ink)}
.subhero--light .subhero__bg,
.subhero--light .subhero__bg .ph{background:transparent}
.subhero--light .subhero__label{color:var(--accent-dark)}
.subhero--light h2{color:var(--ink)}
.subhero--light p{color:var(--text-2)}

/* =====================================================
   6-2. SectionHead (¼¹ÀǸñ ³» ¼½¼Ç ŸÀÌƲ °ø¿ë)
===================================================== */
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
          gap:var(--sp-10);margin-bottom:var(--sp-22)}
.sec-head__label{display:block;font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--accent-dark)}
.section--tint .sec-head__label{color:var(--accent-on-tint)}
.sec-head h2{margin-top:var(--sp-2);font-size:var(--fs-h2)}
.sec-head__desc{max-width:420px;font-size:var(--fs-body);color:var(--text-2);text-align:right}
.section--tint .sec-head__desc{color:var(--muted-on-tint)}
.sec-head__nav{display:flex;flex:none}

/* =====================================================
   6-3. CTA Band (P10 A4 / P11 C3 °ø¿ë ¡ª ÁÂÇ¥±îÁö µ¿ÀÏ)
===================================================== */
.cta-band{height:487px;display:flex;align-items:center;justify-content:center;text-align:center;
  background:#262626}                    /* 바로 아래 .footer 가 --surface-dark(#1A1A1A) 라
                                            같은 값이면 경계 없이 한 덩어리로 붙는다. 한 단계 밝게 띄운다 */
.cta-band__inner{max-width:600px;padding:0 var(--sp-5)}
/* 배경이 어두워졌으니 글자색도 따라간다 — 기존 --ink / --text-2 는 검정 위 검정이 된다 */
.cta-band h3{font:700 var(--fs-h3)/1.5 var(--font-sans);color:#FFFFFF}
.cta-band p{margin-top:var(--sp-15);font-size:var(--fs-body);line-height:1.7;color:#AAAAAA}
.cta-band .btn{margin-top:var(--sp-15);width:136px;height:48px}
/* .btn--fill 은 배경이 --ink(#1A1A1A) 라 같은 색 위에서 사라진다 — 메인 문의 버튼과 같은 초록 아웃라인 */
.cta-band .btn--fill{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.cta-band .btn--fill:hover{background:var(--accent);color:#000}
@media (hover:none){ .cta-band .btn--fill:hover{background:transparent;color:var(--accent)} }

/* =====================================================
   6-4. DarkCard (P10 ºê·£µå öÇÐ Ä«µå)
===================================================== */
.card--dark{position:relative;aspect-ratio:318.5/410.5;overflow:hidden;background:#000;display:block}
.card--dark .ph{position:absolute;inset:0;background:#3A3A3A;color:#ccc}
.card--dark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;
  background:linear-gradient(to top,rgba(0,0,0,.65),transparent);pointer-events:none}
.card--dark__title{position:absolute;left:24px;right:24px;bottom:56px;color:#fff;
  font:700 var(--fs-lead)/1.4 var(--font-sans);
  transition:transform var(--dur-base) var(--ease-out)}
.card--dark__desc{position:absolute;left:24px;right:24px;bottom:24px;color:var(--on-dark-2);
  font-size:var(--fs-cap);line-height:1.6;opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.card--dark:hover .card--dark__title{transform:translateY(-100px)}
.card--dark:hover .card--dark__desc{opacity:1;transform:translateY(0)}
@media (hover:none){
  .card--dark:hover .card--dark__title{transform:none}
  .card--dark:hover .card--dark__desc{opacity:0;transform:translateY(8px)}
}

/* =====================================================
   6-5. Carousel arrows / ij·¯¼¿ °øÅë
===================================================== */
.sw-arrow{width:48px;height:48px;display:grid;place-items:center;background:#8A8A8A;color:#fff;border:0}
.sw-arrow[aria-disabled="true"]{opacity:.35;pointer-events:none}
.carousel--center{position:relative;overflow:hidden}

/* =====================================================
   6-6. Profile (P11 C2)
===================================================== */
.profile{background:#FFFFFF;padding:125px 0 120px}
.profile__inner{max-width:1034px;margin:0 auto;padding:0 var(--sp-5);
                display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--sp-10)}
.profile__role{font-size:var(--fs-body);color:var(--accent-on-tint)}
.profile__name{margin-top:var(--sp-4);font:700 28px/1.3 var(--font-sans);color:var(--ink)}
.profile__message{margin-top:var(--sp-8);font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--text-2)}
.profile__group{margin-top:var(--sp-20)}
.profile__group + .profile__group{margin-top:var(--sp-12)}
.profile__group h4{font:700 var(--fs-lead)/1.4 var(--font-sans);color:var(--ink)}
.profile__group ul{margin-top:var(--sp-5)}
.profile__group li{font-size:var(--fs-body);color:#525252;line-height:1}
.profile__group li + li{margin-top:var(--sp-9)}
.profile__photo{justify-self:end}
.profile__photo .ph{width:444px;height:645px;max-width:100%}
.profile__photo img{width:444px;height:645px;max-width:100%;object-fit:cover;
  background:transparent}  /* 누끼 이미지 — 전역 img{background:#E4E4E4} 를 덮어쓴다.
    border-radius도 제거: 투명 배경에서는 모서리가 안 보이고, 하단에서 가운 모서리를 깎아먹는다 */

@media (max-width:1023px){
  .subhero{height:auto;min-height:360px;padding-bottom:60px}
  .subhero .container{padding-top:120px}
  .subhero h2{font-size:32px}
  .sec-head{flex-direction:column;align-items:flex-start}
  .sec-head__desc{text-align:left;max-width:none}
  .cta-band{height:auto;padding:60px 0}
  .profile{padding:80px 0}
  .profile__inner{grid-template-columns:1fr;gap:var(--sp-10);max-width:none}
  .profile__photo{justify-self:center}
  .profile__photo .ph{width:min(444px,70vw);height:auto;aspect-ratio:444/645}
  .profile__photo img{width:min(444px,70vw);height:auto;aspect-ratio:444/645}
}

/* =====================================================
   6-7. Faq (P30 D12 / P41 °ø¿ë Ä«µåÇü ¾ÆÄÚµð¾ð)
===================================================== */
.faq{display:flex;flex-direction:column;gap:var(--sp-4)}
.faq__item{background:#fff;border-radius:16px;overflow:hidden;
           border:1px solid transparent;transition:border-color var(--dur-fast) var(--ease-out)}
.faq__item.is-open{border-color:var(--accent-dark)}
.faq__q{display:flex;align-items:center;gap:var(--sp-4);width:100%;min-height:96px;
        padding:var(--sp-8) var(--sp-10);background:none;border:0;cursor:pointer;text-align:left}
.faq__q em{font-style:normal;font:700 20px/1 var(--font-sans);color:var(--accent-dark)}
.faq__q span{font:700 var(--fs-lead)/1.4 var(--font-sans);color:var(--ink)}
.faq__q .chev{margin-left:auto;width:24px;height:24px;color:var(--accent-dark);flex:none;
              transition:transform var(--dur-base) var(--ease-out)}
.faq__item.is-open .chev{transform:rotate(180deg)}
.faq__a{display:flex;gap:var(--sp-4);padding:var(--sp-6) var(--sp-10) var(--sp-8);
        border-top:1px solid #EFEFEF}
.faq__a[hidden]{display:none}
.faq__a em{font-style:normal;font:700 var(--fs-lead)/1.6 var(--font-sans);color:var(--accent-dark)}
.faq__a p{font-size:var(--fs-lead);line-height:1.75;color:var(--text-2)}
.faq__a p + p{margin-top:var(--sp-4)}
.faq__q:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@media (max-width:767px){
  .faq__q{min-height:72px;padding:var(--sp-5)}
  .faq__q span{font-size:var(--fs-body)}
  .faq__a{padding:var(--sp-5)}
  .faq__a p{font-size:15px}
}

/* =====================================================
   6-8. AltSection (P30 D3¡¤D4¡¤D7¡¤D8 / P31 Áö±×Àç±× °ø¿ë)
===================================================== */
.alt{padding:100px 0}
.alt .container{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--sp-10)}
.alt__text{order:1}
.alt__media{order:2}
.alt--reverse .alt__text{order:2}
.alt--reverse .alt__media{order:1}
.alt__text .label{display:inline-block;font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--accent-dark)}
.section--tint .alt__text .label{color:var(--accent-on-tint)}
.alt__text h3{margin-top:var(--sp-2);font-size:var(--fs-h2)}
.alt__text p{margin-top:var(--sp-5);font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--text-2)}
.section--tint .alt__text p{color:var(--muted-on-tint)}
.alt__media .ph{aspect-ratio:4/3}
/* 이미지도 플레이스홀더와 같은 틀을 쓴다. 전역 img{background:#E4E4E4} 는 로딩 중 회색이라 그대로 둔다 */
.alt__media > img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.card--dark > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.badge{display:inline-grid;place-items:center;height:50px;padding:0 24px;
       background:var(--accent-dark);color:#fff;font-size:13px;font-weight:var(--fw-bold);
       letter-spacing:var(--ls-wide);text-transform:uppercase}
@media (max-width:1023px){
  .alt{padding:60px 0}
  .alt .container{grid-template-columns:1fr;gap:var(--sp-8)}
  .alt__text,.alt--reverse .alt__text{order:1}
  .alt__media,.alt--reverse .alt__media{order:2}
}

/* =====================================================
   8. FLOAT CTA (parts/float-cta.html) — R01: 토글형 4항목 메뉴로 전면 교체
===================================================== */
.float-cta{position:fixed;right:46px;bottom:30px;z-index:var(--z-float);
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}

.float-cta__toggle{display:flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 6px;
  border-radius:23px;background:var(--surface-dark);color:var(--accent);
  font-size:14px;font-weight:700;border:0;cursor:pointer}
.float-cta__ico{width:30px;height:30px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;color:#000;flex:none}
.float-cta__ico .icon{width:16px;height:16px}
.float-cta__label{font:700 14px/1 var(--font-sans);color:var(--accent)}

.float-cta__menu{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.float-cta__menu[hidden]{display:none}   /* [hidden] 명시도 보정 — 없으면 display:flex 에 진다 */

.float-item{display:flex;align-items:center;gap:10px;width:150px;height:44px;
  padding:0 16px 0 8px;background:#fff;border-radius:22px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  font:700 14px/1 var(--font-sans);color:var(--ink);
  transition:background var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out)}
.float-item:hover{background:#F5F5F5;transform:translateX(-2px)}
@media (hover:none){ .float-item:hover{background:#fff;transform:none} }

.float-item__ico{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;
  border-radius:50%;font:700 13px/1 var(--font-sans);color:#fff}
.float-item__ico--mail{background:#1A1A1A}
.float-item__ico--kakao{background:#FEE500;color:#1A1A1A}
.float-item__ico--naver{background:#03C75A}
.float-item__ico--coupang{background:#AE0B15}

.float-cta__menu li{opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out)}
.float-cta.is-open .float-cta__menu li{opacity:1;transform:translateY(0)}

@media (max-width:767px){
  .float-cta{right:16px;bottom:16px}
  .float-cta__toggle{width:auto;padding:0 16px 0 8px}
  .float-item{width:140px;height:40px}
}

/* =====================================================
   9. SCROLL REVEAL — .reveal 이 뷰포트에 들어오면 아래에서 올라오며 등장
   숨김 상태는 html[data-reveal] 안에서만 건다. initScrollReveal()이
   이 속성을 세우므로 JS 실패·IO 미지원 시 그냥 보이는 상태로 남는다.
   등장 시차는 요소마다 --reveal-delay 로 준다.
===================================================== */
[data-reveal] .reveal{opacity:0;transform:translateY(40px);
  transition:opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay,0s),
             transform var(--dur-reveal) var(--ease-out) var(--reveal-delay,0s)}
[data-reveal] .reveal.is-in{opacity:1;transform:none}