/* [E-11] ============================================================ page-find */

:root {
  --fd-pad-150: clamp(56px, 7.81vw, 150px);   /* container padding-block 150 */
  --fd-gap-170: clamp(64px, 8.85vw, 170px);   /* container gap 170 */
  --fd-line:    #e5e5e5;                       /* 입력 박스 테두리 (시안) */
  --fd-fill:    #f9f9f9;                       /* 입력 박스 배경 (시안) */
  --fd-ph:      #999999;                       /* placeholder */
  --fd-card-line: #eeeeee;                     /* 학원 카드 테두리 (시안) */
  --nt-btn:     clamp(40px, 2.604vw, 50px);    /* 페이지 버튼 (notice 와 동일) */
  --nt-hover:   #eeeeee;
}

/* ============================================================
   visual 73:2797 (1920x400 · bg #e35457)
   ============================================================ */
.fv {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--brand-cta); color: var(--white);
  min-height: clamp(180px, 20.83vw, 400px);
  display: flex; align-items: center;
}
/* 73:2811 — 좌측 세로 중앙 · opacity .7 */
.fv__bg {
  /* 시안: absolute · left 0 · 480×500 · 세로 중앙 · opacity .70.
     세로 중앙을 transform 으로 잡으면 [data-parallax] 의 transform 이 그걸 덮는다 —
     transform 을 쓰지 않는 auto-margin 중앙 정렬로 둔다. */
  position: absolute; left: 0; top: 0; bottom: 0; margin-block: auto;
  width: clamp(160px, 25vw, 480px); height: clamp(167px, 26.04vw, 500px);
  object-fit: cover; object-position: left center;
  opacity: .7; z-index: 0; pointer-events: none;
}
.fv__inner {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md);
  padding-right: calc(var(--gutter) + clamp(0px, 5.21vw, 100px));  /* 시안 pr-100 */
}
.fv__text { display: flex; flex-direction: column; align-items: flex-start;
            gap: var(--gap-md); min-width: 0; }            /* 73:2799 gap 30 */
.fv__title { font-size: clamp(26px, 3.958vw, 76px); line-height: 1;
             font-weight: 700; white-space: nowrap; }      /* 73:2800 Bold 76 / lh 1.0 */
.fv__char { flex: 0 0 auto; width: clamp(88px, 8.96vw, 172px); height: auto; }

@media (max-width: 1023px) {
  .fv-sh--sq2, .fv-sh--p2 { display: none; }   /* 마스코트 좌측과 겹친다 */
}
/* spec 반응형 의도: 768 이하 장식 도형 4개 숨김 */
@media (max-width: 768px) {
}
@media (max-width: 479px) {
  .fv__char { display: none; }
  .fv__bg { opacity: .4; }
  .fv__inner { padding-right: var(--gutter); }
}

/* ============================================================
   container 73:2816 — py150 · gap170 · 자식 가운데 정렬 · bg #ffffff
   ============================================================ */
.fd-body {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--fd-gap-170);
  padding-block: var(--fd-pad-150);
  width: 100%;
  background: var(--white);
}

/* ============================================================
   공용 타이틀 블록 (81:993 / 88:861 · gap 30)
   ============================================================ */
.fd-title {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gap-md); text-align: center; max-width: 100%;
}
.fd-title__mark { width: clamp(40px, 2.656vw, 51px); height: auto; }   /* 81:994 51x50 */
.fd-title__h {                                     /* 81:995 / 88:863 Bold 60 / lh 1.4 */
  font-size: clamp(26px, 3.125vw, 60px); line-height: 1.4;
  font-weight: 700; color: var(--ink); white-space: nowrap;
}
.fd-title__lead {                                  /* 81:996 / 88:864 Medium 22 / lh 1.8 / #222 */
  font-size: clamp(14px, 1.1458vw, 22px); line-height: 1.8;
  font-weight: 500; color: var(--ink-2); white-space: nowrap;
}

/* ============================================================
   검색 + 결과 목록 81:992 (w-full · gap 48)
   ============================================================ */
.fd-find {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(24px, 2.5vw, 48px);
  padding-inline: var(--gutter);
}

