/* ── 화면 11개가 같이 쓰는 CSS (2026-09-28) ──
   각 화면 <style>에 글자까지 똑같이 들어 있던 규칙만 모았다 — 기본값 · 맨 위 헤더 · 하위 메뉴 · 꼬리말(회사 정보).
   **화면마다 값이 조금이라도 다른 규칙은 여기 없다.** 그런 것은 각 화면 <style>에 그대로 있고, 이 파일보다 뒤에 읽혀서 이긴다.
   흰 헤더 한 줄(`header{…position:fixed…}`)도 메인만 달라서 각 하위 화면에 남아 있다.
   이 파일을 고치면 11개 화면이 같이 바뀐다. 한 화면만 바꾸려면 그 화면 <style>에 덮어쓴다.
   왜 무엇을 그렇게 정했는지는 각 화면 <style>의 주석과 `../LOG.md`에 있다 */
/* ── 2안 스타일 가이드 값 (2026-10-05) ──
   값의 기준은 `../01-기획/4-디자인/스타일가이드.md`. 색을 바꿀 때는 md를 먼저 고치고 여기 변수 하나를 바꾼다.
   화면마다 <style> :root에 있던 옛 변수(--brand · --ink · --face · --t-page …)는 이 변수를 가리키게 바꿨다 —
   그래서 아직 다시 짜지 않은 화면도 새 서체 · 색을 받는다. 화면 안에 숫자로 박힌 옛 색은 화면을 다시 짤 때 고친다 */
:root{
  --font:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  /* B안 확정 2026-10-06 09:08: 장식 하늘색과 기능 글자·아이콘의 짙은 파랑을 분리 */
  --c-primary:#303030; --c-accent:#00AEEF; --c-accent-ink:#007CA8; --c-primary-tint:#EEEEEE; --c-surface:#F6F6F6; --c-bg:#FFFFFF;
  --c-text:#242424; --c-text-sub:#626262; --c-line:#DEDEDE; --c-chip-line:#BDBDBD; --c-field-line:#888888; --c-error:#B3261E;
  --fs-page:56px; --fs-sec:48px; --fs-card:24px; --fs-sub:20px; --fs-lead:20px; --fs-body:17px; --fs-small:14px; --fs-eyebrow:13px;
  --r-btn:4px;
}
@media (max-width:768px){:root{
  --fs-page:34px; --fs-sec:30px; --fs-card:20px; --fs-sub:18px; --fs-lead:17px; --fs-body:16px; --fs-small:13px; --fs-eyebrow:12px;
}}

*{box-sizing:border-box}
body{margin:0;color:var(--ink,var(--c-text));background:#fff;
  font:var(--t-body,var(--fs-body))/1.7 var(--face,var(--font));
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1520px;margin:0 auto;padding:0 40px}
body{padding-top:80px}
section[id]{scroll-margin-top:90px}
header .in{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}
header .logo{display:block;position:relative}
/* 로고 40px · 메뉴 16px · 600 · 간격 64px는 여기서 정한다(2026-10-07 — 머리메뉴.js가 본문 끝에서 덮으면 화면이 열릴 때마다 로고가 48 → 40px로 줄어드는 게 보였다) */
header .logo img{display:block;height:40px;width:auto;transition:opacity .3s, height .3s}
header .logo .w{position:absolute;left:0;top:0;opacity:0}
.gnb{height:100%;font-size:16px;font-weight:600;color:var(--gray,var(--c-text-sub))}
.gnb ul{margin:0;padding:0;list-style:none}
.gnb a{color:inherit;text-decoration:none}
.gnb > ul{display:flex;gap:64px;height:100%;position:relative}
.gnb > ul > li{position:relative;display:flex;align-items:center;z-index:1}
.gnb > ul > li > a{transition:color .2s}
.gnb > ul > li:hover > a{color:var(--c-primary)}
.gnb > ul > li:last-child .sub{left:auto;right:-20px}
.gnb > ul > li:hover .sub, .gnb > ul > li:focus-within .sub{display:block}
.gnb .sub li + li{border-top:1px solid var(--c-line)}
.gnb .sub a{display:block;padding:14px 20px;font-size:15px;font-weight:400;color:var(--c-text);white-space:nowrap}
.gnb .sub a:hover{color:var(--c-primary);background:var(--c-surface)}
.gnb .slide{position:absolute;top:50%;left:0;width:0;height:44px;margin-top:-22px;
  background:var(--c-primary-tint);border-radius:999px;opacity:0;z-index:0;pointer-events:none;
  transition:left .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), opacity .2s}
