/* 렌탈마켓 공개 기초 — reset · 타이포 · 레이아웃 · 헤더 · 푸터 */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--pub-bg);color:var(--pub-ink);
  font-family:var(--pub-font);font-size:var(--fs-body);line-height:var(--lh-body);
  letter-spacing:var(--tr-2);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /*
   * 가로 넘침을 막되 세로 스크롤 컨테이너를 만들지 않는다.
   *
   * overflow-x:hidden 만 주면 브라우저가 overflow-y 를 auto 로 바꾼다.
   * body 가 스크롤 컨테이너가 되면 그 안의 sticky 헤더가
   * 화면이 아니라 body 기준으로 붙어 위로 따라 올라간다(실측).
   *
   * clip 은 잘라내기만 하고 스크롤 컨테이너를 만들지 않는다.
   * 미지원 브라우저는 아래 hidden 을 쓴다. 그때는 기존 동작 그대로다.
   */
  overflow-x:hidden;
  overflow-x:clip;}
.pub-root img{max-width:100%;display:block;}
.pub-root a{color:inherit;text-decoration:none;}
.pub-root a:hover{text-decoration:underline;}
.pub-root button,.pub-root input,.pub-root select,.pub-root textarea{font:inherit;font-family:var(--pub-font);color:inherit;letter-spacing:inherit;}
.pub-root input,.pub-root select,.pub-root textarea{font-size:var(--fs-control);}
.pub-root h1,.pub-root h2,.pub-root h3,.pub-root h4,.pub-root p,.pub-root dl,.pub-root dd,.pub-root figure,.pub-root ul,.pub-root ol{margin:0;padding:0;}
.pub-root ul,.pub-root ol{list-style:none;}
.pub-root table{border-collapse:separate;border-spacing:0;}
.pub-root :focus-visible{outline:2px solid var(--pub-accent-brand);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
.pub-root .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.pub-root [hidden]{display:none!important;}

/* 타이포 역할 */
.pub-root .t-display{font-size:var(--fs-display);font-weight:var(--fw-b);line-height:var(--lh-tight);letter-spacing:var(--tr-3);}
.pub-root .t-title{font-size:var(--fs-title);font-weight:var(--fw-b);line-height:var(--lh-tight);letter-spacing:var(--tr-3);}
.pub-root .t-section{font-size:var(--fs-section);font-weight:var(--fw-b);line-height:var(--lh-tight);letter-spacing:var(--tr-2);}
.pub-root .t-subtitle{font-size:var(--fs-subtitle);font-weight:var(--fw-sb);letter-spacing:var(--tr-2);}
.pub-root .t-label{font-size:var(--fs-label);color:var(--pub-ink-3);letter-spacing:var(--tr-1);}
.pub-root .t-caption{font-size:var(--fs-caption);color:var(--pub-ink-3);letter-spacing:var(--tr-1);line-height:1.55;}

/* 레이아웃 — 배경은 흰색으로 통일한다(푸터 제외) */
.pub-root .container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);}
.pub-root .section{padding-block:var(--s12);}
@media (min-width:768px){ .pub-root .section{padding-block:var(--s18);} }
.pub-root .section--tight{padding-block:var(--s14);}

/* 헤더 — 1차 탐색축은 브랜드 */
/*
 * 헤더를 화면 위에 붙인다 (DESIGN-REFINEMENT).
 *
 * 모바일 메뉴 패널이 fixed 라 헤더도 함께 고정돼야
 * 스크롤 중에 메뉴를 닫을 자리가 남는다.
 * 헤더가 올라가 버리면 열린 메뉴를 닫을 버튼이 사라진다.
 */
.pub-root .hd{position:sticky;top:0;z-index:var(--z-header);
  background:var(--pub-bg);border-bottom:1px solid var(--pub-line);}
/*
 * 스크롤되면 헤더 아래에 옅은 그림자를 둔다.
 *
 * 선 하나만으로는 본문이 헤더 밑을 지나는 느낌이 약했다.
 * animation-timeline 을 지원하지 않는 브라우저는 선만 남는다.
 * 기능에는 영향이 없다.
 */
@supports (animation-timeline: scroll()){
  .pub-root .hd{animation:hd-shadow linear both;
    animation-timeline:scroll();animation-range:0 60px;}
  @keyframes hd-shadow{
    from{box-shadow:0 0 0 rgba(30,23,35,0);}
    to{box-shadow:0 2px 12px rgba(30,23,35,.08);}
  }
}
/*
 * 스크롤 방향에 따라 헤더를 감춘다 (PUBLIC-SHELL-POLISH-001).
 *
 *   아래로 내린다 = 내용을 읽는 중 → 자리를 비킨다
 *   위로 올린다   = 메뉴·검색을 찾는 중 → 바로 돌아온다
 *
 * 손가락과 마우스가 같은 규칙으로 동작한다. 터치에만 없는 hover 에 기대지 않는다.
 *
 * ★ 위 DESIGN-REFINEMENT 메모와의 관계
 *   «헤더가 올라가 버리면 열린 메뉴를 닫을 버튼이 사라진다» 는 그대로 유효하다.
 *   그래서 **메뉴·검색이 열려 있는 동안에는 숨기지 않는다.** JS 가 그 조건을 지킨다.
 *
 * ★ transform 을 쓰는 이유와 주의점
 *   top 을 움직이면 sticky 계산과 싸운다. transform 은 레이아웃을 건드리지 않는다.
 *   다만 transform 이 걸린 요소는 그 안의 position:fixed 자식의 기준점이 된다.
 *   모바일 메뉴 패널(public-shell.css 소유)이 fixed 이고 헤더 안에 있으므로,
 *   숨긴 상태에서 패널이 열리면 기준이 어긋난다.
 *   (이 파일에는 shell 선택자를 적지 않는다 — 소유 분리를 harness 가 고정한다.)
 *   숨김은 **메뉴가 닫혀 있을 때만** 걸리고, 메뉴가 열리는 순간 JS 가 먼저 헤더를 보여 준다.
 *   그래서 둘이 동시에 성립하지 않는다.
 *
 * JS 가 없으면 data-hd-away 가 붙지 않아 지금과 똑같이 늘 보인다.
 * 모션 최소화 설정은 위 전역 규칙(@media prefers-reduced-motion)이 transition 을 꺼서 즉시 전환된다.
 */
