/*
 * 상담 CTA 배치 (KAKAO-CTA).
 *
 * 넥센타이어 운영 구조를 렌탈마켓 토큰으로 옮긴다.
 * 기준선은 1024px 하나다. 임의로 768/960 을 만들지 않는다.
 *
 *   PC   >=1024   .rm-fastbar (하단 고정) + .rm-side (우측)
 *   MO   <=1023   .rm-cbar (공통 하단바)
 *
 * 제품 상세 모바일에서는 .pd-dock 이 뜨고 .rm-cbar 가 꺼진다.
 * 두 바가 겹쳐 쌓이면 화면 아래가 통째로 막힌다.
 *
 * z-index
 *   레거시 상담 모달(.counsel_win)이 2147483000 을 쓴다.
 *   고정 바는 그보다 반드시 낮아야 모달 위로 튀어나오지 않는다.
 *   렌탈마켓 토큰 --z-sticky(200) 를 쓴다.
 */

/* ── 공용 아이콘 ─────────────────────────────────────────
 * 아이콘 세트가 프로젝트에 없어 인라인 SVG 를 mask 로 쓴다.
 * 외부 아이콘 폰트·라이브러리를 새로 들이지 않는다. */
.pub-root{
  --rm-ico-kakao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.7 6.7-.2.7-.7 2.6-.8 3-.1.5.2.5.4.4.2-.1 2.6-1.8 3.7-2.5.6.1 1.3.1 2 .1 5.5 0 10-3.6 10-8S17.5 3 12 3z'/%3E%3C/svg%3E");
  --rm-ico-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
  --rm-ico-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M6 14l6-6 6 6'/%3E%3C/svg%3E");
  /* [RESTORE · AI-SIDE-LAUNCHER-RESTORE-001] 제거 전 정의를 그대로 되돌린다. */
  --rm-ai-bg:#2B3A8F;
  --rm-ai-bg2:#5C6BD6;
  --rm-ico-ai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6v2.6'/%3E%3Crect x='3.6' y='5.4' width='16.8' height='13' rx='4'/%3E%3Cpath d='M1.6 10.6v3.2M22.4 10.6v3.2'/%3E%3Cpath d='M9.8 14.6h4.4'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='2.4' r='1.3'/%3E%3Ccircle cx='8.9' cy='10.8' r='1.45'/%3E%3Ccircle cx='15.1' cy='10.8' r='1.45'/%3E%3C/g%3E%3C/svg%3E");
  --rm-ico-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}
.pub-root .rm-ico{display:inline-block;width:24px;height:24px;flex:0 0 auto;}
.pub-root .rm-ico--kakao{background:#181600;
  -webkit-mask:var(--rm-ico-kakao) center/contain no-repeat;
          mask:var(--rm-ico-kakao) center/contain no-repeat;}
.pub-root .rm-ico--tel{background:var(--pub-ink-2);
  -webkit-mask:var(--rm-ico-tel) center/contain no-repeat;
          mask:var(--rm-ico-tel) center/contain no-repeat;}
/* AI 채팅상담 (AI-CONSULT-CTA-001). 이미 있는 --rm-ico-chat 을 쓴다. 새 아이콘을 들이지 않는다. */
.pub-root .rm-ico--ai{background:currentColor;
  -webkit-mask:var(--rm-ico-chat) center/contain no-repeat;
          mask:var(--rm-ico-chat) center/contain no-repeat;}

/* ══ PC 하단 빠른 상담바 (>=1024) ═══════════════════════ */
.pub-root .rm-fastbar{display:none;}
.pub-root .rm-fastbar__space{display:none;}

/*
 * fastbar 높이를 변수로 둔다(PATCH-002).
 *
 * side float 이 이 값을 참조한다.
 * 이전에는 76px 을 양쪽에 따로 적었는데, 폼이 들어가 112px 이 되면서
 * side float 이 fastbar 아래로 들어가 가려졌다(실측).
 * 한 곳에서 정하고 두 곳이 같은 값을 쓴다.
 */
.pub-root{--rm-fastbar-h:76px;}

