/* 친절한이서방 브랜드 홈페이지 공통 블록.
   색: 친절한이서방 브리프 — Sage Green #53705E(주색, 예전 Deep Green #123D2A를 연하게), Sage Tint #DDE4D8(넓은 초록 면), Warm Ivory #F5F0E5(바탕), Ocean Blue #176B83(보조),
   Muted Gold #B68C50(장식·큰 글자만), Charcoal #242424(글자). 글꼴은 Noto Serif KR / Noto Sans KR. */
:root {
  --p-bg: #f5f0e5; --p-surface: #ebe6d8; --p-ink: #242424; --p-muted: #5e5b55;
  --p-accent: #176b83; --p-accent-ink: #ffffff; --p-action: #53705e; --p-action-ink: #f5f0e5;
  /* 넓은 초록 면: 연한 세이지 틴트 위에 차콜 글자 */
  --p-inv-bg: #dde4d8; --p-inv-surface: #e8ede4; --p-inv-ink: #242424; --p-inv-muted: #4d564f;
  --p-inv-accent: #176b83; --p-inv-accent-ink: #ffffff; --p-inv-action: #53705e; --p-inv-action-ink: #f5f0e5;
  --kd-gold: #b68c50;
  --font-display: "Noto Serif KR", "Nanum Myeongjo", serif;
  --font-text: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --display-tracking-xl: -0.035em;
}
/* 한국어는 어절 단위로 줄을 바꾼다 */
h1, h2, h3, p, li, dd, .mo-wh__text, .footer__lede { word-break: keep-all; }

/* 친절한이서방 붓글씨 로고: 밝은 바탕엔 검정, 어두운 바탕엔 아이보리 */
.kd-logo { display: block; width: auto; height: 40px; max-width: 100%; }
.nav__logo { display: inline-flex; align-items: center; }
.nav .kd-logo { height: 62px; }
.closing__links .kd-logo { height: 64px; }
.hero__text > .kd-logo--hero { height: 46px; margin-bottom: var(--s-5); }
@media (max-width: 639px) { .nav .kd-logo { height: 42px; } .closing__links .kd-logo { height: 52px; } .hero__text > .kd-logo--hero { height: 34px; } }

/* 히어로 제목: 한글 폭에 맞춰 한 단계 작게 */
:root { --ly-h1-xl: clamp(30px, 1.6vw + 22px, 46px); }
.hero--photo h1 { max-width: none; line-height: 1.2; }

/* 작은 영문·한글 머리말: 금색은 큰 글자·장식에만 쓰므로 머리말 글자는 주색, 앞의 짧은 선만 금색 */
.kd-kicker { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); font-size: 14px; font-weight: 500; color: var(--action); }
.kd-kicker::before { content: ""; width: 28px; height: 1px; background: var(--kd-gold); }

