/* 공통 바닥 — 이 시안은 자기 눈금을 갖고 있어 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); }

/* UMICAHI(umicahi.com) — 흰 바탕에 청록(#0098bc) 한 색과 연청록·연노랑 얼룩. 머리는 로고, 일·영 두 줄
   메뉴, 오른쪽 끝 청록 「문의」 상자. 히어로 사진 위에 흰 상자 따옴표 글 → 메시지(사진 + 글) → 서비스
   (사진 위에 청록 상자 겹침) → EPISODE 큰 청록 영문 + 일러스트 카드 → STAFF → 저널 카드 셋 → CONTACT
   → ACCESS 청록 그라데이션 띠에 시설 카드 → 청록 푸터. 오른쪽 아래 떠 있는 RECRUIT 카드. */
/* 색 전환기(palette.js)가 색을 고르기 전에는 이 시안 본래의 색을 씁니다.
   .js-pal 이 붙으면 palettes.css 의 --primary 가 이깁니다.
   흰 글씨를 얹는 자리(문의 상자·서비스 상자·ACCESS 띠·푸터)는 --primary-dk 만 씁니다. */
body:not(.js-pal) { --primary: #0098bc; --primary-dk: #00758f; --primary-lt: #dff3f8; }
body { --cy: var(--primary); --cy-l: var(--primary-lt); --yel: #fff4c2; --ink: #1f1f1f; }
body { color: var(--ink); font-size: 14px; }
.hd, .mv, .sec, .access, .ft { text-wrap: pretty; }
h1, h2, h3 { color: var(--ink); font-weight: 500; }
.blob { position: absolute; border-radius: 50% 40% 60% 45% / 45% 60% 40% 55%; z-index: 0; }
.z { position: relative; z-index: 1; }

.hd { position: sticky; top: 0; z-index: 50; background: #fff; }
.hd__in { display: flex; align-items: center; height: 100px; gap: 40px; padding-right: 0; }
.logo { display: flex; flex-direction: column; align-items: center; font-weight: 700; letter-spacing: .2em; font-size: 16px; line-height: 1.3; }
.logo i { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--cy); display: grid; place-items: center; color: var(--primary-dk); font-size: 22px; font-style: normal; margin-bottom: 4px; }
.logo small { font-size: 12px; letter-spacing: 0; color: #5a5a5a; font-weight: 400; }
.nv { margin-left: auto; display: flex; gap: 26px; font-size: 14px; text-align: center; line-height: 1.4; }
.nv small { display: block; font-size: 12px; color: var(--primary-dk); letter-spacing: .08em; margin-top: 2px; }
.hd__cta { background: var(--primary-dk); color: #fff; width: 120px; height: 100px; display: grid; place-content: center; text-align: center; font-size: 14px; line-height: 1.4; }
.hd__cta small { display: block; font-size: 12px; letter-spacing: .08em; margin-top: 2px; }

.mv { position: relative; height: 760px; overflow-x: clip; }
.mv .blob:nth-child(1) { left: -80px; top: 200px; width: 420px; height: 360px; background: var(--cy-l); }
.mv .blob:nth-child(2) { right: 10%; bottom: 40px; width: 300px; height: 240px; background: var(--yel); }
.mv img { position: absolute; left: 18%; top: 56px; width: 70%; height: 600px; object-fit: cover; opacity: .9; }
.mv__q { position: absolute; z-index: 2; left: 4%; bottom: 120px; background: #fff; padding: 22px 34px 22px 48px; font-size: 26px; line-height: 1.8; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.mv__q::before { content: "“"; color: var(--primary-dk); font-size: 44px; line-height: 1; position: absolute; left: 14px; top: 14px; }
.mv__side { position: absolute; z-index: 1; left: 4%; top: 100px; font-size: 13px; line-height: 2; color: #555; }
.mv__news { position: absolute; z-index: 1; left: 18%; top: 16px; font-size: 14px; display: flex; gap: 20px; }
.mv__news b { color: var(--primary-dk); } .mv__news b::before { content: "● "; }

.sec { padding: 100px 0; position: relative; }
.msg { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.msg h2 { font-size: 30px; line-height: 1.8; margin-bottom: 8px; }
.msg h2 span { background: var(--cy-l); padding: 4px 12px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.msg small { display: block; color: var(--primary-dk); font-size: 13px; margin-bottom: 26px; }
.msg p { line-height: 2.2; margin-bottom: 16px; }
.msg img { width: 80%; margin-left: auto; aspect-ratio: 3/4; object-fit: cover; }
.msg .blob { right: 0; top: -40px; width: 320px; height: 260px; background: var(--yel); }

.svc { position: relative; height: 640px; }
.svc .blob { left: 30%; top: 0; width: 700px; height: 500px; background: var(--cy-l); }
.svc img { position: absolute; left: 0; top: 60px; width: 60%; height: 480px; object-fit: cover; }
.svc__box { position: absolute; z-index: 2; right: 5%; top: 160px; width: 46%; background: var(--primary-dk); color: #fff; padding: 44px; }
.svc__box h2 { color: #fff; font-size: 26px; margin-bottom: 16px; }
.svc__box p { font-size: 14px; line-height: 2; margin-bottom: 24px; }
.svc__box a { display: block; border: 1px solid #fff; color: #fff; text-align: center; padding: 12px; font-size: 14px; }
.svc__v { position: absolute; right: 0; top: 60px; writing-mode: vertical-rl; font-size: 12px; letter-spacing: .3em; color: var(--primary-dk); }

.ep__h { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 40px; }
.ep__h small { font-size: 13px; color: var(--primary-dk); display: block; margin-bottom: 8px; }
.ep__h h2 { font-size: 64px; color: var(--primary-dk); line-height: 1; letter-spacing: .05em; font-weight: 700; }
.ep__h p { font-size: 14px; line-height: 2; }
.ep__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ep__cards > div { background: #f6fbfc; border: 1px solid var(--cy-l); padding: 16px 16px 22px; }
.ep__cards figure { position: relative; margin: 0 0 18px; }
.ep__cards img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.ep__cards i { position: absolute; right: 12px; bottom: -22px; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12); display: grid; place-items: center; font-style: normal; font-size: 26px; line-height: 1; }
.ep__cards small { display: block; color: var(--primary-dk); font-size: 12px; letter-spacing: .04em; padding-inline: 4px; }
.ep__cards b { display: block; font-size: 18px; margin-top: 6px; padding-inline: 4px; }

.staff { position: relative; overflow-x: clip; }
.staff .blob { left: 40%; top: 40px; width: 500px; height: 300px; background: var(--yel); }
.staff img { width: 70%; aspect-ratio: 16/9; object-fit: cover; }
.staff__box { position: relative; z-index: 2; background: #fff; margin: -60px 0 0 auto; width: 60%; padding: 40px; }
.staff__box h2 { font-size: 26px; letter-spacing: .1em; margin-bottom: 4px; } .staff__box small { color: var(--primary-dk); font-size: 12px; letter-spacing: .2em; } .staff__box p { font-size: 14px; line-height: 2; margin: 14px 0 20px; }
.line { display: inline-block; border: 1px solid var(--cy); color: var(--primary-dk); padding: 12px 40px; font-size: 14px; }

.journal small { color: var(--primary-dk); font-size: 13px; } .journal h2 { font-size: 24px; margin-bottom: 30px; }
.journal__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.journal__g img { aspect-ratio: 4/3; object-fit: cover; width: 100%; margin-bottom: 12px; }
.journal__g em { font-style: normal; font-size: 12px; border: 1px solid var(--cy); color: var(--primary-dk); padding: 1px 10px; border-radius: 999px; }
.journal__g b { display: block; color: var(--primary-dk); margin: 10px 0 4px; font-size: 15px; } .journal__g p { font-size: 13px; color: #555; }
.contact { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; align-items: start; border-top: 1px solid var(--cy-l); padding-top: 56px; }
.contact h2 { font-size: 36px; color: var(--primary-dk); letter-spacing: .1em; font-weight: 400; line-height: 1.1; } .contact h2 small { display: block; font-size: 13px; color: var(--ink); letter-spacing: 0; margin-top: 8px; }
.contact b { font-size: 26px; color: var(--primary-dk); display: block; margin: 4px 0; } .contact p { font-size: 13px; color: #555; }
.contact .line { display: block; text-align: center; margin-top: 8px; }
.access { background: linear-gradient(180deg, var(--primary-dk), color-mix(in srgb, var(--primary-dk) 72%, #000)); color: #fff; padding: 80px 0; }
.access h2 { color: #fff; text-align: center; font-size: 34px; letter-spacing: .2em; font-weight: 400; line-height: 1.2; } .access h2 small { display: block; font-size: 13px; letter-spacing: .1em; margin-top: 8px; }
.fac { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.fac__c { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; background: #fff; color: var(--ink); padding: 20px; font-size: 14px; line-height: 1.9; }
.fac img { aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.fac b { display: block; font-size: 18px; margin-bottom: 10px; color: var(--primary-dk); }
.fac__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fac__tags span { border: 1px solid var(--primary-dk); color: var(--primary-dk); padding: 0 10px; font-size: 12px; line-height: 1.9; border-radius: 999px; }
.ft { background: var(--primary-dk); color: #fff; padding: 40px 0; font-size: 13px; }
.ft .wrap { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.ft nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 24px; }
.ft .logo i { border-color: #fff; color: #fff; }
.ft__legal { width: 100%; font-size: 12px; color: #fff; line-height: 1.8; }

@media (max-width: 1100px) and (min-width: 901px) {
  .hd__in { gap: 24px; } .nv { gap: 16px; font-size: 13px; }
  .svc__box { width: 54%; right: 3%; }
}
@media (max-width: 900px) {
  .hd { position: relative; }
  .hd__in { height: auto; flex-wrap: wrap; gap: 0; padding: 14px 0 0; }
  .logo { flex-direction: row; gap: 10px; align-items: center; }
  .logo i { width: 40px; height: 40px; font-size: 18px; margin: 0; }
  .logo small { margin-left: 2px; }
  .hd__cta { margin-left: auto; width: auto; height: auto; padding: 8px 14px; }
  .nv { order: 3; width: 100%; margin: 12px 0 0; padding: 10px 0 12px; border-top: 1px solid var(--cy-l); flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
  .nv small { display: none; }
  .mv { height: auto; padding: 24px 0 32px; }
  .mv .blob:nth-child(1) { left: -60px; top: 160px; width: 240px; height: 220px; }
  .mv .blob:nth-child(2) { right: -40px; bottom: 30px; width: 200px; height: 160px; }
  .mv img { position: relative; left: auto; top: auto; display: block; width: calc(100% - 32px); margin-inline: auto; height: 320px; }
  .mv__side { display: none; }
  .mv__q { position: relative; left: auto; bottom: auto; margin: -48px 16px 0; font-size: 20px; padding: 18px 20px 18px 40px; }
  .mv__q::before { font-size: 36px; left: 12px; top: 12px; }
  .mv__news { position: relative; left: auto; top: auto; margin: 24px 16px 0; flex-wrap: wrap; gap: 4px 14px; }
  .sec { padding: 72px 0; }
  .msg, .ep__h, .journal__g, .contact, .ep__cards { grid-template-columns: 1fr; }
  .msg { gap: 32px; }
  .msg h2 { font-size: 24px; }
  .msg .blob { width: 200px; height: 170px; top: -30px; }
  .msg img { width: 86%; }
  .svc { height: auto; overflow-x: clip; }
  .svc .blob { left: auto; right: 0; top: 20px; width: 260px; height: 220px; }
  .svc img { position: relative; width: 100%; height: 280px; top: auto; }
  .svc__box { position: relative; top: auto; right: auto; width: auto; margin: -40px 12px 0; padding: 28px 24px; }
  .svc__box h2 { font-size: 22px; }
  .svc__v { display: none; }
  .ep__h { gap: 20px; margin-bottom: 28px; }
  .ep__h h2 { font-size: 48px; }
  .ep__cards { gap: 20px; }
  .staff .blob { left: auto; right: 0; width: 260px; height: 200px; }
  .staff img, .staff__box { width: 100%; margin: 0; }
  .staff__box { padding: 28px 24px; }
  .staff__box h2 { font-size: 22px; }
  .journal__g { gap: 36px; }
  .contact { gap: 28px; }
  .fac { grid-template-columns: 1fr; }
  .fac__c { grid-template-columns: 1fr; gap: 18px; padding: 16px 16px 22px; }
  .fac img { aspect-ratio: 4/3; }
  .ft nav { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .fac__c { grid-template-columns: 220px 1fr; }
  .msg img { width: 64%; }
  .ep__cards { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ep__cards b { font-size: 16px; }
  .journal__g { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .contact { grid-template-columns: 1fr 1fr; }
  .contact h2 { grid-column: 1 / -1; }
}

/* ── 원래 인라인 style 이던 자리 — CSP 때문에 클래스로 뺐습니다 ── */
.si-1 { font-size: 12px; color: #5f5f5f; margin-left: 4px; }
.si-2 { color: #fff; flex-direction: row; gap: 10px; }
.si-3 { border-color: #fff; color: #fff; margin: 0; }