@media (min-width:1024px){
  /*
   * 카드형 하단 상담바 (DESIGN-REFINEMENT).
   *
   * 이전에는 화면 폭을 가로지르는 띠였다.
   * 본문과 붙어 있어 페이지의 일부처럼 보였다.
   *
   * 바깥을 투명하게 두고 안쪽 .container 만 카드로 만든다.
   *   좌우가 비어 본문 위에 얹힌 느낌이 난다.
   *   화면 아래 모서리는 붙으므로 위쪽만 둥글린다.
   *
   * border-top 을 뺀다. 카드가 떠 있으면 경계선이 필요 없고,
   * 선과 그림자가 같이 있으면 테두리가 두 겹으로 보인다.
   */
  .pub-root .rm-fastbar{display:block;
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
    padding:0 var(--gutter);
    background:transparent;border-top:0;
    pointer-events:none;}

  /*
   * 카드 본체.
   *
   * pointer-events 를 되살린다. 바깥은 통과시키고 카드만 받는다.
   *   그러지 않으면 카드 옆 빈 자리가 본문 클릭을 막는다.
   */
  .pub-root .rm-fastbar__inner{display:flex;align-items:center;
    justify-content:space-between;gap:var(--s6);
    /* min-height 만 둔다. 폼이 두 줄이 되면 카드가 따라 높아진다. */
    min-height:var(--rm-fastbar-h);
    /* 안쪽 여백 (DESIGN-REFINEMENT). */
    padding-inline:56px;
    border-radius:var(--r2) var(--r2) 0 0;
    background:var(--pub-bg);
    box-shadow:0 -6px 28px rgba(30,23,35,.14);
    pointer-events:auto;}

  /*
   * 유리 면 (CTA-FASTBAR-GLASS-001 · 백로그 2026-10-15 §3-2).
   *
   * 1) 선택자를 옮겼다.
   *    요청은 .rm-fastbar 에 걸는 것이었지만 그 선택자는 화면 좌우를 덮는
   *    투명 레이어다(위 L72 · pointer-events:none). 거기에 반투명을 주면
   *    하단 전체 띠가 흰색으로 덮여 본문을 가린다. 카드 면인 __inner 에 건다.
   *
   * 2) 불투명 background 를 위에 남겨 둔 채 @supports 로만 덮는다.
   *    미지원 브라우저에서 반투명만 남으면 뒤 글자가 그대로 비쳐
   *    제목·전화번호가 읽히지 않는다. 그쪽은 지금의 불투명 면을 유지한다.
   *    Safari 는 -webkit- 접두사가 함께 필요하므로 or 로 둘 다 본다.
   *
   * 3) 알파는 CC(80%)다. 99(60%) 가 아니다 — 실측 때문이다.
   *    블러 뒤에 검정에 가까운 이미지가 올 때의 합성면 대비:
   *      99 → 합성 #999999   전화번호(--pub-accent) 1.85:1   ✗
   *      CC → 합성 #CCCCCC   전화번호                 3.28:1   ✓ (큰 글자 AA 3:1)
   *                          제목(--pub-ink)         10.9:1   ✓
   *    전화번호는 21px·800 이라 큰 글자 기준을 탄다. 60% 는 그 기준도 못 넘는다.
   *    유리 느낌은 CC 에서도 남는다. 값을 더 내리려면 번호 색을 함께 바꿔야 한다.
   */
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .pub-root .rm-fastbar__inner{
      background:#FFFFFFCC;
      -webkit-backdrop-filter:blur(12px);
              backdrop-filter:blur(12px);}
  }
  /*
   * 제목·전화번호 확대 (PATCH-009 · P1-1).
   *
   * 이전에는 둘 다 16px 이라 하단바에서 눈에 들어오지 않았다.
   *
   *   제목    16 → --fs-section (22~24)
   *   번호    16 → --fs-price   (21)
   *
   * --fs-title(24~28) 은 하단바에 과하다. 본문 제목만큼 커지면
   * 고정바가 화면 아래를 지나치게 차지한다.
   */
  /*
   * 제목은 줄이지 않는다.
   *   overflow:hidden 으로 줄였더니 1024 에서 전화번호가 잘려 사라졌다(실측).
   *   상담 안내에서 번호가 안 보이면 안 된다.
   */
  .pub-root .rm-fastbar__t{flex:0 0 auto;
    display:flex;align-items:baseline;gap:var(--s3);
    font-size:var(--fs-section);font-weight:var(--fw-b);
    color:var(--pub-ink);white-space:nowrap;}

  /*
   * 전화번호는 이제 링크가 아니다 (P1-1).
   *
   * 클릭 영역을 만들 이유가 없어졌다. min-height 44px 를 뺀다.
   *   인라인 높이를 강제로 늘리면 제목과 baseline 이 어긋난다.
   * 부모의 align-items:baseline 으로 글자 아랫선을 맞춘다.
   *
   * 번호가 제목보다 커야 눈이 먼저 간다. 실제 필요한 정보다.
   */
  .pub-root .rm-fastbar__tel{margin-left:0;color:var(--pub-accent);
    font-size:var(--fs-price);font-weight:var(--fw-eb);
    font-variant-numeric:tabular-nums;letter-spacing:var(--tr-1);}
  .pub-root .rm-fastbar__act{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto;}
  .pub-root .rm-fastbar__act .btn{min-height:48px;}
  /* 카카오는 브랜드 색을 지킨다. 노랑 위에는 검정 글자가 정본이다. */
  .pub-root .rm-fastbar__kakao{display:inline-flex;align-items:center;gap:var(--s2);
    background:#FEE500;color:#181600;box-shadow:none;font-weight:var(--fw-b);}
  .pub-root .rm-fastbar__kakao:hover{filter:brightness(.95);text-decoration:none;}

  /* 고정 바가 본문 마지막을 가리지 않게 한다. */
  .pub-root .rm-fastbar__space{display:block;height:var(--rm-fastbar-h);}
}