/* 02 브랜드 이야기: 글과 큰 사진, 가치 네 가지 */
.story { display: flex; flex-direction: column; gap: var(--s-5); }
.story h2 { margin: 0; }
.story__lead { margin: 0; font-size: 17px; line-height: 1.8; }
.values { list-style: none; margin: 0; padding: 0; display: grid; }
.values > li { display: flex; align-items: baseline; gap: var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.values > li:first-child { border-top: 1px solid var(--line); }
.values__no { font: 700 15px/1 var(--font-display); color: var(--kd-gold); min-width: 2ch; }
.values__name { font-size: 18px; font-weight: 500; }

/* 03 상품: 여덟 칸, 사진 높이 한 가지 */
#products .panel { --p-h: 128px; }
#products .product { gap: var(--s-2); }
#products .product h3 { margin: var(--s-2) 0 0; display: flex; align-items: center; gap: var(--s-3); }
#products .product p { margin: 0; }
.product__tag { font: 500 12px/1 var(--font-text); padding: 5px 8px; border: 1px solid var(--action); color: var(--action); }
@media (min-width: 640px) and (max-width: 1023px) { #products { --h: 2; } #products .panel { --p-h: 200px; } }
@media (max-width: 639px) {
  #products { --hm: 2; }
  #products .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #products .grid > .card { grid-column: auto; }
  #products .panel { --p-h: 110px; }
  #products .product h3 { flex-wrap: wrap; gap: var(--s-2); }
}

/* 04 품질과 유통: 넓은 사진 한 장, 그 아래 다섯 단계 */
.quality__photo { margin-bottom: var(--s-7); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }
.steps > li { border-top: 1px solid var(--line-strong); padding-top: var(--s-4); }
.steps__no { font: 700 15px/1 var(--font-display); color: var(--kd-gold); }
.steps h3 { margin: var(--s-3) 0 var(--s-2); font-size: 18px; }
.steps p { margin: 0; font-size: 14px; color: var(--muted); }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .steps { grid-template-columns: minmax(0, 1fr); } .quality__photo { --ratio: 64% !important; } }

/* 05 기업 거래 */
.partner__cta { margin-top: var(--s-6); }

/* 06 문의: 닫는 줄의 연락처 세 칸 */
.contact-cols { margin-top: var(--s-2); }
.contact-col { border-top: 1px solid var(--line-strong); padding-top: var(--s-4); }
.contact-col h3 { margin: 0 0 var(--s-2); font-size: 18px; }
.contact-col p { margin: 0 0 var(--s-1); }

/* 채널 카드 */
.channel__icon { --ic-s: 72px; width: 72px; height: 72px; object-fit: contain; }
.channel__panel { --p-h: 260px; display: flex; align-items: center; justify-content: center; align-self: stretch; }
@media (max-width: 1023px) { .channel__panel { --p-h: 200px; } }
@media (max-width: 639px) { .channel__panel { --p-h: 140px; } .channel__icon { --ic-s: 56px; width: 56px; height: 56px; } }
.channel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.channel > .link, .channel > .t-small { margin-top: auto; }

/* 문의서 옆 연락처 줄: 휴대폰에서는 항목 이름 아래에 값을 둔다 */
@media (max-width: 639px) {
  #form .rows > li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  #form .rows__value { text-align: left; }
}
.contact__photo { margin-top: var(--s-7); }
@media (max-width: 639px) { .contact__photo { --ratio: 110% !important; } }

/* 푸터의 법적 표시 */
.footer__company { font-style: normal; flex-basis: 100%; }

/* 메인 페이지의 푸터: 문의 구역 없이 링크와 사업자 표시만 (한 화면 높이를 쓰지 않는다) */
.footer--plain { padding-block: var(--s-9) var(--s-7); }
.footer--plain .closing__links { display: grid; gap: var(--s-7); }

/* 약속 두 줄: 사진 아래 큰 명조 한 줄과 작은 한 줄 */
.quality__lines { display: grid; gap: var(--s-3); }
.quality__lines p { margin: 0; }
.quality__lines p:first-child { font: var(--display-weight) clamp(22px, 1.4vw + 14px, 32px)/1.4 var(--font-display); letter-spacing: -0.02em; }
.quality__lines p:last-child { font-size: 17px; font-weight: 500; color: var(--action); display: flex; align-items: center; gap: var(--s-3); }
.quality__lines p:last-child::before { content: ""; width: 28px; height: 1px; background: var(--kd-gold); }

/* 약속 네 가지: 두 줄 아래 네 칸 */
.promises { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.promises > li { border-top: 1px solid var(--line-strong); padding-top: var(--s-4); display: grid; gap: var(--s-2); }
.promises__no { font: 700 15px/1 var(--font-display); color: var(--kd-gold); }
.promises__name { font: var(--display-weight) 20px/1.4 var(--font-display); letter-spacing: -0.02em; }
@media (max-width: 1023px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .promises { gap: var(--s-4); margin-top: var(--s-6); } .promises__name { font-size: 17px; } }

/* 구역 안 내용을 위쪽이 아닌 화면 가운데에 둔다: 큰 화면에서 구역 아래가 비어 보이지 않게.
   첫 화면(hero)과 스크롤에 붙는 구역(pinned-chapters)은 제외 */
main > section.section:not([data-moment="pinned-chapters"]) { display: flex; flex-direction: column; justify-content: center; }
main > section.section:not([data-moment="pinned-chapters"]) > .wrap { flex: none; height: auto; }

/* 브랜드 소개: 일하는 순서 세 칸 (스크립트 없이도 같은 모양) */
.work-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
.work-step { display: grid; gap: var(--s-3); align-content: start; }
.work-step > .frame { margin-bottom: var(--s-3); }
.work-step__no { font: 700 15px/1 var(--font-display); color: var(--kd-gold); }
.work-step h3 { margin: 0; font-size: 20px; line-height: 1.4; }
.work-step p { margin: 0; color: var(--muted); }
@media (max-width: 1023px) { .work-steps { grid-template-columns: minmax(0, 1fr); } .work-step { grid-template-columns: 40% minmax(0, 1fr); column-gap: var(--s-5); } .work-step > .frame { grid-row: span 3; margin: 0; } }
@media (max-width: 639px) { #work { --hm: 2; } .work-step { grid-template-columns: minmax(0, 1fr); } .work-step > .frame { grid-row: auto; } }

/* 맺음 구역 제목은 한 줄로 (휴대폰에서만 줄바꿈 허용) */
.closing__cta h2 { max-width: none; }
@media (min-width: 640px) { .closing__cta h2 { white-space: nowrap; } }

/* 첫 화면 문구 상자: 아이보리에 흰색을 더 섞은 밝은 톤 */
.hero--photo:not([data-box="none"]) .hero__text { background: #fbf9f4; }

/* 푸터 링크: 묶음마다 한 줄(제목 다음에 링크를 가로로), 두 줄로 */
.footer__rows { display: grid; gap: var(--s-4); align-content: start; }
.footer__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-6); }
.footer__row h3 { margin: 0; min-width: 6em; font: 500 var(--t-small)/1.4 var(--font-text); color: var(--muted); }
.footer__row ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: 0; padding: 0; list-style: none; }
.footer__row a { display: inline-flex; align-items: center; min-height: 44px; }
/* 푸터 링크 한 줄 */
.closing__links .footer__line, .footer--plain .footer__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2) var(--s-7); align-self: start; }
.footer__line a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
@media (max-width: 1023px) { .closing__links .footer__line, .footer--plain .footer__line { justify-content: flex-start; gap: var(--s-1) var(--s-5); } }

