/* potrin.net: 남색 + 크림, 프리텐다드(카드뉴스·릴스 썸네일과 같은 브랜드 색)
   색은 전부 아래 토큰으로만 쓴다. 어두운 모드는 토큰 값만 바꾼다. */
:root {
  --navy: #12395E;          /* 브랜드 남색 = 유일한 강조색 */
  --navy-deep: #0C2842;
  --punch: #F5EECD;         /* 남색 위의 크림 글자·버튼 */
  --dim: #8FA6BF;           /* 남색 위의 흐린 글자 */
  --bg: #F7F4EA;            /* 페이지 바탕(크림) */
  --surface: #FFFDF7;       /* 흰 대신 쓰는 밝은 면 */
  --ink: #18212D;           /* 본문 글자 */
  --muted: #56606D;         /* 보조 글자(바탕 대비 AA 이상) */
  --line: #E2DCCB;
  --field: #F7F4EA;
  --error: #A33A2B;
  --shadow: 18 57 94;       /* 남색으로 물든 그림자 */

  /* 개인정보처리방침 페이지가 쓰는 옛 이름 */
  --cream: var(--bg);
  --gray: var(--muted);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1A27;
    --surface: #132334;
    --ink: #ECE7D9;
    --muted: #A7B3C1;
    --line: #243A51;
    --field: #0E1A27;
    --navy-deep: #081523;
    --error: #F08A78;
    --shadow: 0 0 0;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 80px; -webkit-tap-highlight-color: rgb(18 57 94 / .15); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a, button, input, select, textarea, label { touch-action: manipulation; }
body {
  font-family: "Pretendard", -apple-system, "Malgun Gothic", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 18px;
  line-height: 1.65;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); }
.skip { position: absolute; left: 16px; top: -48px; z-index: 20; background: var(--punch); color: var(--navy); font-weight: 800; padding: 10px 16px; border-radius: 999px; }
.skip:focus-visible { top: 12px; }
:focus-visible { outline: 3px solid var(--punch); outline-offset: 3px; border-radius: 4px; }
main :focus-visible { outline-color: var(--navy); }
@media (prefers-color-scheme: dark) { main :focus-visible { outline-color: var(--punch); } }