/* ══ PC 우측 side float (>=1024) ════════════════════════ */
.pub-root .rm-side{display:none;}
@media (min-width:1024px){
  /*
   * side float 위치 (PATCH-002).
   *
   * fastbar 높이 + 여백만큼 띄운다. 고정 숫자를 쓰지 않는다.
   * 폼 유무로 바 높이가 달라지는데 76 을 박아 두면 그때 가려진다.
   *
   * 화면이 낮으면 목록이 위로 넘칠 수 있다.
   * max-height 로 잘라 두고 넘치면 그 안에서 스크롤한다.
   * 헤더(64px)와 fastbar 사이 공간만 쓴다.
   */
  .pub-root .rm-side{display:flex;flex-direction:column;gap:var(--s2);
    position:fixed;right:var(--s5);
    bottom:calc(var(--rm-fastbar-h) + var(--s5));
    max-height:calc(100vh - var(--rm-fastbar-h) - 64px - var(--s8));
    overflow-y:auto;overflow-x:hidden;
    scrollbar-width:none;
    z-index:var(--z-sticky);}
  .pub-root .rm-side::-webkit-scrollbar{display:none;}
  .pub-root .rm-side[hidden]{display:none;}
  /*
   * 클릭 대상을 키운다.
   *   PATCH-002       60 → 68px
   *   SIDEPANEL-UX    68 → 76px  (+11.8% · §4-A)
   *
   * 우측 패널 존재감을 조금 높이고 손가락·커서 목표를 키운다.
   * 라벨 크기(11px)는 그대로 둔다. 글자만 커지면 위계가 흐트러진다.
   *
   * 정정 (CTA-FASTBAR-GLASS-001 · 2026-10-16).
   *   위 마지막 문장은 SIDEPANEL-UX 당시 판단이고, 그 뒤 TYPOGRAPHY-007 컷이
   *   라벨만 11 → 13px 로 올렸다. 아래 규칙의 font-size 가 현재값이다.
   *   76px 폭에 13px 네 글자(카카오톡·상담신청)는 약 52px 로 들어간다(실측).
   */
  .pub-root .rm-side__btn{display:grid;place-items:center;gap:2px;
    width:76px;min-height:76px;padding:var(--s2) 0;
    border:0;border-radius:var(--r2);cursor:pointer;
    background:var(--pub-bg);
    box-shadow:0 4px 14px rgba(30,23,35,.14),inset 0 0 0 1px var(--pub-line);
    font-family:inherit;font-size:13px;font-weight:var(--fw-sb);color:var(--pub-ink-2);
    transition:transform .12s ease;}
  .pub-root .rm-side__btn:hover{transform:translateY(-1px);text-decoration:none;}
  /* 24 → 26px (+8.3% · §4-A). 버튼보다 덜 키운다. 아이콘만 크면 어색하다. */
  .pub-root .rm-side__ico{width:26px;height:26px;background:var(--pub-ink-2);}
  .pub-root .rm-side__btn--top .rm-side__ico{
    -webkit-mask:var(--rm-ico-top) center/contain no-repeat;
            mask:var(--rm-ico-top) center/contain no-repeat;}
  .pub-root .rm-side__btn--kakao{background:#FEE500;color:#181600;}
  .pub-root .rm-side__btn--kakao .rm-side__ico{background:#181600;
    -webkit-mask:var(--rm-ico-kakao) center/contain no-repeat;
            mask:var(--rm-ico-kakao) center/contain no-repeat;}
  .pub-root .rm-side__btn--counsel{
    background:linear-gradient(140deg,var(--pub-accent-grad) 0%,var(--pub-accent) 100%);
    color:var(--pub-on-accent);}
  .pub-root .rm-side__btn--counsel .rm-side__ico{background:var(--pub-on-accent);
    -webkit-mask:var(--rm-ico-chat) center/contain no-repeat;
            mask:var(--rm-ico-chat) center/contain no-repeat;}
}

/* ══ 모바일 공통 하단바 (<=1023) ════════════════════════ */
.pub-root .rm-cbar{display:none;}
.pub-root .rm-cbar__space{display:none;}

@media (max-width:1023px){
  .pub-root .rm-cbar{display:block;
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
    background:var(--pub-bg);
    box-shadow:0 -4px 18px rgba(30,23,35,.08);
    /* 아이폰 홈 인디케이터와 버튼이 겹치지 않게 한다. */
    padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));}
  .pub-root .rm-cbar__act{display:flex;align-items:stretch;gap:var(--s2);
    width:100%;max-width:520px;margin:0 auto;}

  /*
   * 고정 바라 문서 흐름에서 빠진다.
   * 이 여백이 없으면 페이지 마지막 내용이 영구히 가려진다.
   *
   * 높이를 바와 같은 식으로 계산한다 (PATCH-008 · P0-C).
   *
   * 이전에는 96px 고정이었다. 실제 바 높이와 달랐다.
   *   390px  바 80px · 여백 96px  → 16px 남음
   *   320px  바 74px · 여백 96px  → 22px 남음
   *   safe-area 가 큰 기기에서는 반대로 모자랄 수 있다.
   *
   * 바는 padding + 버튼 높이로 만들어진다.
   * 같은 값을 더해 두면 화면 크기나 safe-area 가 달라져도 함께 따라온다.
   *   위아래 padding  var(--s3) * 2
   *   버튼 높이       var(--rm-fbtn-h)   좁은 화면에서 함께 줄어든다
   *   safe-area       env(safe-area-inset-bottom)
   */
  .pub-root .rm-cbar__space{display:block;
    height:calc(var(--s3) * 2 + var(--rm-fbtn-h) + env(safe-area-inset-bottom));}

  /*
   * 제품 상세에서는 공통바를 끈다. 가격 dock 이 그 역할을 대신한다.
   * 둘이 같이 뜨면 화면 아래가 두 겹으로 막힌다.
   *
   * 끄는 규칙을 이 파일 안에 둔다.
   *   상세 CSS 에 두면 로드 순서에 따라 여기 display:block 이 나중에 와서 이긴다.
   *   실제로 그렇게 만들었다가 두 바가 함께 뜨는 것을 실측으로 확인했다.
   * 상세 View 가 .pub-root 에 data-pd-page 를 달고 여기서 그것을 본다.
   */
  /*
   * [BASELINE UPDATE · PUBLIC-DOCK-UNIFY-001] 인터넷 요금제 화면도 같다.
   * 그 화면이 자기 바(.ip__bar · 금액 + 버튼)를 갖게 되어 공통바를 끈다.
   * 끄는 규칙을 화면 CSS 에 두지 않는 이유는 위와 같다 — 한 곳에 모아 둔다.
   */
  .pub-root[data-pd-page] .rm-cbar,
  .pub-root[data-pd-page] .rm-cbar__space,
  .pub-root[data-ip-page] .rm-cbar,
  .pub-root[data-ip-page] .rm-cbar__space{display:none;}

  /*
   * 메뉴가 열리면 하단 바를 감춘다 (DESIGN-REFINEMENT).
   *
   * 메뉴 패널은 z-index 300, 바는 200 이라 순서는 맞지만
   * 바가 자기 stacking context 를 만들어 패널 위로 올라온다.
   * 메뉴를 보는 동안 바가 화면 아래를 가리면
   * 브랜드 목록 끝이 그 뒤로 숨는다.
   *
   * 카탈로그 필터 시트(data-sheet-open)도 같다.
   *   시트가 열리면 오버레이가 배경을 덮는데 바만 그 위로 올라와
   *   "필터 적용" 버튼을 가렸다.
   * 닫으면 다시 나온다. 상담 진입은 메뉴 안에도 있다.
   */
  .pub-root[data-menu-open] .rm-cbar,
  .pub-root[data-sheet-open] .rm-cbar{display:none;}

  /*
   * 여백은 문서 맨 끝에 둔다.
   * content 안에 두면 푸터가 그 아래로 와서 마지막 줄이 여전히 가린다(실측 -131px).
   * 상세는 dock 이 공통바보다 높으므로 여백도 더 크다.
   *
   * 높이는 dock 실측(155px, 카드 할인가 줄 포함) + 여유로 잡는다.
   * 150px 로 두었더니 dock 보다 5px 작아 마지막 줄이 아슬아슬했다.
   * safe-area 가 큰 단말에서는 dock 이 더 높아지므로 여유가 필요하다.
   */
  /*
   * 값을 변수로 둔다 (§8).
   * AI 버튼도 이 높이를 넘겨야 dock 을 가리지 않는다.
   * 두 곳에 같은 숫자를 적어 두면 한쪽만 고쳤을 때 어긋난다.
   */
  .pub-root[data-pd-page]{--rm-dock-h:184px;}
  /*
   * [CONTRACT ADD · PUBLIC-DOCK-UNIFY-001] 인터넷 바 높이.
   * 금액 줄이 하나라 상세보다 낮다. 값은 실측으로 정한다(추정하지 않는다).
   *   390px 크로미움 실측 127px (safe-area 0).
   *   상세와 같은 방식으로 여유를 더한다 — 상세는 실측 155 에 184 를 썼다(+29).
   *   safe-area 가 큰 단말에서는 바가 더 높아지므로 여유가 필요하다.
   */
  .pub-root[data-ip-page]{--rm-dock-h:156px;}
  .pub-root[data-pd-page] .pd-dock__space{display:block;height:var(--rm-dock-h);}
}