/* ---- 검색바 87:1158 (800x86 · pad 20 · gap 16 · r10) ---- */
.fd-search {
  width: min(800px, 100%);
  display: flex; align-items: center;
  gap: clamp(10px, .8333vw, 16px);
  padding: clamp(12px, 1.0417vw, 20px);
  background: var(--white); border-radius: 10px;
  box-shadow: 0 8px 12px rgba(0, 0, 0, .15);
  transition: box-shadow var(--mo-fast) var(--ease-out);
}
.fd-search:focus-within { box-shadow: 0 10px 18px rgba(0, 0, 0, .18); }
.fd-search__field {                              /* 87:1159 flex:1 · gap 12 */
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: clamp(8px, .625vw, 12px);
}
.fd-search__ico { flex: 0 0 auto; width: clamp(20px, 1.25vw, 24px); height: auto; }
.fd-search__input {                              /* 87:1162 Medium 18 / lh 1.0 / ph #999 */
  flex: 1 1 0; min-width: 0;
  border: 0; background: none; padding: 0;
  height: clamp(24px, 1.5625vw, 30px);
  font-size: clamp(14px, .9375vw, 18px); line-height: 1;
  font-weight: 500; color: var(--ink-2);
}
.fd-search__input::placeholder { color: var(--fd-ph); opacity: 1; }
.fd-search__input:focus { outline: none; }
.fd-search:focus-within { outline: 3px solid transparent; }
.fd-search__input:focus-visible { outline: none; }
.fd-search__input::-webkit-search-cancel-button { cursor: pointer; }
.fd-search__btn {                                /* 87:1163 91x46 · pad 14/28 · r10 · #e35457 */
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: clamp(40px, 2.396vw, 46px);
  padding: 14px clamp(16px, 1.458vw, 28px);
  border-radius: 10px; background: var(--brand-cta); color: var(--white);
  font-size: clamp(14px, .9375vw, 18px); line-height: 1; font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 6px rgba(227, 84, 87, .15);
  border: none;
  transition: box-shadow var(--mo-fast) var(--ease-out),
              color var(--mo-base) var(--ease-out);
}
.fd-search__btn:hover { box-shadow: 0 8px 12px rgba(227, 84, 87, .3); }

/* ---- 결과 영역 85:1057 (1000 고정 · gap 20) ---- */
.fd-results {
  width: min(1000px, 100%);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(14px, 1.042vw, 20px);
}

/* 85:1058 검색 결과 카운트 (gap 6 · lh 1.0 · 16px) */
.fd-count {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 6px; row-gap: 4px;
  font-size: clamp(13px, .8333vw, 16px); line-height: 1.2;
  font-weight: 500; color: #444444;                 /* 85:1061 Medium #444 */
}
.fd-count > span:first-child { font-weight: 700; color: #1a1a1a; }   /* 85:1059 Bold #1a1a1a */
.fd-count__n { font-weight: 700; color: var(--brand-cta); }          /* 85:1060 Bold #e35457 */

/* ---- 학원 카드 목록 (세로 gap 20) ---- */
.fd-list { width: 100%; display: flex; flex-direction: column; gap: clamp(14px, 1.042vw, 20px); }

.fd-card {                                        /* 1000x166 · pad 40 · r30 · border #eee */
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 1.667vw, 32px);
  width: 100%; min-height: clamp(120px, 8.646vw, 166px);
  padding: clamp(20px, 2.0833vw, 40px);
  background: var(--white);
  border: 1px solid var(--fd-card-line); border-radius: var(--r-lg);
  box-shadow: 0 8px 8px rgba(0, 0, 0, .02);
  transition: transform var(--mo-fast) var(--ease-out),
              box-shadow var(--mo-fast) var(--ease-out),
              border-color var(--mo-fast) var(--ease-out);
}
.fd-card[hidden] { display: none; }
.fd-card:hover { transform: translateY(-4px); box-shadow: 0 12px 20px rgba(0, 0, 0, .08); }

.fd-card__info {                                  /* flex:1 · gap 20 */
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(12px, 1.042vw, 20px);
}
.fd-card__name {                                  /* Bold 24 / lh 1.0 / #1a1a1a */
  width: 100%;
  font-size: clamp(18px, 1.25vw, 24px); line-height: 1.1;
  font-weight: 700; color: #1a1a1a;
}
.fd-card__details { width: 100%; display: flex; flex-direction: column;
                    align-items: flex-start; gap: 10px; }
