/* ================================================================
   화물인 화물운송 팁 — 목록·글 페이지와 홈의 화물운송 팁 영역
   site.css 의 색·글꼴을 그대로 쓰고, 읽기 좋은 본문 글꼴 크기와 카드만 더함
   ================================================================ */
.tips-body { background: var(--day); }

/* 위치 표시 */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--steel); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 분류 표시 */
.cat { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.cat--save { background: #fff1bf; color: #6b5000; }
.cat--pick { background: #e5efff; color: #1f55b8; }
.cat--case { background: #e3f6ec; color: #0f7a45; }

/* ---------------- 카드 목록 ---------------- */
/* 사장님에게만 보이는 글쓰기·고치기 버튼(손님에게는 안 보임) */
.owner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin-top: 20px; padding: 8px 8px 8px 16px;
  border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 0 14px 30px -18px rgba(14, 26, 46, .6); }
.owner[hidden] { display: none; }
.sec-head .owner { grid-column: 1 / -1; margin-top: 0; }
.owner__tag { margin-right: 4px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .66); }
.owner__btn { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 11px; background: var(--plate); color: var(--plate-ink);
  font-size: 15px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.owner__btn:hover { background: var(--plate-hi); }
.owner__btn--line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .38); }
.owner__btn--line:hover { background: rgba(255, 255, 255, .1); }
.tips-empty { margin: 28px 0 0; padding: 56px 20px; border: 1.5px dashed var(--line); border-radius: 22px; text-align: center; font-size: 17px; color: var(--steel); }
.tips-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.tip-card[hidden] { display: none; }
.tip-card__a { display: flex; flex-direction: column; height: 100%; border-radius: 22px; overflow: hidden; background: #fff; color: inherit; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(14, 26, 46, .06), 0 24px 50px -36px rgba(14, 26, 46, .5); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.tip-card__a:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(14, 26, 46, .08), 0 32px 60px -34px rgba(14, 26, 46, .55); }
/* 차량 그림: 모눈종이 바탕 위에 */
.tip-card__pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(rgba(14, 26, 46, .05) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(14, 26, 46, .05) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(180deg, #f7f9fc, #e9eef5); }
.tip-card__img { position: absolute; left: 4%; bottom: 3%; width: 92%; height: var(--ih, 80%); object-fit: contain; object-position: 50% 100%; transition: transform .45s var(--ease); }
.tip-card__a:hover .tip-card__img { transform: translateX(3%); }
/* 직접 올린 사진은 칸을 꽉 채움 */
.tip-card__img.is-photo, .tip__cover-img.is-photo { left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.tip-card__a:hover .tip-card__img.is-photo { transform: scale(1.03); }
.tip-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px 22px; }
.tip-card__title { font-size: 20px; font-weight: 800; line-height: 1.38; letter-spacing: -.045em; color: var(--ink); }
.tip-card__desc { font-size: 15px; line-height: 1.62; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tip-card__meta { margin-top: auto; padding-top: 4px; font-size: 13.5px; color: var(--steel); }

/* ---------------- 목록 페이지 ---------------- */
.tips-hero { padding: calc(var(--nav-h) + 60px) 0 6px; }
.tips-hero__title { margin-top: 18px; font-size: clamp(40px, 5vw, 60px); font-weight: 800; line-height: 1.1; letter-spacing: -.05em; color: var(--ink); }
.tips-hero__lead { margin-top: 16px; max-width: 34em; font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.tips-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: -.03em; cursor: pointer;
  box-shadow: inset 0 0 0 1px #d6dfea; transition: background-color .2s, color .2s; }
.chip span { font-weight: 600; color: var(--steel); }
.chip:hover { background: #eef3fa; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.chip[aria-pressed="true"] span { color: rgba(255, 255, 255, .7); }
.tips-page { padding-bottom: 110px; }
.tips-page .tip-cta { margin-top: 64px; }

/* ---------------- 글 페이지 ---------------- */
.tip__head { max-width: calc(760px + 2 * var(--gut)); margin: 0 auto; padding: calc(var(--nav-h) + 56px) var(--gut) 0; }
.tip__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 26px; font-size: 14.5px; color: var(--steel); }
.tip__title { margin-top: 14px; font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; line-height: 1.24; letter-spacing: -.05em; color: var(--ink); }
.tip__lead { margin-top: 18px; font-size: 19px; line-height: 1.72; color: var(--ink-2); }
.tip__cover { position: relative; width: calc(100% - 2 * var(--gut)); max-width: 980px; aspect-ratio: 21 / 8; margin: 38px auto 0; border-radius: 28px; overflow: hidden;
  background: linear-gradient(rgba(14, 26, 46, .05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(14, 26, 46, .05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(180deg, #f7f9fc, #e7edf5); }
.tip__cover-img { position: absolute; left: 8%; bottom: 4%; width: 84%; height: var(--ih, 80%); object-fit: contain; object-position: 50% 100%; }

/* 본문: 읽기 편한 글자 크기와 줄 간격 */
.tip__body { max-width: calc(720px + 2 * var(--gut)); margin: 46px auto 0; padding: 0 var(--gut); font-size: 17.5px; line-height: 1.9; color: #2b3a52; word-break: keep-all; }
.tip__body > * + * { margin-top: 18px; }
.tip__body h2 { margin-top: 58px; font-size: 25px; font-weight: 800; line-height: 1.38; letter-spacing: -.045em; color: var(--ink); }
.tip__body h2::before { content: ""; display: block; width: 34px; height: 5px; margin-bottom: 14px; border-radius: 3px; background: var(--plate); box-shadow: 0 0 0 1px rgba(21, 24, 31, .2); }
.tip__body h3 { margin-top: 38px; font-size: 20px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.tip__body h2 + *, .tip__body h3 + * { margin-top: 12px; }
.tip__body strong { color: var(--ink); font-weight: 700; }
.tip__body a { color: var(--sky); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.tip__body ul, .tip__body ol { display: grid; gap: 8px; }
.tip__body li { position: relative; padding-left: 26px; }
.tip__body ul > li::before { content: ""; position: absolute; left: 6px; top: .74em; width: 8px; height: 8px; border-radius: 2px; background: var(--plate); box-shadow: 0 0 0 1px rgba(21, 24, 31, .3); }
.tip__body ol { counter-reset: n; }
.tip__body ol > li { counter-increment: n; }
.tip__body ol > li::before { content: counter(n); position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 800; line-height: 20px; text-align: center; }
.tip__body img { max-width: 100%; height: auto; border-radius: 16px; }
.tip-note { margin-top: 30px !important; padding: 18px 22px; border-radius: 16px; background: #eaf2fd; box-shadow: inset 4px 0 0 var(--sky); color: #1d3c6e; font-weight: 600; }
.tip-table { overflow-x: auto; border-radius: 14px; box-shadow: 0 0 0 1px #dfe6ef; background: #fff; }
.tip-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; white-space: nowrap; }
.tip-table th { padding: 12px 16px; background: #eff3f9; color: var(--ink); font-weight: 800; text-align: left; }
.tip-table td { padding: 12px 16px; border-top: 1px solid #e6ecf3; }
.tip-table td:first-child { font-weight: 700; color: var(--ink); }

/* 접수 안내 상자 */
.tip-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 22px 32px; align-items: center; max-width: calc(860px); margin: 64px auto 0; padding: 30px 30px 30px 34px; border-radius: 26px; color: #fff;
  background: radial-gradient(80% 140% at 100% 0%, rgba(56, 132, 255, .32), transparent 60%), linear-gradient(160deg, #15264a, #0b1630); box-shadow: 0 30px 60px -36px rgba(14, 26, 46, .7); }
.tip > .tip-cta { width: calc(100% - 2 * var(--gut)); }
.tip-cta__title { font-size: 24px; font-weight: 800; line-height: 1.35; letter-spacing: -.045em; }
.tip-cta__copy p { margin-top: 8px; font-size: 15.5px; line-height: 1.65; color: rgba(225, 233, 247, .8); }
.tip-cta__acts { display: grid; gap: 9px; }
.tip-cta__call, .tip-cta__kakao, .tip-cta__order { display: flex; align-items: center; gap: 9px; border: 0; border-radius: 14px; font: inherit; text-decoration: none; cursor: pointer; }
.tip-cta__call { justify-content: center; min-height: 62px; padding: 0 16px; background: var(--plate); color: var(--plate-ink); box-shadow: inset 0 0 0 2px var(--plate-ink), inset 0 0 0 4.5px var(--plate); }
.tip-cta__call svg { width: 22px; height: 22px; }
.tip-cta__call .num { font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: .01em; padding-top: 2px; }
.tip-cta__kakao { min-height: 50px; padding: 0 14px; background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background-color .2s; }
.tip-cta__kakao:hover { background: rgba(255, 255, 255, .16); }
.tip-cta__kakao > svg:first-child { width: 22px; height: 22px; color: var(--plate); }
.tip-cta__kakao span { font-size: 14.5px; font-weight: 700; }
.tip-cta__kakao b { margin-left: auto; font-size: 19px; font-weight: 800; color: var(--plate); }
.tip-cta__copyico { width: 16px; height: 16px; opacity: .7; }
.tip-cta__kakao.is-copied { background: #138a4f; box-shadow: none; }
.tip-cta__kakao.is-copied b, .tip-cta__kakao.is-copied > svg:first-child { color: #fff; }
.tip-cta__order { justify-content: center; min-height: 50px; padding: 0 16px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 800; }
.tip-cta__order svg { width: 17px; height: 17px; }

/* 다른 글 */
.tip-more { margin-top: 90px; padding: 76px 0 30px; background: #fff; box-shadow: 0 -1px 0 #e6ecf3; }
.tip-more__title { font-size: 26px; font-weight: 800; letter-spacing: -.045em; color: var(--ink); }
.tip-more__all, .tips-home__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 26px; color: var(--ink); font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--plate); }
.tip-more__all svg, .tips-home__all svg { width: 15px; height: 15px; }

/* ---------------- 홈의 화물운송 팁 영역 ---------------- */
.tips-home { background: var(--paper); padding: 112px 0; }
.tips-home .tips-home__all { margin-top: 12px; }
.tips-home .tips-grid { margin-top: 44px; }

/* ---------------- 반응형 ---------------- */
@media (max-width: 1080px) {
  .tips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 태블릿(2칸): 홈의 최신 글 3개 중 마지막 하나가 혼자 남지 않게 한 줄을 다 쓰는 가로 카드로 */
@media (min-width: 761px) and (max-width: 1080px) {
  .tips-home .tip-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tips-home .tip-card:last-child:nth-child(odd) .tip-card__a { flex-direction: row; }
  .tips-home .tip-card:last-child:nth-child(odd) .tip-card__pic { flex: 0 0 50%; aspect-ratio: auto; min-height: 220px; }
  .tips-home .tip-card:last-child:nth-child(odd) .tip-card__body { justify-content: center; padding: 26px 28px; }
}
@media (max-width: 760px) {
  .tips-grid { grid-template-columns: 1fr; gap: 16px; }
  .tips-hero { padding-top: 104px; }
  .tips-hero__lead { font-size: 16.5px; }
  .chip { flex: none; height: 44px; padding: 0 14px; font-size: 14.5px; }
  /* 분류 버튼은 한 줄로 두고 옆으로 밀어서 봄 */
  .tips-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding: 2px var(--gut); scrollbar-width: none; }
  .tips-filter::-webkit-scrollbar { display: none; }
  .tips-home__all { padding: 10px 0 6px; }
  .tip-card__title { font-size: 19px; }
  .tip__head { padding-top: 100px; }
  .tip__lead { font-size: 17px; }
  .tip__cover { aspect-ratio: 16 / 9; border-radius: 20px; margin-top: 28px; }
  .tip__body { margin-top: 34px; font-size: 17px; line-height: 1.85; }
  .tip__body h2 { margin-top: 46px; font-size: 22px; }
  .tip-cta { grid-template-columns: 1fr; padding: 24px 20px; border-radius: 22px; }
  .tip-cta__title { font-size: 21px; }
  .tip-more { margin-top: 64px; padding-top: 56px; }
  .tips-home { padding: 84px 0; }
}

/* 사장님 버튼: 휴대폰에서는 안내 글 한 줄, 버튼 두 개를 나란히 */
@media (max-width: 640px) {
  .owner { width: 100%; padding: 10px; }
  .owner__tag { flex-basis: 100%; margin: 0 0 2px 4px; }
  .owner__btn { flex: 1 1 0; justify-content: center; padding: 0 10px; }
}