/* 공용 플로팅 버튼 — 공통바와 상세 dock 이 같은 규격을 쓴다 */
/*
 * 버튼 높이를 변수로 둔다 (PATCH-008 · P0-C).
 * 하단 고정바 여백(.rm-cbar__space)이 이 값을 그대로 쓴다.
 * 숫자를 두 곳에 적으면 한쪽만 바뀌어 본문 끝이 가려진다.
 */
.pub-root{--rm-fbtn-h:56px;}

/*
 * padding:0 이 필요하다.
 *   <button> 의 브라우저 기본 padding(1px 6px)이 남아 있으면
 *   flex-basis:0 에 그 padding 이 더해져 <a> 와 폭이 어긋난다.
 *   실측: 카카오(a) 169px vs 상담신청(button) 181px — 정확히 좌우 6px×2.
 *   높이는 height 로 고정하고 안쪽은 flex 가운데 정렬이라 padding 이 필요 없다.
 */
.pub-root .rm-fbtn{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  height:var(--rm-fbtn-h);padding:0;border:0;border-radius:var(--r2);cursor:pointer;
  font-family:inherit;font-size:var(--fs-label);font-weight:var(--fw-b);
  letter-spacing:var(--tr-2);}
.pub-root .rm-fbtn:hover{text-decoration:none;}
.pub-root .rm-fbtn:active{transform:translateY(1px);}

/*
 * [COUNSEL-FSITE-CTA-CLEANUP-001] 두 버튼 1:1 (00 결정 2026-10-13).
 *
 * 전에는 카카오·전화·AI 가 56px 정사각이고 상담신청이 남는 폭 전부였다.
 * 이제 카카오톡 상담 · 상담 신청 둘뿐이라 폭을 반씩 나눈다.
 *
 * flex:1 1 0 으로 **기준폭 0** 에서 똑같이 나눈다. 1 1 auto 가 아니다 —
 * auto 는 글자 길이를 기준으로 삼아 「카카오톡 상담」과 「상담 신청」의
 * 폭이 글자 수만큼 어긋난다.
 * min-width:0 이 없으면 긴 라벨이 flex 축소를 막아 넘친다.
 *
 * 카카오가 없으면 상담신청 하나가 flex:1 로 한 줄 전체를 쓴다(fail-soft).
 */