.fd-card__row {                                   /* gap 8 · 아이콘 16 + 텍스트 */
  width: 100%; display: flex; align-items: center; gap: 8px;
  font-size: clamp(14px, .8333vw, 16px); line-height: 1.2;
  font-weight: 500; color: #555555;
}
.fd-card__row img { flex: 0 0 auto; width: 16px; height: 16px; }
.fd-card__row > span { flex: 1 1 0; min-width: 0; }
.fd-card__row a { transition: color var(--mo-fast) var(--ease-out); }
.fd-card__row a:hover { color: var(--brand-cta); text-decoration: underline;
                        text-underline-offset: 3px; }

.fd-card__btn {                                   /* 213x44 · border 2 #e35457 · r30 · pad 14/28 */
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: clamp(40px, 2.292vw, 44px);
  padding: 14px clamp(16px, 1.458vw, 28px);
  background: var(--white);
  border: 2px solid var(--brand-cta); border-radius: var(--r-lg);
  color: var(--brand-cta);
  font-size: clamp(14px, .8333vw, 16px); line-height: 1; font-weight: 500;
  white-space: nowrap;
  transition: color var(--mo-base) var(--ease-out),
              border-color var(--mo-base) var(--ease-out);
}
.fd-card__btn img { flex: 0 0 auto; width: 16px; height: 16px;
                    transition: filter var(--mo-fast) var(--ease-out); }

.fd-results:has([data-academy-empty]:not([hidden])) .fd-count { display: none; }

/* ---- 페이지네이션 (notice .nt-page 와 동일) ---- */
.fd-page {
  display: flex;
  justify-content: center;
  padding-top: var(--gap-md);
  width: 100%;
}
.nt-page {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  flex-wrap: wrap;
}
.nt-page__grp { display: flex; align-items: center; gap: clamp(6px, .52vw, 10px); }
.nt-page__arrow {
  display: grid; place-items: center;
  width: clamp(20px, 1.25vw, 24px); height: clamp(20px, 1.25vw, 24px);
  transition: transform var(--mo-fast) var(--ease-back), opacity var(--mo-fast) var(--ease-out);
}
.nt-page__arrow img { width: 100%; height: auto; }
.nt-page__arrow--flip img { transform: scaleX(-1); }
.nt-page__arrow:hover { transform: scale(1.18); }
.nt-page__arrow.is-disabled { opacity: .35; pointer-events: none; }
.nt-page__num {
  display: grid; place-items: center;
  width: var(--nt-btn); height: var(--nt-btn);
  border-radius: 50%;
  font-size: clamp(13px, .8333vw, 16px); line-height: 1; font-weight: 500;
  color: var(--ink-2);
  padding-top: var(--optical-y);
  box-sizing: border-box;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out),
              transform var(--mo-fast) var(--ease-back);
}
.nt-page__num:hover { background: var(--nt-hover); }
.nt-page__num.is-current { background: var(--footer-bg); color: var(--white); }
.nt-page__num.is-current:hover { background: var(--footer-bg); transform: none; }

/* 0건 안내 (시안 미정의 · 기본 숨김) */
.fd-empty {
  width: 100%; padding: clamp(24px, 2.6vw, 50px) 20px; text-align: center;
  font-size: clamp(14px, .9375vw, 18px); line-height: 1.6;
  font-weight: 500; color: #555555;
  border: 1px dashed var(--fd-card-line); border-radius: var(--r-lg);
}

/* ============================================================
   우리 동네 요청하기 88:860 (full-bleed · bg #fff1f0 · py120 · gap70)
   ============================================================ */
.fd-req {
  width: 100%;
  background: var(--tint-pink);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(32px, 3.646vw, 70px);
  padding: clamp(56px, 6.25vw, 120px) var(--gutter);
}

/* ---- 폼 카드 81:997 (1000x520 · pad 60 · r30 · gap 40) ---- */
.fd-form {
  width: min(1000px, 100%);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(16px, 3.125vw, 60px);
  box-shadow: 0 12px 16px rgba(0, 0, 0, .05);
  display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(24px, 2.083vw, 40px);
}

/* 81:998 fields — gap 20 */
.fd-form__fields { display: flex; flex-direction: column; gap: clamp(14px, 1.042vw, 20px); }
.fd-form__row { display: flex; gap: clamp(12px, 1.25vw, 24px); }   /* 81:999 gap 24 */
.fd-form__row > .field { flex: 1 1 0; min-width: 0; }

