/* 뒤에 적은 서체가 먼저 쓰이고, 거기 없는 글자만 앞의 서체(suit-kr)에서 찾는다 */
  @font-face { font-family: 'SUIT Variable'; font-weight: 100 900; font-display: swap;
               src: url(suit-kr.woff2) format('woff2'); unicode-range: U+AC00-D7A3; }
  @font-face { font-family: 'SUIT Variable'; font-weight: 100 900; font-display: block;
               src: url(suit.woff2) format('woff2'); }
  :root { color-scheme: light; --gut: clamp(20px, 5.6vw, 80px); --pad: max(var(--gut), calc(50vw - 720px)); }
  /* 화면을 반씩 나눈 사진 칸: 오른쪽 칸의 글은 칸 왼쪽 끝에서 기본 여백만큼만 띄운다 */
  .v-d section[style*="repeat(2, minmax(0, 1fr))"]:not([style*="padding"]) > div:nth-child(2) { padding-left: var(--gut) !important; }
  * { box-sizing: border-box; }
  body { margin: 0; background: #F4F2EA; font-family: 'SUIT Variable', 'Noto Sans KR', sans-serif;
         word-break: keep-all; overflow-x: hidden; }
  img { max-width: 100%; }

  [hidden] { display: none !important; }
  /* 화면 고정 버튼으로 대신하는 페이지 안 1:1 문의 */
  .pg [style*="position: absolute; right: 40px"][style*="width: 72px"],
  .pg [style*="position: absolute; right: 20px"][style*="width: 60px"] { display: none !important; }
  /* 카드형 팝업: 아트보드가 흉내 내던 어두운 바탕은 화면 가림막에 맡긴다 */
  .ov:not(#ov-catalog) [style*="background: #23291C"],
  .ov:not(#ov-catalog) [style*="background: rgba(35, 41, 28, 0.55)"] { background: transparent !important; height: auto !important; }   /* id 선택자가 기본 숨김을 덮어써서 화면을 가리던 문제 */

  /* 화면 폭에 따라 데스크톱 / 모바일 시안 전환 */
  .v-m { display: none; }
  @media (max-width: 900px) {
    .v-d { display: none; }
    .v-m { display: block; }
    .pg:not(:has(.v-m)) .v-d { display: block; }
  }
  /* 태블릿 폭에서 칸 수 줄이기 */
  @media (max-width: 1180px) and (min-width: 901px) {
    .v-d section [style*="repeat(4, minmax(0, 1fr))"],
    .v-d footer [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .v-d section [style*="repeat(3, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    /* 머리글은 항상 메뉴 | 로고 | 언어 3칸을 유지한다 */
    .v-d header[style*="repeat(3, minmax(0, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  }

  /* 머리글: 메뉴가 로고 칸을 침범하지 않도록 간격을 줄인다 */
  @media (max-width: 1300px) { .v-d header nav, #top nav { gap: 22px !important; } }
  @media (max-width: 1120px) { .v-d header nav, #top nav { gap: 14px !important; font-size: 13px !important; } }
  /* Product 하위 메뉴: 올리면(키보드는 포커스) 아래로 열린다. 위쪽 투명 여백이 마우스가 내려가는 길을 이어 준다 */
  :is(header, #top) .dd { position: relative; display: inline-block; }
  :is(header, #top) :is(.dd, .sub, .box) { padding-bottom: 0; border: 0 !important; }
  :is(header, #top) .dd .sub { position: absolute; top: 100%; left: -22px; padding-top: 14px !important; z-index: 70;
             opacity: 0; visibility: hidden; transform: translateY(-6px);
             transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s .3s; }
  :is(header, #top) .dd:is(:hover, :focus-within) .sub { opacity: 1; visibility: visible; transform: none;
             transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
  :is(header, #top) .dd .box { display: flex; flex-direction: column; min-width: 168px; padding: 10px 0; background: #F4F2EA;
             border: 1px solid #DED9CB; box-shadow: 0 12px 28px -18px rgba(35, 41, 28, 0.35); }
  :is(header, #top) .dd .box a { padding: 9px 22px; font-family: Jost, sans-serif; font-size: 14px; letter-spacing: 0.06em; color: #23291C;
                  border: 0 !important; white-space: nowrap; cursor: pointer; text-decoration: none; transition: color .2s ease, padding-left .25s ease; }
  :is(header, #top) .dd .box a:hover { color: #3C4F27; padding-left: 26px; }
  header nav .dd::after, header nav .sub::after, header nav .sub a::after { content: none; }
  /* 가운데 로고 칸·언어 칸이 메뉴 클릭을 가로채지 않게 */
  .v-d header > div, #top .logo, #top .lang { pointer-events: none; }
  .v-d header > div img, .v-d header > div span, #top .logo img, #top .lang span { pointer-events: auto; }

  /* 스크롤에 따라 나타나는 상단 막대 */
  #top { position: fixed; top: 0; left: 0; right: 0; height: 64px; background: #F4F2EA;
         border-bottom: 1px solid #DED9CB; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
         align-items: center; padding: 0 var(--pad); z-index: 60;
         transform: translateY(-101%); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  #top.show { transform: none; }
  #top .logo { display: flex; justify-content: center; }
  #top img { height: 26px; width: auto; display: block; cursor: pointer; }
  #top nav { display: flex; gap: 32px; font-family: Jost, sans-serif; font-size: 14px; letter-spacing: 0.06em; color: #23291C; }
  #top nav a { color: inherit; text-decoration: none; cursor: pointer; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s; }
  #top nav a:hover { color: #3C4F27; border-color: #3C4F27; }
  #top .lang { display: flex; justify-content: flex-end; gap: 8px; font-family: Jost, sans-serif; font-size: 13px; letter-spacing: 0.08em; }
  #top .lang .on { color: #3C4F27; }
  #top .lang .off { color: #A39E8E; }
  #top .mbtn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; }
  @media (max-width: 900px) {
    #top { height: 56px; display: flex; justify-content: space-between; }
    #top nav, #top .lang { display: none; }
    #top .logo { justify-content: flex-start; }
    #top .mbtn { display: flex; }
  }

  /* 화면에 고정되는 1:1 문의 */
  #fab { position: fixed; right: clamp(16px, 2.6vw, 40px); bottom: clamp(16px, 2.6vw, 40px);
         width: 72px; height: 72px; background: #F4F2EA; border: 1px solid #3C4F27; color: #3C4F27;
         display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
         cursor: pointer; z-index: 80; opacity: 0; transform: translateY(10px);
         transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; }
  #fab.in { opacity: 1; transform: none; }
  #fab:hover { background: #3C4F27; color: #F4F2EA; }
  #fab .n { font-family: Jost, sans-serif; font-size: 18px; letter-spacing: 0.02em; }
  #fab .k { font-size: 12px; font-weight: 500; }
  @media (max-width: 900px) { #fab { width: 60px; height: 60px; } #fab .n { font-size: 16px; } #fab .k { font-size: 11px; } }

  /* 모바일 메뉴 */
  #mmenu { position: fixed; inset: 0; background: #F4F2EA; z-index: 200; display: flex; flex-direction: column;
           padding: 20px var(--pad) 40px; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  #mmenu.show { opacity: 1; pointer-events: auto; }
  #mmenu .top { display: flex; justify-content: space-between; align-items: center; height: 44px; }
  #mmenu .items { margin-top: 48px; display: flex; flex-direction: column; gap: 28px; }
  #mmenu .items a { text-decoration: none; font-family: Jost, sans-serif; font-size: 28px; letter-spacing: 0.04em; color: #23291C;
                       opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
  #mmenu.show .items a { opacity: 1; transform: none; }
  /* Product 옆 + : 누르면 아래에 Product / Guide / Projects 가 들여써서 펼쳐진다 */
  #mmenu .grp { display: flex; flex-direction: column; }
  #mmenu .grp .row { display: flex; align-items: center; justify-content: space-between; }
  #mmenu .plus { all: unset; width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; cursor: pointer; }
  #mmenu .plus:focus-visible { outline: 1px solid #3C4F27; outline-offset: -4px; }
  #mmenu .plus .v { transform-origin: center; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  #mmenu .plus[aria-expanded="true"] .v { transform: scaleY(0); }
  #mmenu .grp .subs { padding: 18px 0 4px 22px; display: flex; flex-direction: column; gap: 16px; }
  #mmenu .items .subs a { font-size: 19px; color: #23291C; }

  /* 팝업 */
  .ov { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
        background: rgba(35, 41, 28, 0.82); padding: 20px; animation: ovin .25s ease both; }
  .ov-in { animation: cardin .35s cubic-bezier(.2,.7,.2,1) both; max-height: 100%; overflow: auto; }
  @keyframes ovin { from { opacity: 0 } to { opacity: 1 } }
  @keyframes cardin { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

  /* 이벤트 팝업 (관리자의 "이벤트 팝업"에서 만든 것. 모양은 상담 접수 팝업을 따른다) */
  #ov-event .ev { width: min(440px, 100%); background: #F4F2EA; display: flex; flex-direction: column; outline: none; }
  #ov-event .ev-img { display: block; width: 100%; height: auto; max-height: min(52vh, 560px); object-fit: cover; }
  #ov-event .ev-txt { padding: 28px 32px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  #ov-event .ev-k { font-family: 'IBM Plex Mono', 'SUIT Variable', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; color: #5C6A4C; }
  #ov-event h2 { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.45; color: #23291C; }
  #ov-event p { margin: 0; font-size: 15px; line-height: 1.85; color: #4A4A3E; white-space: pre-line; }
  #ov-event .ev-go { margin-top: 6px; width: 100%; height: 52px; background: #3C4F27; color: #F4F2EA; display: flex;
                     align-items: center; justify-content: center; font-size: 15px; font-weight: 500; text-decoration: none; transition: background .25s; }
  #ov-event .ev-go:hover { background: #23291C; }
  #ov-event .ev-bar { display: flex; justify-content: space-between; border-top: 1px solid #DED9CB; }
  #ov-event .ev-bar button { all: unset; cursor: pointer; padding: 14px 20px; font-size: 13px; color: #5C6A4C; transition: color .25s; }
  #ov-event .ev-bar button:hover { color: #23291C; }
  #ov-event a:focus-visible, #ov-event .ev-bar button:focus-visible { outline: 2px solid #3C4F27; outline-offset: -4px; }
  @media (max-width: 900px) { #ov-event .ev-img { max-height: 40vh; } #ov-event .ev-txt { padding: 24px; gap: 12px; } #ov-event h2 { font-size: 20px; } }

  /* 카펫정보 글 · 납품 사례 본문 (관리자 편집기에서 쓴 HTML · 태그는 content.js 의 guideHtml 이 거른다) */
  [data-fill^="body-"] > :is(p, ul, ol) { margin: 0; font-size: 16px; line-height: 2; color: #4A4A3E; }
  [data-fill^="body-"] :is(ul, ol) { padding-left: 1.3em; }
  [data-fill^="body-"] h2 { margin: 24px 0 0; font-size: 26px; font-weight: 500; line-height: 1.45; color: #23291C; }
  [data-fill^="body-"] h3 { margin: 8px 0 0; font-size: 20px; font-weight: 500; line-height: 1.55; color: #23291C; }
  [data-fill^="body-"] > :first-child { margin-top: 0; }
  [data-fill^="body-"] blockquote { margin: 0; padding: 4px 0 4px 24px; border-left: 2px solid #3C4F27; font-size: 18px; line-height: 1.85; color: #23291C; }
  [data-fill^="body-"] blockquote p { margin: 0; }
  [data-fill^="body-"] strong, [data-fill^="body-"] b { font-weight: 600; color: #23291C; }
  [data-fill^="body-"] a { color: #3C4F27; text-decoration: underline; text-underline-offset: 3px; }
  [data-fill^="body-"] hr { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid #DED9CB; }
  [data-fill^="body-"] figure { margin: 8px 0; }
  [data-fill^="body-"] figure img { display: block; width: 100%; height: auto; }
  [data-fill^="body-"] figcaption { margin-top: 12px; font-size: 13px; line-height: 1.7; color: #5C6A4C; }
  [data-fill^="body-"] figcaption:empty { display: none; }
  [data-fill^="body-"] .t-s { font-size: 14px; }
  [data-fill^="body-"] .t-l { font-size: 19px; line-height: 1.85; }
  [data-fill^="body-"] .t-xl { font-size: 24px; line-height: 1.6; }
  [data-fill^="body-"] .al-c { text-align: center; }
  [data-fill^="body-"] .al-r { text-align: right; }
  @media (max-width: 900px) {
    [data-fill^="body-"] h2 { font-size: 22px; } [data-fill^="body-"] h3 { font-size: 18px; }
    [data-fill^="body-"] .t-xl { font-size: 21px; } [data-fill^="body-"] blockquote { padding-left: 18px; font-size: 17px; }
  }

  /* 링크 밑줄은 마우스를 올렸을 때만 (메뉴·탭의 선택 표시는 유지) */
  /* 머리글 · 바닥글 메뉴(진짜 링크)는 아래 글자 링크 규칙에서 뺀다 — 현재 메뉴 밑줄은 그대로 */
  .pg a:not(header *, footer *), .pg span[style*="border-bottom"] { transition: border-bottom-color .25s ease; }
  /* '전체 제품 보기 →' 같은 글자 링크는 원본에 밑줄 색이 적혀 있어도 평소엔 숨긴다 */
  .pg a[style*="border-bottom"]:not(header *, footer *) { border-bottom-color: transparent !important; }
  @media (hover: hover) {
    .pg a:not(header *, footer *):hover, .pg [data-card]:hover a,
    .pg span[style*="padding-bottom: 12px"]:hover,
    .pg span[style*="white-space: nowrap"][style*="border-bottom"]:hover { border-bottom-color: currentColor !important; }
  }

  /* 제품 상세 사진 */
  [data-main] { transition: opacity .18s ease; }
  [data-thumb] { transition: opacity .25s ease; }
  [data-thumb]:hover { opacity: 0.82; }

  /* 옆으로 넘기는 줄(크로셀) */
  .track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--pad);
           scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  /* 좌우 여백 안에 놓인 줄: 맞춤 기준이 줄의 왼쪽 끝이다 */
  .track[data-inset] { scroll-padding-left: 0; }
  @media (hover: hover) and (pointer: fine) {
    .track { cursor: grab; }
    .track img { -webkit-user-drag: none; user-select: none; }
  }
  .track.drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
  .track::-webkit-scrollbar { display: none; }
  .track > * { scroll-snap-align: start; }
  [aria-label="이전"], [aria-label="다음"] { cursor: pointer; transition: transform .25s ease, opacity .25s ease; }
  /* 네모 화살표(카펫정보 줄): 네모는 그대로, 안의 화살표만 움직인다 */
  div[aria-label="이전"]:hover, div[aria-label="다음"]:hover { transform: none; }
  div[aria-label] svg { transition: transform .25s ease; }
  div[aria-label="다음"]:hover svg { transform: translateX(3px); }
  div[aria-label="이전"]:hover svg { transform: translateX(-3px); }
  /* 카펫정보 목록의 한 줄 */
  [data-grow] > span:nth-child(2) { transition: color .25s ease; }
  [data-grow] > svg { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  [data-grow][data-card]:hover { opacity: 1; }
  @media (hover: hover) {
    [data-grow][data-card]:hover > span:nth-child(2) { color: #3C4F27; }
    [data-grow][data-card]:hover > svg { transform: translateX(4px); }
  }
  [aria-label="다음"]:hover { transform: translateX(3px); }
  [aria-label="이전"]:hover { transform: translateX(-3px); }

  /* 메인 첫 화면: 제품 사진 1~3장이 겹쳐 있고 켜진 장만 보인다 (넘기는 동작은 site.js 의 히어로 부분) */
  [data-slide] { opacity: 0; visibility: hidden; transition: opacity 1.2s cubic-bezier(.4,0,.2,1), visibility 0s 1.2s; }
  [data-slide].on, html:not(.js) [data-slide]:first-child { opacity: 1; visibility: visible; transition: opacity 1.2s cubic-bezier(.4,0,.2,1); }
  [data-hdots].live { gap: 0 !important; }
  [data-hdots] button { all: unset; width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer; }
  [data-hdots] button::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 242, 234, 0.4);
                                transition: background .3s ease, transform .3s ease; }
  [data-hdots] button:hover::before { background: rgba(244, 242, 234, 0.75); }
  [data-hdots] button[aria-current="true"]::before { background: #F4F2EA; transform: scale(1.2); }
  [data-hdots] button:focus-visible { outline: 1px solid #F4F2EA; outline-offset: -3px; border-radius: 50%; }

  /* 동작 */
  a, [data-go], [data-ov], [data-href], [data-ext] { cursor: pointer; }
  [data-ext=""] { display: none; }   /* 주소를 안 적은 바깥 링크는 숨긴다 */
  /* 카탈로그 받기 입력칸 */
  [data-catalog] ::placeholder { color: #6F6A5C; opacity: 1; }
  [data-catalog] input:focus { border-bottom-color: #3C4F27 !important; }
  [data-catalog] button:focus-visible { outline: 2px solid #3C4F27; outline-offset: 3px; }
  [data-catalog] button[disabled] { opacity: 0.6; cursor: default; }
  @media (max-width: 900px) { [data-catalog] input { font-size: 16px !important; } }
  /* 검색 입력칸 */
  form[role="search"] ::placeholder { color: #6F6A5C; opacity: 1; }
  form[role="search"] input::-webkit-search-cancel-button { display: none; }
  form[role="search"] button:focus-visible { outline: 2px solid #3C4F27; outline-offset: 3px; }
  form[role="search"]:focus-within, form[role="search"] div:focus-within { border-bottom-color: #3C4F27 !important; }
  @media (max-width: 900px) { form[role="search"] input { font-size: 16px !important; } }
  /* 글자 주변 여백까지 눌리도록 (보이는 모양은 그대로) */
  header nav a, footer [data-go] { position: relative; }
  header nav a::after { content: ''; position: absolute; inset: -14px -10px; }
  [data-card] { transition: opacity .25s ease; }
  [data-card]:hover { opacity: 0.92; }
  .zoomwrap { overflow: hidden; }
  .zoomimg { transition: transform .7s cubic-bezier(.2,.6,.2,1); }
  .zoomwrap:hover .zoomimg { transform: scale(1.05); }
  @media (prefers-reduced-motion: no-preference) {
    html.js .rv { opacity: 0; transform: translateY(20px); }
    html.js .rv.in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
    .heroimg, [data-slide].on img { animation: heroin 1.5s cubic-bezier(.2,.6,.2,1) both; }
    /* 장이 바뀔 때 캡션이 사진보다 조금 늦게 아래에서 올라온다 */
    html.js [data-slide] [data-cap] > * { opacity: 0; transform: translateY(10px); }
    html.js [data-slide].on [data-cap] > * { opacity: 1; transform: none;
      transition: opacity .8s ease .3s, transform .8s cubic-bezier(.2,.6,.2,1) .3s, border-bottom-color .25s ease; }
    html.js [data-slide].on [data-cap] > :nth-child(2) { transition-delay: .4s, .4s, 0s; }
    html.js [data-slide].on [data-cap] > :nth-child(3) { transition-delay: .5s, .5s, 0s; }
    @keyframes heroin { from { transform: scale(1.07) } to { transform: none } }
  }