.pub-root .rm-fbtn--kakao{flex:1 1 0;min-width:0;background:#FEE500;}
.pub-root .rm-fbtn--kakao:hover{filter:brightness(.95);}
.pub-root .rm-fbtn[hidden]{display:none;}

/* 주 CTA. 카카오와 같은 몫을 쓰되 이 바에서 유일한 accent 다.
   본문 .btn--primary 와 같은 그라데이션을 쓴다. */
.pub-root .rm-fbtn--primary{flex:1 1 0;min-width:0;
  background:linear-gradient(100deg,var(--pub-accent-grad) 0%,var(--pub-accent) 100%);
  color:var(--pub-on-accent);}
.pub-root .rm-fbtn--primary:hover{filter:brightness(.93);}

@media (max-width:359px){
  /* 변수를 바꾼다. spacer 가 함께 따라온다.
     폭은 이제 1:1 로 나누므로 고정값을 주지 않는다. */
  .pub-root{--rm-fbtn-h:50px;}
}


/* ══ 상담 모달 (BETA) ═══════════════════════════════════
 * 이전에는 넥센 counsel.html 이 스타일까지 제공했다.
 * 그 파일이 없으면 모달이 아예 렌더되지 않아 상담 신청이 죽는다.
 * shell 을 코드 안으로 옮기면서 스타일도 여기서 정의한다.
 *
 * z-index 는 레거시와 같은 값을 쓴다.
 * 다른 사이트 자산이 같은 화면에 섞일 수 있고, 그때 순서가 어긋나면 안 된다.
 */
.pub-root .counsel_win{display:none;position:fixed;left:0;top:0;
  width:100%;height:100%;z-index:2147483000;
  background:rgba(23,26,35,.45);}
.pub-root .counsel_win.on{display:block;}

.pub-root .counsel_win__inner{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:710px;max-width:calc(100vw - 24px);
  height:720px;max-height:calc(100vh - 24px);
  background:var(--pub-bg);border-radius:var(--r2);
  box-shadow:0 14px 40px rgba(23,26,35,.3);overflow:hidden;}
.pub-root .counsel_win__inner iframe{width:100%;height:100%;border:0;display:block;}

/* 모바일은 전체화면. 작은 화면에서 가운데 박스는 여백만 먹는다. */
@media (max-width:640px){
  .pub-root .counsel_win__inner{left:0;top:0;transform:none;
    width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0;}
}

/* 닫기 X. 아이콘 파일 없이 가상 요소로 그린다. */
.pub-root .counsel_win__close{position:absolute;right:8px;top:8px;z-index:5;
  width:44px;height:44px;padding:0;border:0;border-radius:var(--r-pill);
  background:transparent;cursor:pointer;}
.pub-root .counsel_win__close:hover{background:var(--pub-bg-3);}
.pub-root .counsel_win__close::before,
.pub-root .counsel_win__close::after{content:"";position:absolute;left:50%;top:50%;
  width:18px;height:2px;background:var(--pub-ink);border-radius:2px;
  transform:translate(-50%,-50%) rotate(45deg);}
.pub-root .counsel_win__close::after{transform:translate(-50%,-50%) rotate(-45deg);}

/* 모달이 열리면 배경 스크롤을 막는다.
   막지 않으면 모달 뒤 페이지가 같이 움직여 어디를 보는지 알기 어렵다. */
.rm-modal-open,
.rm-modal-open body{overflow:hidden;}

/* ══ 개인정보 팝업 (BETA) ════════════════════════════════
 * PC 빠른 상담 iframe 이 [자세히보기] 를 누르면 부모가 연다.
 * 상담 모달보다 위에 온다. 모달 위에서도 열릴 수 있다.
 */
.pub-root .rm-policy{position:fixed;left:0;top:0;width:100%;height:100%;
  z-index:2147483001;background:rgba(23,26,35,.45);
  display:flex;align-items:center;justify-content:center;padding:var(--s4);}
.pub-root .rm-policy[hidden]{display:none;}

.pub-root .rm-policy__inner{width:520px;max-width:100%;
  max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  background:var(--pub-bg);border-radius:var(--r2);
  box-shadow:0 14px 40px rgba(23,26,35,.3);overflow:hidden;}

.pub-root .rm-policy__head{display:flex;align-items:center;
  justify-content:space-between;gap:var(--s3);
  padding:var(--s5) var(--s5) var(--s4);
  border-bottom:1px solid var(--pub-line);}
.pub-root .rm-policy__t{font-size:var(--fs-subtitle);font-weight:var(--fw-b);
  color:var(--pub-ink);}
.pub-root .rm-policy__close{position:relative;flex:0 0 auto;
  width:44px;height:44px;padding:0;border:0;border-radius:var(--r-pill);
  background:transparent;cursor:pointer;}
.pub-root .rm-policy__close:hover{background:var(--pub-bg-3);}
.pub-root .rm-policy__close::before,
.pub-root .rm-policy__close::after{content:"";position:absolute;left:50%;top:50%;
  width:16px;height:2px;background:var(--pub-ink-2);border-radius:2px;
  transform:translate(-50%,-50%) rotate(45deg);}
.pub-root .rm-policy__close::after{transform:translate(-50%,-50%) rotate(-45deg);}

.pub-root .rm-policy__body{padding:var(--s5);overflow-y:auto;}
.pub-root .rm-policy__body dl{display:grid;grid-template-columns:auto 1fr;
  gap:var(--s2) var(--s5);margin:0;}
.pub-root .rm-policy__body dt{font-size:var(--fs-caption);font-weight:var(--fw-sb);
  color:var(--pub-ink-3);white-space:nowrap;}
.pub-root .rm-policy__body dd{margin:0;font-size:var(--fs-label);color:var(--pub-ink);}
.pub-root .rm-policy__note{margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--pub-line);
  font-size:var(--fs-caption);color:var(--pub-ink-3);line-height:1.7;}

/* 꼭 읽어야 하는 문단 (RC3).
   "상담 신청만으로 계약이 체결되지 않는다" 같은 내용이다.
   정책 페이지의 .pol__mark 와 같은 역할이며 팝업 밀도에 맞춘 값이다. */
.pub-root .rm-policy__mark{margin-top:var(--s4);padding:var(--s3) var(--s4);
  border-left:3px solid var(--pub-accent);border-radius:0 var(--r1) var(--r1) 0;
  background:var(--pub-accent-bg);
  font-size:var(--fs-caption);color:var(--pub-ink);line-height:1.7;}

/* ══ PC 빠른 상담 폼 (BETA) ══════════════════════════════
 * 한 줄 폼 iframe. 레퍼런스와 같은 높이(96px)를 쓴다.
 * 폼 내용이 그 높이에 맞춰 만들어져 있어 임의로 줄이면 잘린다.
 */
/*
 * 폼 자체를 기본 숨김으로 둔다.
 *
 * 부모(.rm-fastbar)가 <1024 에서 display:none 이라 화면에는 안 보이지만
 * iframe 은 그대로 로드된다. 모바일에서 쓰지도 않는 외부 폼을
 * 매번 받아오는 것은 낭비다.
 */
.pub-root .rm-fastbar__form{display:none;}