.pub-root .hd{transition:transform .22s ease;}
.pub-root[data-hd-away] .hd{transform:translateY(-100%);}
/*
 * 전환을 끊는 상태 (실측으로 찾은 틈).
 *
 * 돌아오는 0.22초 동안에는 transform 이 아직 남아 있다(실측: matrix(...,-6.8)).
 * 그 순간 메뉴를 열면 fixed 패널의 기준점이 헤더가 되어 위치가 어긋난다.
 * 메뉴가 열리는 순간 JS 가 이 표식을 붙여 전환을 끊고 즉시 제자리로 보낸다.
 * 한 프레임 뒤에 표식을 떼므로 평소 움직임은 그대로다.
 */
.pub-root[data-hd-snap] .hd{transition:none;}

.pub-root .hd__inner{display:flex;align-items:center;gap:var(--s6);min-height:60px;flex-wrap:wrap;}
.pub-root .hd__logo{font-size:1.0625rem;font-weight:var(--fw-eb);letter-spacing:var(--tr-3);}
.pub-root .hd__nav{display:flex;gap:var(--s5);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.pub-root .hd__nav::-webkit-scrollbar{display:none;}
.pub-root .hd__nav a{white-space:nowrap;font-size:var(--fs-label);font-weight:var(--fw-m);color:var(--pub-ink-2);}
.pub-root .hd__nav a[aria-current="page"]{color:var(--pub-ink);font-weight:var(--fw-b);}
@media (max-width:767px){
  /* 2행이 되므로 sticky 를 풀고 고정 자리는 하단 CTA 에 양보한다 */
  .pub-root .hd__nav{order:3;flex:1 0 100%;margin-inline:calc(var(--gutter) * -1);
    padding:10px var(--gutter);border-top:1px solid var(--pub-line);}
}
@media (min-width:768px){
  .pub-root .hd{position:sticky;top:0;z-index:var(--z-header);}
  .pub-root .hd__inner{min-height:64px;flex-wrap:nowrap;}
  .pub-root .hd__nav{gap:var(--s6);}
  .pub-root .hd__nav a{font-size:var(--fs-body);}
}

/* 푸터 — 유일하게 배경을 쓰는 영역 */
.pub-root .ft{margin-top:var(--s18);border-top:1px solid var(--pub-line);background:var(--pub-bg-2);
  padding-block:var(--s14) var(--s12);}
.pub-root .ft__links{display:flex;flex-wrap:wrap;gap:var(--s5);margin-bottom:var(--s6);}
.pub-root .ft__links a{font-size:var(--fs-label);font-weight:var(--fw-sb);color:var(--pub-ink-2);}
.pub-root .ft__tel{margin-bottom:var(--s5);font-size:var(--fs-subtitle);font-weight:var(--fw-b);letter-spacing:var(--tr-2);}
.pub-root .ft__tel b{font-size:1.125rem;letter-spacing:var(--tr-3);margin-inline:6px;}
.pub-root .ft__tel span{display:block;margin-top:var(--s1);font-size:var(--fs-caption);
  font-weight:var(--fw-r);color:var(--pub-ink-3);}
@media (min-width:600px){ .pub-root .ft__tel span{display:inline;margin:0 0 0 var(--s3);} }
/*
 * 사업자 정보 (SHELL-FOOTER-LEGIBILITY-001 · 2026-10-19).
 *
 * 13px(--fs-caption) → 15px(--fs-label).
 *   00 이 지목한 「작은 폰트 남용」 자리다. 법적 표기는 읽히라고 있는 것이지
 *   작게 숨기라고 있는 것이 아니다. 푸터에서 가장 작은 글자였다.
 *
 * 구분 기호를 쓰지 않는다 (사용자 지시 「글자 띄울 때 · 쓰는거 금지」).
 *   가운뎃점·세로줄 같은 글자를 넣지 않고 **라벨 색과 간격**으로만 나눈다.
 *     .ft__k     라벨을 한 단계 흐리게 — 값보다 뒤로 물러난다
 *     .ft__item  항목 사이를 벌린다. inline-block 이라 줄이 바뀌어도 항목이 쪼개지지 않는다
 *   ::before content 로 기호를 넣지 않는다. 그것도 글자다.
 *
 * 1280·390 실측 overflow 0. 좁은 화면에서는 .ft__item 단위로 줄이 떨어진다.
 */
.pub-root .ft__biz p{font-size:var(--fs-label);color:var(--pub-ink-3);line-height:1.8;}
.pub-root .ft__biz b{color:var(--pub-ink-2);font-weight:var(--fw-sb);}
.pub-root .ft__name{display:block;margin-bottom:var(--s2);font-size:var(--fs-subtitle);}
.pub-root .ft__item{display:inline-block;margin-right:28px;}
.pub-root .ft__k{margin-right:6px;color:var(--pub-ink-4);}
/* copyright 는 사업자 정보와 성격이 다르다. 가는 선으로 끊어 둔다. */
.pub-root .ft__copy{margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--pub-line);color:var(--pub-ink-4);}