.co > .wrap{position:relative;z-index:2}
.co .top{display:flex;justify-content:flex-end;align-items:center}
.co .lnk{display:flex;align-items:center;font-size:14.5px;color:var(--c-text-sub);letter-spacing:-.2px}
.co .lnk span, .co .lnk a{cursor:pointer;padding:0 17px;color:inherit;text-decoration:none}
.co .lnk a:hover{color:var(--brand,var(--c-primary))}
.co .lnk a.on{color:var(--c-text);font-weight:700}
.co .lnk span:last-child, .co .lnk a:last-child{padding-right:0}
.co .lnk i{font-style:normal;color:var(--c-chip-line);font-size:13px}
.co .info{font-size:14.5px;line-height:2.15;color:var(--ink,var(--c-text))}
.co .info p{margin:0}
.co .info .sep{margin:0 13px;color:var(--c-chip-line)}
.co .info .cr{font-size:13.5px;color:var(--c-text-sub);letter-spacing:.1px}
.co .goup{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex:0 0 auto;
  background:var(--c-primary);color:#fff;box-shadow:0 8px 22px rgba(36,36,36,.22)}
.co .goup svg{width:20px;height:20px}
.co .drops{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;display:block}

/* ── 2안 공통 부품 (2026-10-05 · 스타일가이드.md 4 · 5절) — 화면을 다시 짤 때 이 이름으로 쓴다.
   옛 화면 클래스(.btn · .tabs)와 겹치지 않게 c- 를 붙였다 ── */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:52px;padding:0 28px;
  font:600 16px/1 var(--font);border:1px solid var(--c-primary);border-radius:var(--r-btn);
  background:var(--c-primary);color:#fff;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.c-btn:hover{background:var(--c-text);border-color:var(--c-text)}
.c-btn--line{background:#fff;color:var(--c-primary)}
.c-btn--line:hover{background:var(--c-primary-tint);color:var(--c-text);border-color:var(--c-primary)}
.c-btn--photo{background:transparent;border-color:#fff;color:#fff}
.c-btn--photo:hover{background:#fff;color:var(--c-text);border-color:#fff}
.c-btn:disabled,.c-btn[aria-disabled="true"]{background:var(--c-line);border-color:var(--c-line);color:var(--c-text-sub);cursor:default}
.c-btns{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:768px){.c-btn{height:50px;font-size:15px}.c-btns{flex-direction:column;align-items:stretch}.c-btns .c-btn{width:100%}}
.c-chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;font:500 14px/1 var(--font);
  border:1px solid var(--c-chip-line);border-radius:999px;background:#fff;color:var(--c-text);cursor:pointer}
.c-chip:hover{border-color:var(--c-primary)}
.c-chip.on,.c-chip[aria-pressed="true"]{background:var(--c-primary-tint);border-color:var(--c-primary);font-weight:700}
/* 탭 줄 — 비교판 4번: 알약 테두리 상자에서 켜진 칸만 주색 채움(2026-10-06 15:44 채원님). 제목 아래 긴 선은 그대로 둔다. */
.c-tabs{display:inline-flex;max-width:100%;overflow-x:auto;scrollbar-width:none;border:1px solid var(--c-line);border-radius:999px}
.c-tabs a,.c-tabs button{flex:none;padding:9px 20px;border:0;border-radius:999px;background:transparent;
  font:500 16px/1.4 var(--font);color:var(--c-text-sub);text-decoration:none;cursor:pointer;white-space:nowrap}
.c-tabs .on,.c-tabs [aria-selected="true"]{background:var(--c-primary);color:#fff;font-weight:700}
@media (max-width:768px){.c-tabs a,.c-tabs button{padding:8px 15px;font-size:15px}}
/* 켜진 탭의 채운 알약이 옆으로 미끄러짐 — 탭-알약.js가 .has-pill과 .c-tabs__pill을 넣는다. 스크립트가 없으면 위 .on 꼴 그대로. */
.c-tabs.has-pill{position:relative}
.c-tabs.has-pill a,.c-tabs.has-pill button{position:relative;z-index:1;transition:color .32s}
.c-tabs.has-pill .on,.c-tabs.has-pill [aria-selected="true"]{background:transparent}
.c-tabs__pill{position:absolute;top:0;bottom:0;left:0;width:0;z-index:0;background:var(--c-primary);border-radius:999px;pointer-events:none;
  transition:left .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.c-tabs__pill{transition:none}}
.c-field{display:block}
.c-field > label,.c-field > .c-label{display:block;margin-bottom:8px;font:600 15px/1.4 var(--font);color:var(--c-text)}
.c-req{color:var(--c-accent-ink);margin-left:2px}
.c-input{display:block;width:100%;height:56px;padding:0 2px;border:0;border-bottom:1px solid var(--c-field-line);border-radius:0;
  background:transparent;font:400 17px/1.4 var(--font);color:var(--c-text);outline:none}
.c-input::placeholder{color:var(--c-text-sub)}
.c-input:focus{border-bottom:2px solid var(--c-primary)}
.c-input.is-error,.c-input[aria-invalid="true"]{border-bottom:2px solid var(--c-error)}
textarea.c-input{height:150px;padding:14px 16px;border:1px solid var(--c-field-line);border-radius:12px;background:var(--c-surface);resize:vertical}
textarea.c-input:focus{border:2px solid var(--c-primary);padding:13px 15px}
.c-error{margin-top:6px;font-size:14px;color:var(--c-error)}
@media (max-width:768px){.c-input{height:50px;font-size:16px}}
.c-check,.c-radio{display:inline-flex;align-items:center;gap:8px;font-size:16px;cursor:pointer}
.c-check input,.c-radio input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;flex:none;
  border:1.5px solid var(--c-field-line);background:#fff;display:grid;place-content:center;cursor:pointer}
.c-check input{border-radius:6px}.c-radio input{border-radius:50%}
.c-check input:checked{background:var(--c-primary);border-color:var(--c-primary)}
.c-check input:checked::after{content:"";width:5px;height:10px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.c-radio input:checked{border-color:var(--c-primary)}
.c-radio input:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-primary)}
/* 아이콘 — Material Symbols 선 꼴 (FILL 0 · 굵기 300) · 포인트 색.
   글꼴은 우리 서버 fonts/material-symbols-outlined.woff2 (화면이 쓰는 아이콘만 · 약 5KB · 2026-10-19 구글 링크에서 옮김).
   새 아이콘을 넣으면 06-스크립트/아이콘글꼴-받기.py 를 다시 돌린다 */
@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:100 700;font-display:block;src:url(fonts/material-symbols-outlined.woff2) format('woff2')}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 48}

/* ── 하위 화면 맨 위 꼴 셋 (2026-10-05 · 디자인 기획서 5절 「하위 화면 공통」) ──
   사진 띠 = 회사소개 넷 · 소식 / 연한 색 면 = 문의 / 흰 헤더 + 제목 = 구매·제작 · 제품 · 방침 · 404.
   세 꼴 모두 제목이 화면 맨 위에서 같은 자리(PC 230px · 모바일 150px)에 오게 했다 — 「통일성」(2026-10-04 22:34).
   띠 높이(PC 340px · 2026-10-06 20:47) · 어두운 막 .5는 임시 값이다(5절 「둘 때 남은 것」) — 바꿀 때 아래 숫자만 고친다 */
.c-top{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:150px 24px 0;box-sizing:border-box}
.c-top h1{margin:0;font-size:var(--fs-page);font-weight:700;line-height:1.25;letter-spacing:-.025em;color:inherit}
.c-top p{margin:18px auto 0;max-width:880px;font-size:var(--fs-lead);line-height:1.7}
/* PC 사진 띠 340px · 제목은 머리 메뉴(80px) 아래 띠 한가운데(위에서 약 175px) — 2026-10-06 채원님 「나로 해주셈」. 이전 값 500px · 제목 230px.
   이 높이에서 제목을 230px에 두면 아래가 40px만 남아 가운데로 옮겼다. 20:50부터 가는 선 있는 흰 헤더도 같은 자리(아래 규칙) — 선 없는 방침 · 404만 230px */
.c-top--photo{height:340px;padding-top:80px;justify-content:center;color:#fff;
  background:linear-gradient(rgba(20,20,20,var(--top-dim,.5)),rgba(20,20,20,var(--top-dim,.5))),var(--top-img,#828282) center/cover no-repeat}
.c-top--photo p{color:rgba(255,255,255,.88)}
.c-top--tint{height:420px;background:var(--c-primary-tint);color:var(--c-text)}
.c-top--tint p,.c-top--white p{color:var(--c-text-sub)}
.c-top--white{padding-bottom:64px;color:var(--c-text)}
.c-top .c-btn{margin-top:32px}
/* 제목 아래 가는 선이 있는 흰 헤더(제품 · 구매·제작 둘 · 문의) — 선을 사진 띠 아래 끝과 같은 자리(화면 맨 위에서 340px)에,
   제목은 머리 메뉴 아래 칸 한가운데(위에서 약 175px · 사진 띠 제목과 같은 높이). 2026-10-06 채원님 「줄도 폭 맞춰주고 폰트도 가운데로」.
   이전 — 선 364px · 제목 230px. 선이 없는 방침 · 404는 그대로 */
.c-top--white:has(+ .c-topline){height:260px;padding-top:0;padding-bottom:0;justify-content:center}
@media (max-width:768px){
  .c-top--white:has(+ .c-topline){height:auto;padding-top:70px;padding-bottom:40px;justify-content:flex-start}
  .c-top{padding-top:70px}
  .c-top--photo{height:320px;padding-top:150px;justify-content:flex-start}
  .c-top--tint{height:250px}
  .c-top--white{padding-bottom:40px}
}
/* 회사소개 위치 표시 「홈 › 회사소개 › 개요」 — 사진 띠 바로 아래 줄, 오른쪽 끝. 소식 `.crumb`(2026-09-17 확정 자리)와 같은 꼴 · 같은 값.
   2026-10-06 10:37에는 사진 띠 안 오른쪽 아래에 흰 글자로 두었다가, 10:44 채원님 「소식 처럼 반영해주셈 이게 보기 좋은데」로 이 자리로 옮겼다 */
.c-crumb{border-bottom:1px solid var(--c-line)}
/* 제목 아래 가는 선만 — 위치 표시 글자 없이(구매·제작 · 2026-10-06 14:25) */
.c-topline{border:0;border-top:1px solid var(--c-line);margin:0}
.c-crumb ol{display:flex;justify-content:flex-end;align-items:center;height:54px;list-style:none;margin:0 auto;font-size:14px;color:var(--c-text-sub)}
.c-crumb li{display:flex;align-items:center}
.c-crumb li + li::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.5;margin:0 14px 0 10px}
.c-crumb a{display:flex;color:inherit;text-decoration:none}
.c-crumb a:hover{color:var(--c-text)}
.c-crumb [aria-current]{font-weight:700;color:var(--c-text)}
.c-crumb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
/* 사진 띠 화면의 머리 메뉴 — 사진 위에서는 투명 · 흰 글자, 내리거나 마우스를 올리면 흰 유리. 원래 회사소개 화면마다 있던 규칙을 모았다 */
body.sub-photo{padding-top:0}
body.sub-photo .pagehd{padding-top:0}
body.sub-photo .pagehd-title{display:none}
body.sub-photo header{background:transparent;border-bottom-color:transparent}
body.sub-photo header:not(.fix):not(:hover):not(:focus-within) .gnb{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
body.sub-photo header:not(.fix):not(:hover):not(:focus-within) .logo .c{opacity:0}
body.sub-photo header:not(.fix):not(:hover):not(:focus-within) .logo .w{opacity:1;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
body.sub-photo header.fix,body.sub-photo header:hover,body.sub-photo header:focus-within{
  background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom-color:transparent}
body.sub-photo header.fix .gnb,body.sub-photo header:hover .gnb,body.sub-photo header:focus-within .gnb{color:var(--c-text)}

/* ── 2안 화면 바탕 (2026-10-06) — 다시 짠 2안 화면이 같이 쓰는 머리 · 꼬리말 · 단 규칙. 옛 화면은 자기 <style>에 같은 규칙이 있어 그대로 돈다 ── */
section,footer{position:relative}
header{height:80px;border-bottom:1px solid var(--c-line);display:flex;align-items:center;position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;transition:height .3s,background .3s,border-color .3s}
.gnb .sub{display:none;position:absolute;top:100%;left:-20px;min-width:200px;background:#fff;box-shadow:0 10px 28px rgba(36,36,36,.12)}
.co{background:#fff;color:var(--c-text);position:relative;z-index:1;padding:112px 0 62px;overflow:hidden}
.co .bot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:54px;flex-wrap:wrap}
@media (max-width:1024px){.wrap{padding:0 24px}.gnb{display:none}}
/* 탭 줄 — 맨 위 아래 가운데 알약 탭(스타일가이드.md 5절) */
.c-subnav{display:flex;justify-content:center;padding:40px 24px 0}
/* 왼쪽 탭 줄 — 본문 .wrap 왼쪽 끝에 맞춤(구매·제작 · P-01 제품과 같은 자리 · 2026-10-06 14:19) */
.c-subnav--left{justify-content:flex-start;width:100%;box-sizing:border-box;max-width:1520px;margin:0 auto;padding-left:40px;padding-right:40px} /* width:100% — 품질·인증처럼 부모가 세로 flex인 화면에서 가운데로 줄어들지 않게 (2026-10-06 15:10) */
@media (max-width:1024px){.c-subnav--left{padding-left:24px;padding-right:24px}}
/* 단 — 위아래 여백 · 제목 */
.c-sec{padding:120px 0}
.c-sec + .c-sec{padding-top:0}
.c-sec--surface{background:var(--c-surface)}
/* 회색 단 위아래 그라데이션 — 위아래 160px(모바일 96px)을 흰색 ↔ 구역 바탕으로 서서히 (2026-10-06 10:19 B-02 후기 단 · 13:35 B-01 고민 단에도 넣으며 bulk.html에서 옮김 · 스타일가이드 3절) */
.c-sec--surface.c-sec--fade{background:linear-gradient(to bottom,#fff 0,var(--c-surface) 160px,var(--c-surface) calc(100% - 160px),#fff 100%)}
@media (max-width:768px){.c-sec--surface.c-sec--fade{background:linear-gradient(to bottom,#fff 0,var(--c-surface) 96px,var(--c-surface) calc(100% - 96px),#fff 100%)}}
.c-sec--surface + .c-sec,.c-sec + .c-sec--surface{padding-top:120px}
.c-narrow{max-width:960px;margin:0 auto}
.c-eyebrow{margin:0 0 10px;font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.14em;color:var(--c-accent-ink)}
.c-h2{margin:0;font-size:var(--fs-sec);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.c-h2 small{display:block;margin-bottom:10px;font-size:var(--fs-sub);font-weight:500;letter-spacing:0;color:var(--c-text-sub)}
.c-lead{margin:16px 0 0;font-size:var(--fs-lead);line-height:1.7;color:var(--c-text-sub)}
.c-center{text-align:center}
.c-noimg{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--c-surface);color:var(--c-text-sub);font-size:13px;border:1px dashed var(--c-chip-line)}
@media (max-width:768px){.c-sec{padding:80px 0}.c-sec--surface + .c-sec,.c-sec + .c-sec--surface{padding-top:80px}.c-subnav{padding-top:28px}}
/* 절차 5단계 — 가로 점선 START → END · 동그라미 선 아이콘 · 번호 · 이름 · 아래 연한 상자 (스타일가이드.md 4절 · B-01 · B-02) */
.c-steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding-top:26px;margin:0;list-style:none}
.c-steps::before{content:"";position:absolute;left:0;right:0;top:70px;border-top:1.5px dashed var(--c-chip-line)}
.c-steps .se{position:absolute;top:0;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--c-text-sub)}
.c-steps .se.s{left:0}.c-steps .se.e{right:0}
.c-step{position:relative;text-align:center}
.c-step .cir{width:88px;height:88px;border-radius:50%;background:#fff;border:1px solid var(--c-line);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--c-accent-ink)}
.c-step .cir .material-symbols-outlined{font-size:42px}
.c-step .no{font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--c-accent-ink)}
.c-step .nm{margin:2px 0 12px;font-size:20px;font-weight:700}
.c-step .ds{background:var(--c-surface);padding:14px;font-size:14px;line-height:1.6;color:var(--c-text-sub);text-align:center;min-height:96px;word-break:keep-all;text-wrap:balance;display:flex;flex-direction:column;justify-content:center}
.c-sec--surface .c-step .ds{background:#fff}
@media (max-width:768px){
  .c-steps{grid-template-columns:1fr;gap:18px;padding:0}
  .c-steps::before{left:31px;right:auto;top:8px;bottom:8px;border-top:0;border-left:1.5px dashed var(--c-chip-line)}
  .c-steps .se{display:none}
  .c-step{display:grid;grid-template-columns:64px 1fr;gap:0 14px;text-align:left}
  .c-step .cir{width:64px;height:64px;margin:0;grid-row:span 3}.c-step .cir .material-symbols-outlined{font-size:32px}
  .c-step .nm{font-size:18px;margin:0 0 8px}.c-step .ds{min-height:0;font-size:13px;padding:10px 12px;text-align:left}
}

/* ── Lenis 부드러운 스크롤이 요구하는 규칙 (2026-09-28) — `lenis.min.js`와 같은 1.3.26판 `dist/lenis.css`를 옮겼다 ── */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

/* 푸터 사업자번호 · 전화 · 팩스는 휴대폰에서 중간에 줄이 바뀌지 않게 한 덩어리로 (2026-10-19 휴대폰 점검 「231- / 01-59489」) */
.nw{white-space:nowrap}
/* 휴대폰에서는 사업자등록번호를 다음 줄로 내리고 그 앞 세로줄(|)은 숨김 — 줄 끝에 세로줄만 남지 않게 (2026-10-19) */
@media (max-width:768px){.co .info p:first-child>.sep:has(+.nw){display:none}.co .info p:first-child>.nw{display:block}}
/* 휴대폰 푸터 — 「회사소개 | 오시는 길 | 개인정보처리방침」 줄을 회사 정보 · 무늬보다 한 줄(31px) 위로, 푸터는 그만큼 길게.
   링크 줄과 회사 정보 사이 54 → 85px · 무늬는 푸터 아래쪽 기준이라 회사 정보와의 자리는 그대로 (2026-10-19 채원님 「한 칸 더 위로 … 그만큼 길이를 늘려줘」) */
@media (max-width:768px){footer.co .bot{margin-top:85px}footer.co .drops{top:auto;bottom:0;height:calc(100% - 31px)}}