@media (min-width:1024px){
  /*
   * 폼 폭·정렬 (PATCH-007 · P1).
   *
   * 이전에는 max-width:760px 과 margin:0 var(--s5) 를 함께 줬다.
   *   컨테이너 오른쪽 끝에서 52px 이 떠 본문 정렬선과 어긋났다(실측).
   *   제목 왼쪽은 container padding 에 맞는데 폼 오른쪽만 안쪽으로 밀린 모양이다.
   *
   * 오른쪽 margin 을 없앤다. 폼이 컨테이너 오른쪽 끝에 맞는다.
   * 왼쪽은 제목과 붙지 않게 간격을 남긴다.
   *
   * max-width 를 올린다. 760px 은 1280 container 기준으로 좁아
   * 폼 안 입력칸이 눌린다. 컨테이너가 넓어진 만큼 함께 넓힌다.
   */
  /*
   * 폼 폭 (DESIGN-REFINEMENT).
   *
   * 900px 은 내부 폼에 비해 넓었다.
   *   외부 상담폼은 고객명·연락처·버튼을 왼쪽부터 채우고
   *   남는 자리를 그대로 비운다. 900 에서는 연락처와 버튼 사이가
   *   314px 벌어져 입력칸이 왼쪽에 몰려 보였다(실측).
   *
   * 800px 로 줄인다.
   *   767px 아래로 내리면 외부 폼이 모바일 배치로 바뀌어
   *   높이가 85 → 181px 이 된다. 그 선을 넘지 않는다.
   *
   * 오른쪽 끝 정렬은 그대로다. 폼이 좁아지면서 제목과 사이가 벌어지고
   * 입력 묶음이 카드 오른쪽으로 붙는다.
   *
   * 폭을 768px 로 맞춘다.
   *
   * 외부 상담폼은 767px 이하에서 세로 2줄 배치로 바뀐다.
   * 620px 로 줄여 봤더니 입력칸이 두 줄이 되어 되돌렸다(실측).
   *
   * 768px 이 한 줄을 유지하는 최소값이다.
   * 폼을 더 줄일 수 없으므로 카드 안쪽 여백으로 숨을 준다.
   */
  /*
   * 폼 폭 768px.
   *
   * 외부 상담폼이 767px 이하에서 세로 2줄로 바뀌므로 그 위로 둔다.
   * 안쪽 배치는 외부 파일이 담당한다. 여기서 위치를 보정하지 않는다.
   */
  .pub-root .rm-fastbar__form{display:block;flex:0 0 auto;
    width:768px;max-width:100%;margin:0 0 0 auto;}
  .pub-root .rm-fastbar__form iframe{display:block;width:100%;height:96px;
    border:0;overflow:hidden;}

  /*
   * 폼이 들어가면 바가 높아진다.
   * 변수를 올리면 spacer 와 side float 이 함께 따라온다.
   *
   * :has() 를 쓰지 않는다. 구형 브라우저에서 규칙 전체가 무시돼
   * side float 이 다시 fastbar 아래로 들어간다.
   * 서버가 폼 유무를 이미 아므로 body 표식으로 정한다.
   */
  .pub-root[data-fastform]{--rm-fastbar-h:112px;}

  /*
   * 좁은 PC 높이 분기는 두지 않는다.
   *
   * 폼을 700px 로 고정했으므로 화면 폭이 줄어도 내부 배치가 바뀌지 않는다.
   * 외부 폼이 두 줄로 무너지는 것은 750px 아래이고, 거기까지 내려가지 않는다.
   * iframe 높이 96px 하나로 충분하다.
   */

  /*
   * 1200px 아래에서는 제목을 줄인다.
   *
   * 제목 265 + 간격 24 + 폼 768 = 1057 이 필요하다.
   * 1152 화면은 카드 안쪽이 1040px 이라 17px 넘쳤고
   * 1024 에서는 912px 이라 57px 넘쳤다(실측).
   * 여유를 두고 1200 을 경계로 잡는다.
   *
   * 폼을 줄이면 외부 상담폼이 700px 를 못 채워 다시 어긋난다.
   * 제목 글자를 한 단계 낮춰 자리를 만든다.
   * 전화번호는 그대로 둔다. 상담 안내에서 번호가 먼저다.
   */
  /*
   * 좁은 PC 에서는 폼이 줄어든다.
   *
   * 제목을 줄이거나 감추는 방식을 썼다가 되돌렸다.
   *   1024 에서 "빠른 렌탈 상담" 이 사라져 무엇을 신청하는 화면인지
   *   알 수 없게 됐다.
   *
   * padding 을 56px 로 올리면서 1220 화면에서 13px 넘쳤다. 경계를 1260 으로 잡는다.
   * 폼이 768px 아래로 내려가면 외부 상담폼이 2줄로 바뀐다.
   * 그때는 카드가 높아지므로 iframe 높이를 함께 연다.
   * 글자를 감추는 것보다 카드가 조금 높은 편이 낫다.
   */
  /*
   * 좁은 화면에서는 폼이 줄어든다.
   *
   * 상한 768px 을 둔다. padding-right 가 0 이라 그것 없이는
   * 폼이 오히려 커져 카드를 넘는다(실측 1240 에서 831px).
   *
   * 768px 아래로 내려가면 외부 폼이 2줄이 되므로 높이를 함께 연다.
   * 제목은 줄이지 않는다. 전화번호가 사라지면 안 된다.
   */
  /*
   * 좁은 화면에서는 폼이 줄어든다. 2줄이 되므로 높이를 함께 연다.
   *
   * 1200 화면은 카드 안쪽이 1024px 인데 제목 265 + 간격 + 폼 768 이
   * 그보다 커서 버튼이 카드 여백선을 넘었다(실측 우여백 23px).
   * 1240 을 경계로 잡는다.
   */
  @media (max-width:1239px){
    .pub-root .rm-fastbar__form{width:auto;flex:1 1 auto;min-width:0;
      max-width:768px;}
    .pub-root .rm-fastbar__form iframe{height:190px;}
    .pub-root[data-fastform]{--rm-fastbar-h:206px;}
  }

}

/* ── 최근 본 제품 (PATCH-002) ────────────────────────────
 * side float 아래에 붙는다. PC 전용이다.
 * 모바일에는 넣지 않는다. 화면이 좁아 하단 바만으로도 충분히 가린다.
 *
 * 서버는 hidden 으로 내려보내고 JS 가 항목을 채운 뒤에만 연다.
 * 저장된 것이 없는 사용자에게 빈 상자를 보여 주지 않는다.
 */