/* 상단 */
.top { position: sticky; top: 0; z-index: 10; background: rgba(12, 40, 66, .96); backdrop-filter: blur(6px); }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { color: var(--punch); font-weight: 800; letter-spacing: .12em; font-size: 20px; }
nav { display: flex; gap: 28px; align-items: center; }
nav a { color: #C9D6E4; font-size: 15px; font-weight: 600; transition: color .2s ease; }
nav a:hover { color: #fffdf7; }
.nav-cta { background: var(--punch); color: var(--navy) !important; padding: 8px 16px; border-radius: 999px; }

/* 공통 */
section { padding: 112px 0; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.025em; line-height: 1.22; text-wrap: balance; }
.asks b, .how-grid .big, .note { text-wrap: balance; }
h2 { font-size: clamp(32px, 4.6vw, 52px); }
.sub { font-size: 20px; color: var(--muted); margin-top: 16px; max-width: 34em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font: inherit; font-weight: 800; font-size: 18px; padding: 16px 28px; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* 첫 화면 */
.hero { background: var(--navy); color: #fffdf7; padding: 96px 0 112px; }
.eyebrow { color: var(--dim); font-weight: 700; font-size: 16px; margin-bottom: 24px; }
.hero h1 { font-size: clamp(36px, 5.4vw, 68px); max-width: 17em; }
.hero h1 em { font-style: normal; color: var(--punch); }
.lead { max-width: 30em; font-size: 20px; color: #C9D6E4; margin-top: 28px; }
.hero-cta { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.btn-primary { background: var(--punch); color: var(--navy); }
.btn-ghost { border-color: rgba(245, 238, 205, .45); color: var(--punch); background: transparent; }
.btn-ghost:hover { border-color: var(--punch); }

/* 누구를 돕나 - 큰 글자 질문 목록 */
.asks { list-style: none; margin-top: 56px; border-top: 2px solid var(--ink); }
.asks li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 28px 0; }
.asks li + li { border-top: 1px solid var(--line); }
.asks b { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; color: var(--navy); line-height: 1.25; }
.asks span { color: var(--muted); font-size: 18px; }
.note { margin-top: 48px; font-size: 22px; font-weight: 700; color: var(--ink); max-width: 30em; }

/* 무엇을 하나 - 왼쪽 고정 제목, 오른쪽 목록 */
.services { background: var(--surface); }
.services-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.services-head { position: sticky; top: 112px; }
.services-head p { margin-top: 20px; font-size: 20px; color: var(--muted); }
.services-list article { padding: 36px 0; }
.services-list article + article { border-top: 1px solid var(--line); }
.services-list article:first-child { padding-top: 8px; }
.services-list h3 { font-size: clamp(26px, 3vw, 34px); color: var(--navy); margin-bottom: 10px; }
.services-list p { color: var(--muted); font-size: 19px; max-width: 30em; }

/* 어떻게 일하나 - 어두운 선언 */
.how { background: var(--navy-deep); color: #fffdf7; }
.how h2 { color: var(--punch); font-size: clamp(34px, 5vw, 60px); }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 48px; align-items: end; }
.how-grid p { font-size: 20px; color: #C9D6E4; max-width: 28em; }
.how-grid .big { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; color: #fffdf7; line-height: 1.3; letter-spacing: -.02em; }

/* 브랜드 */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.brand {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 36px 28px 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, border-color .25s ease;
}
.brand:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgb(var(--shadow) / .10); border-color: var(--navy); }
.brand img { height: 44px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 6px; }
.brand p { color: var(--muted); font-size: 17px; line-height: 1.5; }
.brand .role { align-self: flex-start; background: var(--bg); color: var(--navy); font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 999px; }
.brand .go { margin-top: auto; font-weight: 700; color: var(--navy); font-size: 15px; }
@media (prefers-color-scheme: dark) {
  .brand img { filter: brightness(0) invert(.92); }  /* 검은 로고를 어두운 바탕에서 보이게 한 가지 색으로 */
  .brand .role, .brand .go, .asks b, .services-list h3 { color: var(--punch); }
}

/* 문의 */
.contact { background: var(--surface); }
.contact-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.contact-head p { margin-top: 18px; font-size: 19px; color: var(--muted); }
.contact-head .direct { font-size: 16px; }
.contact-head .direct a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
form { display: grid; gap: 18px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label { display: grid; gap: 8px; font-weight: 700; font-size: 16px; }
input, select, textarea {
  font: inherit; font-weight: 400; font-size: 17px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--ink);
  transition: border-color .2s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; border-color: transparent; }
@media (prefers-color-scheme: dark) { input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--punch); } }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--error); }
.agree { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--muted); }
.agree input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--navy); }
.contact .btn-primary { background: var(--navy); color: var(--punch); justify-self: start; }
@media (prefers-color-scheme: dark) { .contact .btn-primary { background: var(--punch); color: var(--navy); } }
.form-msg { font-weight: 700; color: var(--ink); }
.form-msg.is-error { color: var(--error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.agree a, footer a { text-decoration: underline; text-underline-offset: 3px; }

/* 바닥 */
footer { background: var(--navy); color: #A9BCD0; padding: 56px 0; font-size: 14px; }
.foot-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.sig { color: var(--punch); font-size: 20px; font-weight: 800; }
.foot-meta { display: flex; gap: 18px; flex-wrap: wrap; }

/* 움직임 - 들어올 때 한 번. 첫 화면은 순서대로, 나머지는 화면에 들어올 때 */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero h1, .hero .lead, .hero .hero-cta { animation: rise .8s cubic-bezier(.16, 1, .3, 1) both; }
  .hero h1 { animation-delay: .08s; }
  .hero .lead { animation-delay: .16s; }
  .hero .hero-cta { animation-delay: .24s; }
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* 휴대폰 */
@media (max-width: 767px) {
  body { font-size: 17px; }
  section { padding: 80px 0; }
  .hero { padding: 72px 0 88px; }
  nav a:not(.nav-cta) { display: none; }
  .asks li { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .services-in, .contact-in, .how-grid, .brand-grid, .row2 { grid-template-columns: 1fr; }
  .services-in, .contact-in { gap: 32px; }
  .services-head { position: static; }
  .how-grid { gap: 28px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .contact .btn-primary { justify-self: stretch; }
  .foot-in { flex-direction: column; align-items: flex-start; }
}