/* 브랜드 소개 첫 화면: 사진을 키워 섬과 배가 문구 상자 오른쪽에 오도록 (넓은 화면만) */
@media (min-width: 1024px) {
  .hero--photo > .hero__bg.hero__bg--shift { inset: 0 auto 0 0; width: 135%; object-position: 0% 55%; }
}

/* 문의 페이지: 오른쪽 문의서를 왼쪽(표 + 사진) 높이에 맞춰, 아래 끝을 사진 아래 끝과 같은 선에 둔다 */
@media (min-width: 1024px) {
  #form > .wrap.grid { align-items: stretch; }
  #form .form { align-self: stretch; grid-template-rows: auto minmax(0, 1fr) auto auto auto; align-content: stretch; }
  #form .form > .field--full { display: flex; flex-direction: column; min-height: 0; }
  #form .form > .field--full textarea { flex: 1 1 auto; height: auto; min-height: 160px; }
  #form .form > .form__status:empty { display: none; }
}

/* 브랜드 소개 회사 정보: 사진을 왼쪽(제목 ~ 표 마지막 줄) 높이에 맞춰 같은 선에서 끝낸다 */
@media (min-width: 1024px) {
  #overview > .wrap.grid { align-items: stretch; }
  #overview > .wrap.grid > .frame { --ratio: 0px !important; align-self: stretch; height: auto; min-height: 0; }
}

/* 머리 바를 높여 로고 위아래에 여유를 둔다 (로고 62px / 바 100px, 휴대폰 42px / 68px) */
:root { --nav: 100px; }
@media (max-width: 639px) { :root { --nav: 68px; } }
/* 머리 메뉴 글씨 조금 크게 */
@media (min-width: 1024px) { .nav .nav__links .nav__link { font-size: 17px; } }