/* ============================================================================
   sections/contact.css — sub0401_Contact (221:800 · 1920×5551)
   ----------------------------------------------------------------------------
   근거: extract/snapshot-sub0401.json · notes-sub0401.md · tokens-sub0401.json.
   길이값은 02-tokens 변수 또는 clamp 손계산(1920 기준 — 주석에 시안값).
   브레이크포인트: 1440 / 1280 / 1024 / 768 / 480 만 사용.
   ========================================================================== */
@layer components {

  /* ── 페이지 전용 보조 스케일 (02-tokens 에 없는 시안값 손계산) ─────────── */
  body[data-page="contact"] {
    --ct-sp-150: clamp(56px, 7.8125vw, 150px);  /* 150 화이트 섹션 타이틀→콘텐츠 gap */
    --ct-sp-70:  clamp(40px, 3.6458vw, 70px);   /* 70  블록 간 gap */
    --ct-in-h:   clamp(48px, 3.125vw, 60px);    /* 60  입력 높이 */
    --ct-in-pad: var(--sp-20);                  /* 20  입력 안쪽 여백 */
    --ct-chip-bg: #f5f5f5;                      /* 221:925 Role 칩 */
    --ct-chip-bd: #e8e8e8;                      /* 221:925 stroke */
    --ct-map-bd:  #dddddd;                      /* 221:921 stroke */
    --ct-tile:    #f2f2f2;                      /* 221:891 아이콘 타일 */
    --ct-faq-bg:  #f6f6f6;                      /* 221:954 닫힌 아코디언 */
    /* 오류 상태 — 시안에 오류 스펙 없음(확인요망). 06-craft 기준 절제된 적색.
       data-invented 근거: 폼 검증 요구(BUILD-RULES 11) */
    --ct-err: #ff8a8a;
  }
  .ct-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

  /* ══ 공통 타이틀 패턴 (오버라인 16 Bold + gap20 + 50 Bold 1.4) ══════════ */
  .ct-title { display: grid; gap: var(--sp-20); align-content: start; }
  .ct-title__label { font-weight: 700; font-size: var(--fs-16); line-height: 1; color: var(--df-cyan); }
  .ct-title__label--light { color: var(--df-blue); }               /* 화이트 섹션 #006CD2 */
  .ct-title__h { font-weight: 700; font-size: var(--fs-50); line-height: 1.4; }
  /* 221:931 잉크폭(hug) 등 시안 정합용 고정폭 훅은 설계폭 계열(≥1440)에서만 — 함정 61(규칙 B) */
  @media (min-width: 1440px) {
    .ct-commit .ct-title__h { inline-size: max-content; max-inline-size: 100%; }
    .ct-consent { inline-size: 100%; max-inline-size: 100%; } /* 시안 hug — overflow로 스크롤 버벅임 방지 */
    .ct-consent__lab { inline-size: max-content; max-inline-size: 100%; }  /* 시안 w501(hug) */
  }

  /* 2열 골격: 다크(555+945 gap100) / 화이트(555+895 gap150) */
  .ct-cols { display: grid; grid-template-columns: minmax(0, 555fr) minmax(0, 945fr); gap: var(--sp-100); align-items: start; }
  .ct-cols--wide { grid-template-columns: minmax(0, 555fr) minmax(0, 895fr); gap: var(--ct-sp-150); }

  /* ══ sec1 인트로 (221:803 · y214–558 · 다크 · pb120) ════════════════════ */
  .ct-hero { background: var(--df-navy); padding-block-start: calc(var(--hd-h) + var(--sp-120)); }
  .ct-hero__row {
    display: grid;
    grid-template-columns: minmax(0, 650fr) minmax(0, 850fr);      /* 시안 650+850 gap100 */
    gap: var(--sp-100);
    align-items: start;
    padding-block-end: var(--sp-120);                              /* 시안 221:803 pb120(F2: id 가 이 박스) */
  }
  .ct-hero__twrap {
    position: relative;
    inline-size: max-content; max-inline-size: 100%;               /* hug — 폭 박지 않기 */
    font-weight: 700; font-size: var(--fs-80); line-height: 1.4;   /* 80/Bold/1.4 (221:804) */
    color: var(--df-white);
  }
  .ct-hero__title { font: inherit; color: inherit; }
  .ct-hero__ln { display: block; }
  .ct-hero__veil { position: absolute; inset: 0; pointer-events: none; }

  .ct-hero__aside { padding-block-start: clamp(0px, 7.2917vw, 140px); } /* 시안 pt140(221:805) */
  .ct-hero__copy { font-weight: 400; font-size: var(--fs-20); line-height: 1.8; color: var(--df-white); }

  /* ══ sec2 문의 폼 (221:807 · y558–1681 · 다크 · py120 · 상단 1px w10) ═══ */
  .ct-form-sec { background: var(--df-navy); }
  .ct-form-wrap { position: relative; padding-block: var(--sp-120); } /* 시안 221:807 박스(py120·top stroke 포함) */
  .ct-rule {                                                       /* 시안 stroke 를 요소화(divider-draw-x 대상) */
    position: absolute; inset-block-start: 0; inset-inline: 0;
    block-size: 1px; background: var(--df-line-w10);
  }

  .ct-form { display: flex; flex-direction: column; gap: var(--sp-30); align-items: flex-end; } /* 221:811 gap30 items-end */
  .ct-fields {
    inline-size: 100%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* 465+15+465 = 945 */
    gap: var(--sp-30) clamp(10px, 0.78125vw, 15px);                /* 시안 30px 15px (221:812) */
    overflow-x: clip;
  }
  .ct-field { display: grid; gap: clamp(6px, 0.5208vw, 10px); align-content: start; } /* label gap 10 */
  .ct-field--full { grid-column: 1 / -1; }

  .ct-label { font-weight: 600; font-size: var(--fs-16); line-height: 1; color: var(--df-white); }
  .ct-req { color: var(--df-cyan); }                               /* 라벨 * = #28C6FF */

  /* 공통 입력 실측: h60 · #1C2B40 · 1px #2D4059 · r6 · pad20 · 값 18 Regular 흰색 */
  .ct-in {
    inline-size: 100%; min-block-size: var(--ct-in-h);
    padding: 0 var(--ct-in-pad);
    background: var(--df-field);
    border: 1px solid var(--df-field-bd);
    border-radius: var(--r-6);
    font-family: inherit; font-weight: 400; font-size: var(--fs-18); line-height: 1;
    color: var(--df-white);
  }
  .ct-in::placeholder { color: rgb(255 255 255 / 50%); opacity: 1; } /* 실측 rgba(255,255,255,0.5) */
  .ct-in:focus-visible { outline: 2px solid var(--df-focus); outline-offset: 2px; border-color: var(--df-focus); }

  /* 셀렉트 (221:815 + 화살표 221:817 22×11) */
  .ct-selwrap { position: relative; display: grid; }
  .ct-in--select {
    appearance: none;
    padding-inline-end: calc(var(--ct-in-pad) + 34px);             /* 화살표 자리 */
    cursor: pointer;
  }
  .ct-in--select:invalid { color: var(--df-white); }               /* 시안: placeholder 도 #FFF (221:816) */
  .ct-in--select option { background: var(--df-field); color: var(--df-white); }
  .ct-selwrap__ar {
    position: absolute; inset-block-start: 50%; inset-inline-end: var(--ct-in-pad);
    translate: 0 -50%;
    inline-size: 22px; block-size: 11px; pointer-events: none;
    background-size: contain;
  }
  .ct-selwrap__ar { background: url(../assets/img/form-select-arrow.svg) center / contain no-repeat; }

  /* 시안 placeholder/상태 텍스트 노드(221:816·822·826·830·834·838·842·847·852)를
     실제 요소로 재현(F1) — 네이티브 ::placeholder 페인트는 투명 처리(이중 페인트 방지).
     기능(민감정보 자동완성·:placeholder-shown 동작)은 placeholder 속성이 그대로 담당 */
  .ct-inwrap { position: relative; display: grid; min-inline-size: 0; }
  .ct-inwrap .ct-in { inline-size: 100%; }
  .ct-inwrap .ct-in::placeholder { color: transparent; }
  .ct-ph {
    position: absolute; inset-inline-start: var(--ct-in-pad);
    inset-block-start: 50%; translate: 0 -50%;
    font-weight: 400; font-size: var(--fs-18); line-height: 1;     /* 시안 18/1 */
    color: rgb(255 255 255 / 50%);
    pointer-events: none;
    max-inline-size: calc(100% - var(--ct-in-pad) * 2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ct-ph--area { inset-block-start: var(--ct-in-pad); translate: 0 0; white-space: normal; }
  .ct-ph--file, .ct-ph--sel { color: var(--df-white); }            /* 221:847/852/816 실측 #FFF */
  .ct-inwrap .ct-in:not(:placeholder-shown) ~ .ct-ph--auto { display: none; }
  .ct-in--select.is-empty { color: transparent; }                  /* 빈 값 표시는 221:816 스팬이 담당 */

  /* 텍스트에어리어 (221:841 · h150 · items-start) */
  .ct-in--area {
    min-block-size: clamp(110px, 7.8125vw, 150px);
    padding-block: var(--ct-in-pad);
    line-height: 1.6; resize: vertical;
  }

  /* 첨부 2행 (221:845/850 · 표시 input flex-1 + Select file 버튼 114×60) */
  .ct-attach { display: grid; gap: clamp(6px, 0.5208vw, 10px); }
  .ct-attach__row { display: flex; gap: clamp(6px, 0.5208vw, 10px); }
  .ct-attach__row .ct-inwrap { flex: 1 1 auto; }
  .ct-attach__display { cursor: pointer; }
  .ct-attach__btn {
    flex: 0 0 auto;
    inline-size: clamp(92px, 5.9375vw, 114px); min-block-size: var(--ct-in-h); /* 시안 114×60 */
    padding-inline: 0; line-height: 1;
    background: transparent; border: 1px solid var(--df-white); border-radius: var(--r-6);
    font-weight: 600; font-size: var(--fs-16); line-height: 1; color: var(--df-white);
    cursor: pointer;
  }

  /* 개인정보 동의 (221:866 · pt20 · 체크 30×30 흰 bg r6 + 문구 18) */
  .ct-consent { contain: layout style; }
  /* .ct-consent 폭 확장(시안 975)·라벨 hug 는 위 ≥1440 블록 — 좁은 폭 자연 줄바꿈(규칙 B) */
  .ct-consent__lab {
    position: relative;
    display: flex; align-items: center; gap: clamp(10px, 0.78125vw, 15px); /* 시안 gap 15 */
    padding-block-start: var(--sp-20);                             /* 시안 221:871 pt20 → h50 */
    cursor: pointer;
  }
  .ct-consent__input {                                             /* 실제 체크박스(기능) — 시각은 박스 span */
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .ct-consent__box {
    flex: 0 0 auto; position: relative;
    inline-size: clamp(24px, 1.5625vw, 30px); aspect-ratio: 1;
    background: var(--df-white); border-radius: var(--r-6);        /* 221:873 */
  }
  /* 체크 글리프(221:874) — form-check.svg 도착 전 임시(배경+clip-path, 선·필터 없음).
     기본 opacity 0 = 시안 off 상태(221:872) — 노드에 data-invented 로 근거 명시 */
  .ct-consent__ck {
    position: absolute; inset: 10%;                                /* 시안 3/30 = 24×24 */
    background: url(../assets/img/form-check.svg) center / contain no-repeat;
    opacity: 0;
  }
  .ct-consent__input:checked ~ .ct-consent__box .ct-consent__ck { opacity: 1; } /* on 상태(221:873) */
  .ct-consent__input:focus-visible ~ .ct-consent__box { outline: 2px solid var(--df-focus); outline-offset: 2px; }
  .ct-consent__txt { font-weight: 400; font-size: var(--fs-18); line-height: 1; color: var(--df-white); }

  /* 오류 메시지 — 시안에 스펙 없음(확인요망 · data-invented). 06-craft: 절제·명료 */
  .ct-err {
    display: none;
    font-size: clamp(12px, 0.7292vw, 14px); line-height: 1.4;
    color: var(--ct-err);
  }
  .ct-err.is-on { display: block; }
  .ct-field.is-err .ct-in,
  .ct-field.is-err .ct-attach__display { border-color: var(--ct-err); }
  .ct-field.is-err .ct-consent__box { outline: 2px solid var(--ct-err); outline-offset: 2px; }

  /* 제출 영역 — 버튼 202×62 우측 정렬(221:877). 화려한 호버 금지(명료 우선) */
  .ct-form__foot { display: grid; gap: var(--sp-20); justify-items: end; }
  .ct-form__status { display: none; font-size: var(--fs-16); line-height: 1.5; text-align: end; }
  .ct-form__status.is-on { display: block; }
  .ct-form__status.is-ok { color: var(--df-cyan); }
  .ct-form__status.is-bad { color: var(--ct-err); }
  .ct-submit { cursor: pointer; border: 0; font-family: inherit; line-height: 1; }
  .ct-submit:disabled { opacity: .6; cursor: default; }

  /* ══ sec3 Contact Directly (221:881 · 풀폭 화이트 · py120 · gap150) ═════ */
  .ct-direct { background: var(--df-white); color: var(--df-ink); }
  .ct-direct__wrap { padding-block: var(--sp-120); }
  .ct-direct__list { display: grid; gap: var(--ct-sp-70); }        /* 블록 gap 70 (221:886) */
  .ct-block { display: grid; gap: var(--sp-30); }                  /* 내부 gap 30 */
  .ct-block__h { font-weight: 700; font-size: var(--fs-30); line-height: 1; color: var(--df-ink); }

  .ct-rows { display: grid; gap: var(--sp-30); }                   /* 행 간 30 (221:887) */
  .ct-row { display: flex; gap: var(--sp-20); }                    /* 아이콘 gap 20 (221:890) */
  .ct-row__tile {
    flex: 0 0 auto; display: grid; place-items: center;
    inline-size: clamp(48px, 3.125vw, 60px); aspect-ratio: 1;      /* 60×60 */
    background: var(--ct-tile); border-radius: 12px;               /* r12 실측(F4) */
  }
  .ct-row__ic { inline-size: clamp(16px, 1.0417vw, 20px); aspect-ratio: 1; background: center / contain no-repeat; }
  .ct-row__ic--mail     { background-image: url(../assets/img/contact-mail.png); }
  .ct-row__ic--clock    { background-image: url(../assets/img/contact-clock.png); }
  .ct-row__ic--calendar { background-image: url(../assets/img/contact-calendar.png); }
  .ct-row__ic--moon     { background-image: url(../assets/img/contact-moon.png); }
  .ct-row__body { display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 0.5208vw, 10px); min-inline-size: 0; }
  .ct-row__t { font-weight: 700; font-size: var(--fs-20); line-height: 1; color: var(--df-ink); }
  .ct-row__d { font-weight: 400; font-size: var(--fs-18); line-height: 1; color: var(--df-ink); }
  .ct-row__d a { position: relative; color: inherit; }
  /* 이메일 호버 밑줄 — cursor-magnet-underline 대상(호버 중에만 표시, 정지=시안 무밑줄) */
  .ct-row__uline {
    position: absolute; inset-inline: 0; inset-block-end: -3px;
    block-size: 1px; background: currentColor;
    transform: scaleX(0);                                          /* 정지 상태 숨김 */
  }

  /* Locations (221:918) — Google Maps embed 898×420 + 주소 24/1.8 + Role 칩 */
  .ct-map {
    position: relative; overflow: clip;
    inline-size: 100%;
    max-inline-size: 100%;
    aspect-ratio: 898 / 420;
    block-size: auto;
    border: 1px solid var(--ct-map-bd); border-radius: 0;          /* r0 실측(F4) */
  }
  .ct-map__frame {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 100%;
    border: 0;
  }
  .ct-addr { font-weight: 700; font-size: var(--fs-24); line-height: 1.8; color: var(--df-ink); }
  .ct-role {
    display: flex; align-items: center; gap: clamp(6px, 0.5208vw, 10px); flex-wrap: wrap;
    margin-block-start: calc(clamp(6px, 0.5208vw, 10px) - var(--sp-30)); /* 시안 주소→칩 gap10 (블록 gap30 상쇄) */
  }
  .ct-role__chip {
    display: inline-flex; align-items: center;
    padding: clamp(6px, 0.5208vw, 10px) var(--sp-20);              /* 10/20 */
    background: var(--ct-chip-bg); border: 1px solid var(--ct-chip-bd);
    border-radius: var(--r-pill);
    font-weight: 400; font-size: var(--fs-18); line-height: 1; color: var(--df-ink);
  }
  .ct-role__txt { font-weight: 400; font-size: var(--fs-18); line-height: 1; color: var(--df-ink); }

  /* ══ sec4 Commitment (221:928 · 다크 · py120 · 타이틀 풀폭 + 카드3) ═════ */
  .ct-commit { background: var(--df-navy); }
  .ct-commit__wrap { display: grid; gap: var(--ct-sp-70); padding-block: var(--sp-120); } /* 시안 221:928 박스(py120 포함) */
  .ct-commit__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-20); } /* 520×3 gap20 · minmax(0,)=aspect 전이 폭 방지(F7) */
  .ct-card {
    position: relative; overflow: clip;
    aspect-ratio: 520 / 700;                                       /* 카드 실측 */
    display: flex; flex-direction: column; justify-content: flex-end; /* 텍스트 하단 정렬 */
    gap: var(--sp-30);                                             /* 타이틀-설명 gap 30 */
    padding: var(--sp-50);                                         /* p50 */
    color: var(--df-white);
  }
  .ct-card > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .ct-card::after { content: ""; position: absolute; inset: 0; background: var(--df-dim-20); } /* rgba(0,0,0,.2) */
  .ct-card--clear::after { content: none; }                        /* 카드2 는 오버레이 없음(F4) */
  .ct-card__t, .ct-card__d { position: relative; z-index: 1; }
  /* hover-sheen 캐리어 — img·오버레이(::after) 위, 텍스트(z1·DOM 후행) 아래. 정지 상태 페인트 없음 */
  .ct-card__sheen { position: absolute; inset: 0; z-index: 1; }
  .ct-card__t { font-weight: 700; font-size: var(--fs-30); line-height: 1; }
  .ct-card__d { font-weight: 400; font-size: var(--fs-18); line-height: 1.8; }

  /* ══ sec5 FAQ (221:942 · 풀폭 화이트 · py120 · 아코디언 3) ══════════════ */
  .ct-faq { background: var(--df-white); color: var(--df-ink); }
  .ct-faq__wrap { padding-block: var(--sp-120); }
  .ct-faq__list { display: grid; gap: var(--sp-20); }              /* 항목 gap 20 */
  .ct-faq__item {
    background: var(--ct-faq-bg);                                  /* 닫힘 #F6F6F6, 테두리 없음(F4) */
    border: 0; border-radius: 0;
    padding: clamp(24px, 2.0833vw, 40px) clamp(24px, 2.6042vw, 50px); /* 40×50 */
  }
  .ct-faq__item.is-open {
    background: var(--df-white);                                   /* 열림 = 흰 bg + 1px #222 */
    border: 1px solid var(--df-ink);
    padding: calc(clamp(24px, 2.0833vw, 40px) - 1px) calc(clamp(24px, 2.6042vw, 50px) - 1px); /* border 보정 */
  }
  .ct-faq__qh { font-size: inherit; }
  .ct-faq__btn {
    inline-size: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-20);
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit; text-align: start; color: inherit;
  }
  .ct-faq__btn[aria-disabled="true"] { cursor: default; }
  .ct-faq__q { font-weight: 700; font-size: var(--fs-24); line-height: 1.6; color: var(--df-ink); }
  .ct-faq__q[data-figma-id="221:950"] { line-height: 1; }          /* 시안 faq1 질문 lh1 */
  .ct-faq__toggle {
    flex: 0 0 auto; position: relative;
    inline-size: clamp(40px, 2.6042vw, 50px); aspect-ratio: 1;     /* 50×50 · 원형은 자산 그림 */
    background: url(../assets/img/faq-toggle-closed.png) center / contain no-repeat;
  }
  .ct-faq__item.is-open .ct-faq__toggle {
    background-image: url(../assets/img/faq-toggle-open.png);      /* 열림 = 위 화살표 자산 */
  }
  .ct-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s var(--ease-out-quart);
  }
  .ct-faq__item.is-open .ct-faq__panel { grid-template-rows: 1fr; }
  .ct-faq__a {
    overflow: hidden;
    min-block-size: 0;
    padding-block-start: 0;
    transition: padding-block-start .45s var(--ease-out-quart);
    font-weight: 400; font-size: var(--fs-18); line-height: 1.6; color: var(--df-ink);
    max-inline-size: clamp(0px, 41.4063vw, 795px);                 /* 답변 폭 795 실측 */
  }
  .ct-faq__item.is-open .ct-faq__a {
    padding-block-start: clamp(20px, 2.0833vw, 40px);              /* 열림 gap 40 */
  }

  /* 여러 줄 텍스트 잉크 계측 보정 — 블록 래퍼(시각 불변, 레이아웃 동일) */
  .ct-ink { display: block; }

  /* ══ 맨 위로 버튼 (data-invented — 공통 예약 scroll-to-top-smooth) ═══════ */
  .ct-top {
    position: fixed; inset-block-end: var(--sp-30); inset-inline-end: var(--sp-30); z-index: 90;
    inline-size: clamp(44px, 2.9167vw, 56px); aspect-ratio: 1; border-radius: 50%;
    background: var(--df-navy-2); border: 1px solid var(--df-line-w20);
    display: grid; place-items: center;
    opacity: 0; visibility: hidden; cursor: pointer;
    transition: opacity .3s var(--ease-out-quart), visibility 0s linear .3s;
  }
  .ct-top.is-on { opacity: 1; visibility: visible; transition: opacity .3s var(--ease-out-quart), visibility 0s linear 0s; }
  .ct-top__ar {
    display: block; inline-size: 30%; aspect-ratio: 1; margin-block-start: 18%;
    border-block-start: 2px solid var(--df-white); border-inline-start: 2px solid var(--df-white);
    transform: rotate(45deg);                                      /* 축약형(P44) */
  }

  /* ════════════════════════════ 반응형 ════════════════════════════════════
     1440/1280: 유동 축소로 흡수(칸수 불변). 1024: 2열 골격 스택.
     768: 폼 1열(2의 약수) · 카드 1열(3의 약수). 480: 미세 조정. */

  @media (width < 1280px) {
    .ct-hero__aside { padding-block-start: clamp(0px, 3vw, 60px); }
  }

  @media (width < 1024px) {
    .ct-hero__row, .ct-cols, .ct-cols--wide { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); } /* min=auto 가 aspect/hug 폭을 전이받지 않게 */
    .ct-hero__aside { padding-block-start: 0; }
  }

  @media (width < 768px) {
    .ct-fields { grid-template-columns: minmax(0, 1fr); }          /* 2의 약수 = 1 */
    .ct-commit__list { grid-template-columns: minmax(0, 1fr); }    /* 3의 약수 = 1 · aspect 전이 폭 방지 */
    .ct-faq__item { padding: var(--sp-30) var(--sp-20); }
    .ct-faq__item.is-open { padding: calc(var(--sp-30) - 1px) calc(var(--sp-20) - 1px); }
    .ct-attach__row { flex-wrap: nowrap; }
    .ct-row__d { line-height: 1.4; }                               /* 좁은 폭 줄바꿈 가독 */
    .ct-addr { line-height: 1.6; }
  }

  @media (width < 480px) {
    .ct-consent__lab { align-items: flex-start; }
    .ct-consent__txt { line-height: 1.5; }
    .ct-faq__q { line-height: 1.4; }
    .ct-top { inset-block-end: 16px; inset-inline-end: 16px; }
  }
}

/* 맨위로 버튼은 JS 전용 발명 요소 — JS 없으면 기능이 없으므로 숨긴다(A11Y11) */
html:not(.js-motion) .ct-top { display: none; }