.fd-form .field { gap: 12px; }                     /* 라벨↔박스 gap 12 */
.fd-form .field > label {                          /* Medium 18 / lh 1.0 / #222 */
  font-size: clamp(14px, .9375vw, 18px); line-height: 1.2;
  font-weight: 500; color: var(--ink-2);
}
.fd-form__memo > label { color: #1d1717; }         /* 81:1036 만 #1d1717 (시안 그대로) */

/* 공통 입력 박스 (base .control 위에 시안 값 덮어쓰기) */
.fd-form .control {
  border-color: var(--fd-line);
  border-radius: 10px;
  padding-inline: clamp(14px, 1.0417vw, 20px);
  font-size: clamp(13px, .8333vw, 16px);
  line-height: 1;
  color: var(--ink-2);
}
.fd-form input.control {
  padding-top: var(--optical-y);
  box-sizing: border-box;
}
/* background-color 만 바꾼다 — 단축 속성은 base.css 의 배경 처리를 지운다 */
.fd-form .control--fill { background-color: var(--fd-fill); }    /* 81:1002 / 81:1006 bg #f9f9f9 */
.fd-form .control::placeholder { color: var(--fd-ph); opacity: 1; }
.fd-form .control:focus {
  border-color: var(--brand-cta); background-color: var(--white);
  box-shadow: 0 0 0 3px rgba(227, 84, 87, .15);
}
.fd-form textarea.control {                        /* 81:1044 h150 · bg #ffffff */
  height: clamp(120px, 7.813vw, 150px); min-height: 0;
  padding-block: clamp(14px, 1.0417vw, 20px);
  background-color: var(--white);
  line-height: 1.6; resize: vertical;
}

/* 오류 표시 (site.js 가 .has-error 를 붙인다 · 시안 미정의 → 추론) */
.fd-form .field.has-error .control { border-color: var(--brand); background-color: #fff5f5; }

/* ---- 제출 버튼 81:1054 (880x70 · r10 · bg #e35457) ---- */
.fd-form__submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: clamp(52px, 3.646vw, 70px);
  padding: 12px clamp(20px, 2.083vw, 40px);
  border-radius: 10px; background: var(--brand-cta); color: var(--white);
  font-size: clamp(16px, 1.1458vw, 22px); line-height: 1; font-weight: 500;
  box-shadow: 0 8px 10px rgba(227, 84, 87, .2);
  border: none;
  transition: box-shadow var(--mo-fast) var(--ease-out),
              color var(--mo-base) var(--ease-out);
}
.fd-form__submit:hover { box-shadow: 0 12px 18px rgba(227, 84, 87, .32); }
.form-msg {
  margin-top: -8px;
  font-size: clamp(12px, .8333vw, 16px); line-height: 1.5;
  color: var(--brand); font-weight: 500;
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 1279px) {
  .fd-title__h, .fd-title__lead { white-space: normal; }
}

@media (max-width: 1023px) {
  .fd-card { padding: 32px; }
  .fd-form { padding: 40px; }
}

@media (max-width: 768px) {
  /* 카드: 가로 → 세로 스택 · 버튼 전폭 */
  .fd-card {
    flex-direction: column; align-items: stretch;
    gap: 20px; min-height: 0; border-radius: var(--r-md);
  }
  .fd-card__btn { width: 100%; }
  /* 요청 폼: 1열 스택 */
  .fd-form { padding: 24px; border-radius: var(--r-md); }
  .fd-form__row { flex-direction: column; gap: clamp(14px, 1.042vw, 20px); }
  .fd-form .field { gap: 10px; }
  .fd-form .control { height: 52px; }
  .fd-form textarea.control { height: 130px; }
}

@media (max-width: 479px) {
  /* 검색바: 입력 위 · 버튼 아래 전폭 */
  .fd-search { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .fd-search__field { width: 100%; }
  .fd-search__btn { width: 100%; }
  .fd-card { padding: 20px; }
  .fd-form { padding: 16px; }
  .fd-form textarea.control { height: 120px; }
  .fd-empty { padding-inline: 14px; }
}

/* ---- 장식 도형 4개 — 시안 get_design_context 실측 (중심 % + 회전) ---- */
.fv-sh--sq1 { left: 90.73%; top: 27.75%; --rot: 30.26deg; --c: #ffda75; }
.fv-sh--sq2 { left: 73.93%; top: 43.12%; --rot: -53.01deg; --c: #12deab; }
.fv-sh--p1 { left: 91.57%; top: 75.02%; --rot: -30.46deg; }
.fv-sh--p2 { left: 67.76%; top: 62.74%; --rot: 94.88deg; }