@media (min-width:1024px){
  .pub-root .rm-side__recent{flex:0 0 auto;
    margin-top:var(--s2);padding:var(--s2) 0;
    border-radius:var(--r2);background:var(--pub-bg);
    box-shadow:0 4px 14px rgba(23,26,35,.14),inset 0 0 0 1px var(--pub-line);}
  .pub-root .rm-side__recent[hidden]{display:none;}

  .pub-root .rm-side__recent-t{margin:0 0 var(--s2);text-align:center;
    font-size:10.5px;line-height:1.3;font-weight:var(--fw-sb);color:var(--pub-ink-3);}

  .pub-root .rm-side__recent-list{display:flex;flex-direction:column;
    align-items:center;gap:var(--s2);margin:0;padding:0;list-style:none;}

  .pub-root .rm-side__recent-a{display:block;width:44px;height:44px;
    border-radius:var(--r1);overflow:hidden;background:var(--pub-bg-3);}
  .pub-root .rm-side__recent-a img{width:100%;height:100%;object-fit:cover;display:block;}
  .pub-root .rm-side__recent-a:hover{outline:2px solid var(--pub-accent);outline-offset:1px;}
  .pub-root .rm-side__recent-ph{display:block;width:100%;height:100%;
    background:var(--pub-bg-3);}
}

/* ═══════════════════════════════════════════════════════════════
   AI 상담 런처 — [AI-SIDE-LAUNCHER-RESTORE-001] 복원 (00 결정 2026-10-13 13:14)

   COUNSEL-FSITE-CTA-CLEANUP-001 이 걷었던 **사이드패널 버튼**을 되돌린다.
   00 이 「사이드패널에 있는 건 남겼어야 한다」고 정정했다.

   되살리는 것   .rm-side__btn--ai   PC 사이드바 안 · 모바일 원형 플로팅
   그대로 두는 것 .rm-fbtn--ai        하단 바 AI 버튼은 **빼둔 채로**
                                      → 카카오 : 상담신청 1:1 분할이 유지된다

   규칙은 제거 전(v1.1.5) 바이트를 그대로 가져왔다. 다시 타이핑하지 않았다.
   의존 토큰(--rm-fbtn-h · --rm-dock-h · --gutter · --s3)은 v1.1.7 에도 그대로 있어
   DOCK-UNIFY 가 바꾼 dock 높이(184/156px)를 버튼이 자동으로 따라간다.
   ═══════════════════════════════════════════════════════════════ */

@keyframes rmAiSpin{ to{ transform:rotate(360deg) } }

/* ── PC (>=1024px) — 사이드바 안, 상담신청 아래 ────────────── */
@media (min-width:1024px){
  .pub-root .rm-side__btn--ai{
    position:relative;
    background:var(--rm-ai-bg);
    color:#fff;
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 4px 14px rgba(43,58,143,.30),inset 0 0 0 1px rgba(255,255,255,.10);
  }
  .pub-root .rm-side__btn--ai .rm-side__ico{
    background:#fff;
    -webkit-mask:var(--rm-ico-ai) center/contain no-repeat;
            mask:var(--rm-ico-ai) center/contain no-repeat;
  }
  .pub-root .rm-side__btn--ai:hover{
    box-shadow:0 8px 20px rgba(43,58,143,.42),inset 0 0 0 1px rgba(255,255,255,.14);
  }
  .pub-root .rm-side__btn--ai::before{
    content:"";
    position:absolute;
    inset:-60%;
    z-index:-2;
    background:conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 250deg,
      var(--rm-ai-bg2) 312deg,
      #AEB8FF 342deg,
      #ffffff 356deg,
      transparent 360deg);
    animation:rmAiSpin 2.8s linear infinite;
  }
  .pub-root .rm-side__btn--ai::after{
    content:"";
    position:absolute;
    inset:2px;                              /* 테두리 두께 */
    z-index:-1;
    border-radius:calc(var(--r2) - 2px);
    background:var(--rm-ai-bg);
  }
}

/* ── 모바일 (<=1023px) — 하단바 위 원형 플로팅 ──────────────
   사이드바는 모바일에서 숨는 것이 기본이다(.rm-side{display:none}).
   이 버튼 하나만 보여야 하는데, 부모가 none 이면 자식도 안 보인다.
   그래서 사이드바를 **0×0 투명 상자**로만 살려 두고 버튼은 fixed 로 화면에 직접 붙인다.
   빈 상자가 화면을 막지 않도록 pointer-events 는 버튼에서만 되살린다. */
@media (max-width:1023px){
  .pub-root .rm-side,
  .pub-root .rm-side[hidden]{
    display:block !important;
    position:fixed;
    width:0; height:0;
    padding:0; margin:0;
    overflow:visible;
    pointer-events:none;
    z-index:var(--z-sticky);
  }
  /* AI 를 뺀 나머지 버튼은 모바일에서 숨긴다 (하단바가 대신한다) */
  .pub-root .rm-side > *:not(.rm-side__btn--ai){ display:none !important }

  .pub-root .rm-side__btn--ai{
    display:grid !important;
    place-items:center;
    pointer-events:auto;      /* 이 버튼만 눌리게 */

    position:fixed;
    right:var(--gutter, 16px);
    /* 하단바 높이 + 여백만큼 띄운다.
       화면이나 기기가 달라져도 함께 따라온다. */
    bottom:calc(var(--s3, 12px) * 2 + var(--rm-fbtn-h, 56px)
                + env(safe-area-inset-bottom) + 14px);

    width:56px;
    height:56px;
    min-height:0;
    padding:0;
    border:0;
    border-radius:50%;
    cursor:pointer;

    background:var(--rm-ai-bg);
    color:#fff;
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 6px 18px rgba(43,58,143,.34);
  }
  .pub-root .rm-side__btn--ai .rm-side__ico{
    width:24px; height:24px;
    background:#fff;
    -webkit-mask:var(--rm-ico-ai) center/contain no-repeat;
            mask:var(--rm-ico-ai) center/contain no-repeat;
  }
  /* 동그란 버튼이라 글자가 들어갈 자리가 없다. 아이콘만 보인다. */
  .pub-root .rm-side__btn--ai .rm-side__lb{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }

  .pub-root .rm-side__btn--ai::before{
    content:"";
    position:absolute;
    inset:-60%;
    z-index:-2;
    background:conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 250deg,
      var(--rm-ai-bg2) 312deg,
      #AEB8FF 342deg,
      #ffffff 356deg,
      transparent 360deg);
    animation:rmAiSpin 2.8s linear infinite;
  }
  .pub-root .rm-side__btn--ai::after{
    content:"";
    position:absolute;
    inset:2px;
    z-index:-1;
    border-radius:50%;
    background:var(--rm-ai-bg);
  }

  /*
   * 제품 상세는 공통 하단바가 꺼지고 가격 dock 이 대신 뜬다.
   * spacer 와 같은 --rm-dock-h 를 본다. 한쪽만 바뀌는 일이 없다.
   * DOCK-UNIFY 가 이 값을 184 → 156px 로 좁히는 구간을 더했는데,
   * 토큰을 읽으므로 버튼이 함께 따라온다.
   */
  .pub-root[data-pd-page] .rm-side__btn--ai{
    bottom:calc(var(--rm-dock-h, 184px)
                + env(safe-area-inset-bottom) + var(--s3, 12px));
  }
}

