/* 공통 바닥 — 이 시안은 자기 눈금을 갖고 있어 layouts.css 의 눈금을 쓰지 않습니다. */
html { overflow-x: hidden; }
h1, h2, h3, h4 { line-height: 1.3; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ケアプラス(care-plus.jp) — 흰 바탕에 주황(#ff6b00) 한 색, 영문 큰 제목 「Care for Your Life」와
   콩 모양으로 오려 낸 노란 사진, 검은 원 화살표 버튼 「Who we are」. 사진 위에 흐린 글 「Who we are/01 02 03」
   → Services 4열 사진 카드(주황 이름표) → Blog 분류 알약 + 카드 → News 목록 → 문의·채용 두 칸 →
   그룹 배너 → 주황→연두 그라데이션 푸터 → 「Next Page」 검은 띠. 눈금 10px 기준의 촘촘한 회사 홈. */
/* 색 전환기(palette.js)가 색을 고르기 전에는 이 시안 본래의 색을 씁니다.
   .js-pal 이 붙으면 palettes.css 의 --primary 가 이깁니다. */
body:not(.js-pal) { --primary: #ff6b00; --primary-dk: #c45200; --primary-lt: #ffe6d3; }
body { --or: var(--primary); --ink: #111; --gray: #f2f2f0; }
body { color: var(--ink); font-size: 14px; }
h1, h2, h3 { color: var(--ink); font-weight: 400; }
.eb { font-size: 12px; color: #666; margin-bottom: 8px; padding-left: 40px; position: relative; }
.eb::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 1px; background: #6f6f6f; }
.h2 { font-size: 30px; margin-bottom: 16px; }
.circ { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; }
.circ i { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 12px; }

.hd { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); }
.hd__in { display: flex; align-items: center; height: 70px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.logo i { width: 26px; height: 20px; border-radius: 0 0 14px 14px; background: linear-gradient(90deg, #ff6b00, #ffb800, #9ccc3d); }
.nv { margin-left: auto; display: flex; gap: 28px; font-size: 12px; }
.hd__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 22%; background: var(--or); }

.visual { position: relative; height: 680px; overflow: hidden; }
.visual__bean { position: absolute; right: 4%; top: 40px; width: 62%; height: 560px; overflow: hidden; border-radius: 47% 53% 42% 58% / 55% 40% 60% 45%; }
.visual__bean img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.3) sepia(.4) hue-rotate(-20deg) brightness(1.05); }
.visual__bean::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,184,0,.55), rgba(255,107,0,.25)); }
.visual__t { position: absolute; left: 0; right: 0; top: 130px; }
.visual__t h1 { font-size: 64px; font-weight: 700; letter-spacing: -.01em; color: color-mix(in srgb, var(--primary-dk) 82%, #000); }
.visual__t h1 span { color: var(--ink); }
.visual__t b { display: block; color: var(--primary-dk); font-size: 20px; margin: 10px 0 20px; }
.visual__t p { font-size: 13px; line-height: 2; color: #444; max-width: 380px; }
.visual__t .circ { margin-top: 30px; }
.pick { position: absolute; right: 8%; bottom: 40px; background: #fff; padding: 14px; display: flex; gap: 14px; align-items: center; width: 360px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.pick img { width: 90px; height: 70px; object-fit: cover; }
.pick small { color: var(--primary-dk); font-size: 12px; display: block; } .pick b { font-size: 13px; }

.msg { position: relative; height: 820px; display: grid; align-items: center; }
.msg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.msg::before { content: "Who we are"; position: absolute; left: 6%; top: 80px; z-index: 1; font-size: 70px; line-height: 1.1; color: var(--ink); font-weight: 700; }
.msg__num { position: absolute; right: 8%; bottom: 60px; display: flex; gap: 12px; }
.msg__num i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #333; background: rgba(255,255,255,.7); display: grid; place-items: center; font-size: 12px; font-style: normal; }
.msg__num i:first-child { background: var(--ink); color: #fff; }
.msg__in { position: relative; max-width: 560px; margin-left: auto; margin-right: 10%; }
.msg__in p { line-height: 2.2; margin-bottom: 20px; font-size: 14px; }
.msg__btns { display: flex; gap: 20px; margin-top: 30px; }
.msg__btns a { white-space: nowrap; background: #fff; padding: 14px 24px; box-shadow: 0 6px 20px rgba(0,0,0,.08); }

.sec { padding: 100px 0; }
.svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.sv { position: relative; }
.sv img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.sv__tag { position: absolute; left: 0; top: 200px; background: var(--or); color: #1f1f1f; font-size: 12px; padding: 4px 10px; }
.sv h3 { font-size: 18px; margin-top: 14px; } .sv p { font-size: 12px; color: #666; line-height: 1.8; }
.blog { display: grid; grid-template-columns: 260px 1fr; gap: 50px; }
.cats { display: grid; gap: 8px; align-content: start; }
.cats span { font-size: 12px; padding: 4px 12px; border: 1px solid #ccc; border-radius: 999px; width: fit-content; }
.cats span:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.posts { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 30px; }
.posts img { aspect-ratio: 16/10; object-fit: cover; width: 100%; margin-bottom: 12px; }
.posts h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; } .posts p { font-size: 12px; color: #666; line-height: 1.8; } .posts em { display: block; font-style: normal; font-size: 12px; color: #6f6f6f; margin-top: 8px; }
.blog::before { content: ""; position: absolute; left: -10%; width: 60%; height: 500px; background: var(--gray); border-radius: 50%; z-index: -1; }

.news { display: grid; grid-template-columns: 260px 1fr; gap: 50px; }
.news li { display: flex; gap: 30px; padding: 12px 0; border-bottom: 1px solid #ddd; font-size: 13px; }
.news em { font-style: normal; color: #6f6f6f; white-space: nowrap; }
.wide { display: flex; gap: 6px; height: 400px; }
.wide img { flex: 1; object-fit: cover; min-width: 0; }
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.menu p { font-size: 13px; line-height: 2; color: #444; margin: 12px 0 24px; }
.menu .circ { background: var(--gray); padding: 14px 24px; width: 100%; justify-content: flex-start; }
.group { background: url("/portfolio/assets/img/outdoor-w.jpg") center / cover; padding: 60px 0; text-align: center; color: #fff; position: relative; }
.group::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.group h2 { color: #fff; position: relative; font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.group__l { position: relative; display: flex; justify-content: center; gap: 12px; }
.group__l span { background: #fff; color: var(--ink); padding: 10px 20px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.ft { background: linear-gradient(120deg, #ff6b00, #ffb800 60%, #9ccc3d); color: #1a1a1a; padding: 60px 0 30px; }
.ft .wrap { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 30px; font-size: 12px; }
.ft a { display: block; line-height: 2.2; } .ft b { display: block; margin-bottom: 8px; }
.ft__legal { font-size: 12px; line-height: 1.9; }
.ft small { grid-column: 1 / -1; text-align: right; margin-top: 30px; }
.next { background: #333; color: #fff; padding: 60px 0; }
.next small { display: block; font-size: 11px; opacity: .7; } .next b { font-size: 40px; font-weight: 400; } .next span { display: block; font-size: 13px; }
@media (max-width: 900px) { .nv { display: none; } .visual__bean { width: 90%; right: 5%; top: 300px; height: 300px; } .visual { height: 640px; } .visual__t h1 { font-size: 36px; } .svc, .blog, .posts, .news, .menu, .ft .wrap { grid-template-columns: 1fr; } .msg { height: auto; padding: 80px 0; } .msg__in { margin: 0 24px; } }

@media (min-width: 901px) and (max-width: 1200px) { .visual__bean { width: 56%; right: 2%; } }
/* 좁은 화면 — 첫 화면 사진과 글이 겹치지 않게, Who we are 는 글 위 제목으로, 01·02·03 은 버튼 아래로 */
@media (max-width: 900px) {
  .visual { height: 700px; }
  .visual__t { top: 56px; }
  .visual__bean { top: 340px; height: 290px; }
  .pick { right: 24px; left: 24px; width: auto; bottom: 24px; }
  .msg { display: block; }
  .msg::before { position: relative; display: block; left: auto; top: auto; margin: 0 24px 28px; font-size: 44px; }
  .msg__in { max-width: none; }
  .msg__btns { flex-wrap: wrap; gap: 12px; }
  .msg__num { position: relative; right: auto; bottom: auto; margin: 36px 24px 0; }
  .blog::before { display: none; }
  .wide { height: 260px; }
  .group { padding: 48px 24px; }
  .group h2 { font-size: 20px; text-wrap: balance; }
  .group__l { flex-wrap: wrap; gap: 8px; }
  .group__l span { white-space: nowrap; padding: 10px 14px; }
}

/* ── 원래 인라인 style 이던 자리 — CSP 때문에 클래스로 뺐습니다 ── */
.si-1 { font-size:12px;color:#666; }
.si-2 { position:relative; }

/* ── 마감 손질(5/5) ── */
.ft small { font-size: 12px; }
/* 첫 화면 — 영문 큰 제목이 콩 사진에 걸치지 않게 사진을 오른쪽으로 */
@media (min-width: 1201px) { .visual__bean { width: 54%; right: 3%; } }
@media (min-width: 901px) and (max-width: 1200px) { .visual__bean { width: 50%; right: 2%; } .visual__t h1 { font-size: 52px; } }
/* Who we are — 너무 무겁던 제목을 한 단계 가볍게, 글 단과 같은 높이에서 왼쪽 여백 줄에 맞춤 */
@media (min-width: 901px) {
  .msg { height: 680px; }
  .msg::before { left: max(24px, calc((100% - 1200px) / 2)); top: 50%; transform: translateY(-50%); font-size: 54px; font-weight: 600; letter-spacing: -.01em; }
  .msg::after { content: ""; position: absolute; z-index: 1; left: max(24px, calc((100% - 1200px) / 2)); top: calc(50% + 46px); width: 56px; height: 3px; background: var(--or); }
  .msg__in { margin-right: max(24px, calc((100% - 1200px) / 2)); }
}
/* Services 이름표는 사진 왼쪽 아래 모서리에 — 폭이 바뀌어도 같은 자리 */
.sv { display: grid; align-content: start; }
.sv img, .sv__tag { grid-area: 1 / 1; }
.sv__tag { position: static; align-self: end; justify-self: start; }
.sv h3 { grid-row: 2; } .sv p { grid-row: 3; }
/* 푸터 — 법적 고지 칸을 넓혀 줄 끝 한두 글자 매달림 없게 */
.ft .wrap { grid-template-columns: 1.1fr .8fr .9fr .8fr 1.8fr; }

/* 좁은 화면 */
@media (max-width: 900px) {
  /* 메뉴 — 스크립트 없이 로고 아래 한 줄로 늘 보이게 */
  .hd__in { height: auto; flex-wrap: wrap; padding-top: 14px; }
  .nv { display: flex; order: 2; width: 100%; margin: 10px 0 0; gap: 0; justify-content: space-between; font-size: 13px; }
  .nv a { padding: 10px 0 12px; }
  .svc { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .sv h3 { font-size: 17px; }
  .blog, .news { gap: 28px; }
  .cats { display: flex; flex-wrap: wrap; gap: 8px; }
  .blog br { display: none; }
  .blog .circ { margin-top: 22px; }
  .posts { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .posts h3 { font-size: 16px; }
  .menu { gap: 44px; }
  .ft .wrap { grid-template-columns: repeat(3, 1fr); gap: 26px 16px; }
  .ft .wrap > div:first-child, .ft__legal { grid-column: 1 / -1; }
  .ft small { text-align: left; margin-top: 8px; }
  .sec { padding: 72px 0; }
}
@media (max-width: 600px) {
  .posts { grid-template-columns: 1fr; }
  .posts > div { display: grid; grid-template-columns: 132px 1fr; column-gap: 14px; align-items: start; }
  .posts img { grid-row: 1 / span 3; margin: 0; aspect-ratio: 1; }
  .posts h3 { font-size: 15px; margin-bottom: 4px; }
  .posts em { margin-top: 4px; }
  .wide { height: 180px; }
  .wide img:nth-child(n+3) { display: none; }
}
/* 푸터 — 제목 없는 링크 칸도 Services 칸 첫 줄과 같은 높이에서 시작 */
.ft .wrap > div:nth-child(2), .ft .wrap > div:nth-child(4) { padding-top: 31px; }
@media (min-width: 601px) and (max-width: 900px) { .menu { grid-template-columns: 1fr 1fr; gap: 32px; } }
.group::before { background: rgba(0,0,0,.5); }