/* 화면 움직임을 줄이도록 설정하신 분께는 돌리지 않습니다 */
@media (prefers-reduced-motion:reduce){
  .pub-root .rm-side__btn--ai::before{ animation:none }
}


/* ═══════════════════════════════════════════════════════════════
   AI 채팅 패널 (D-PUBLIC-AI-SIDEPANEL-DRAWER-ONLY-01)

   PC(>=1024px) 전용 drawer. 모바일은 기존 overlay 그대로다.

   ── 왜 drawer 하나뿐인가 ────────────────────────────────
   본문 옆에 나란히 두려면(adjacent) 이만큼이 필요하다.

     겹침 0 조건   AI.left >= 상세 우측 패널.right
                   vw - 510 >= (vw + 1280) / 2 - 32
                   vw >= 2236

   container 가 1280px 에서 멈추고 가운데 정렬되므로
   화면을 넓혀도 오른쪽 여백은 절반씩만 늘어난다.
   그래서 2236px 아래에서는 상품상세 가격·CTA 를 반드시 덮는다.
   실측: 1440px 에서 95%, 1920px 에서 38% 침범.

   2236px 은 일반 데스크톱 폭이 아니다.
   쓰이지 않을 분기를 남기면 다음 사람이 잘못된 가정을 한다.
   그래서 모드를 하나로 둔다.

     >= 1024px    drawer   본문 위에 얹힌다 · 사이드바는 안 덮는다
     <  1024px    overlay  기존 모바일 계약

   drawer 는 본문을 가리지만 폭을 줄이거나 재배치하지 않는다.
   사이드바 · TOP · 카카오톡 · 상담 · 최근 본 제품은 계속 쓸 수 있다.
   전체 화면 modal 이 아니고 backdrop 도 깔지 않는다.
   ═══════════════════════════════════════════════════════════════ */

/* 모바일에서는 만들지 않지만, 만들어져도 보이지 않게 막아 둔다. */
.pub-root .rm-aipanel{display:none;}

@media (min-width:1024px){
  /*
   * 위치는 사이드바 실측에서 계산한다.
   *   사이드바 right   20px  (--s5)
   *   사이드바 width   76px
   *   사이 간격        14px
   *   ────────────────────────
   *   패널 right      110px
   *
   * 고정 숫자를 박지 않고 변수로 둔다.
   * 사이드바 폭이 다시 바뀌면 한 곳만 고치면 된다.
   */
  .pub-root{
    --rm-side-w:76px;
    --rm-aip-gap:14px;
    --rm-aip-w:400px;
  }

  .pub-root .rm-aipanel{
    display:flex;flex-direction:column;
    position:fixed;
    right:calc(var(--s5) + var(--rm-side-w) + var(--rm-aip-gap));
    bottom:calc(var(--rm-fastbar-h) + var(--s5));
    /*
     * 좁으면 폭을 줄인다. 사이드바와 좌우 여백을 뺀 나머지가 상한이다.
     * 하한 320px 은 대화가 읽히는 최소 폭이다.
     */
    width:clamp(320px, var(--rm-aip-w),
                calc(100vw - var(--s5) - var(--rm-side-w) - var(--rm-aip-gap) - var(--s5)));
    height:min(720px, calc(100vh - var(--rm-fastbar-h) - 64px - var(--s8)));
    border-radius:var(--r2);
    background:var(--pub-bg);
    /* 본문 위에 얹히므로 그림자를 진하게 준다. 떠 있는 것임이 보여야 한다. */
    box-shadow:0 16px 48px rgba(23,26,35,.28),inset 0 0 0 1px var(--pub-line-2);
    overflow:hidden;
    /* 사이드바(--z-sticky)보다 아래. 사이드바를 덮지 않는다. */
    z-index:calc(var(--z-sticky) - 1);
  }

  .pub-root .rm-aipanel__bar{flex:0 0 auto;
    display:flex;align-items:center;justify-content:space-between;
    height:48px;padding:0 var(--s3) 0 var(--s4);
    border-bottom:1px solid var(--pub-line);}
  .pub-root .rm-aipanel__t{font-size:var(--fs-label);font-weight:var(--fw-b);
    color:var(--pub-ink);}
  .pub-root .rm-aipanel__x{position:relative;display:grid;place-items:center;
    width:36px;height:36px;padding:0;border:0;border-radius:var(--r1);
    background:transparent;cursor:pointer;}
  .pub-root .rm-aipanel__x:hover{background:var(--pub-bg-2);}
  .pub-root .rm-aipanel__x::before,
  .pub-root .rm-aipanel__x::after{content:"";position:absolute;
    width:15px;height:1.5px;background:var(--pub-ink-2);border-radius:1px;}
  .pub-root .rm-aipanel__x::before{transform:rotate(45deg);}
  .pub-root .rm-aipanel__x::after{transform:rotate(-45deg);}
  .pub-root .rm-aipanel iframe{flex:1 1 auto;min-height:0;}
}