/* 공개 화면 스타일. index.html 이 <link> 로 불러온다.
   원래 index.html 안의 <style> 이었다. 파일이 2421줄이 되자 문서 끝에 남은 화면
   확인용 <script> 가 눈에 안 띄어 운영에 유출된 적이 있다 — 길이 자체가 사고
   원인이었다. 빌드 단계는 넣지 않았다. <link> 한 줄이면 되는 일이었다. */
:root{
  --bg:#FFFFFF;--soft:#F4F5F6;--panel:#FAFAFA;--ink:#0A0A0A;--ink-2:#5E6266;
  --line:#EBEDEF;--ok:#127A3E;
  --sans:"Pretendard Variable",Pretendard,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.5}
::selection{background:var(--ink);color:#fff}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;gap:28px;height:60px}
.brand{display:flex;align-items:center;flex:none}
/* 헤더는 심볼만 쓴다. 풀버전은 글자가 2단이라, 로고 높이 22~26px 에 맞추면
   'COACHES' 가 4~6px 로 뭉개진다. 바로 아래 큰 제목에 풀버전이 크게 오므로
   여기서 한 번 더 읽힐 필요도 없다.
   원본(public/logo-mark.png)은 흰색·투명이다. 헤더 바탕이 희므로 그대로 두면
   아무것도 안 보인다. 검정 파일을 따로 만들지 않고 뒤집어 쓴다 — 로고 파일이
   둘이 되면 나중에 한쪽만 바꾸는 사고가 난다. 바꿀 곳은 항상 한 파일이어야 한다.
   위의 전역 img 규칙(width/height 100%, cover)을 여기서 되돌린다. */
.brand .mark{height:26px;width:auto;object-fit:contain;filter:invert(1);display:block}
.gnb{display:flex;gap:22px}
.gnb a{font-size:15px;font-weight:700;color:var(--ink-2);text-decoration:none;transition:.15s}
.gnb a.on,.gnb a:hover{color:var(--ink)}
.hbar .spacer{flex:1}
/* 로그인 자리. 헤더 오른쪽에 남는 것은 이제 이 버튼 하나다 —
   즉시 영입 여부와 계약 잔여일이 잠겨 있는 이유가 여기 있기 때문에,
   잠긴 자리를 보고 누를 곳이 화면에 없으면 그냥 막힌 화면이 된다. */
.hbtn{flex:none;font-size:12.5px;font-weight:800;padding:8px 14px;border-radius:100px;
  border:1.5px solid var(--line);color:var(--ink);background:#fff;transition:.15s;white-space:nowrap}
.hbtn:hover{border-color:var(--ink)}
.hbtn.in{border-color:transparent;background:var(--soft);font-weight:700;color:var(--ink-2)}
.hbtn.in b{color:var(--ink);font-weight:800}

/* Hero */
.hero{padding:34px 0 8px}
/* 큰 제목은 글자로 둔다. 한때 여기에 풀버전 로고를 크게 넣었는데, 바로 위
   헤더에 이미 같은 심볼이 있어서 화면을 열자마자 같은 상표를 두 번 보게 됐다.
   상표를 두 번 보여 준다고 두 배로 기억되지 않는다 — 위아래로 덩어리가
   겹쳐 첫 화면이 정신없어질 뿐이다. 상표는 헤더가 맡고, 여기는 제목이 맡는다. */
.hero h1{font-size:26px;font-weight:900;letter-spacing:-.03em}
.hero .hsub{margin-top:6px;font-size:14px;font-weight:600;color:var(--ink-2)}

/* 라벨 바 — 라벨 4개가 순서를 지킨 채 흐른다.
   세트 하나 폭(--lbshift)만큼만 밀고 되돌아가므로 이음매가 보이지 않는다.
   모서리를 깎지 않고 화면 끝까지 뺀다. 둥근 모서리에 여백을 두면 카드 한 장이
   되어 아래 코치 카드들과 같은 층으로 읽히는데, 이건 카드가 아니라 띠다. */
.labelbar{margin:16px -20px 0;background:var(--ink);color:#fff;
  padding:16px 0;font-size:14.5px;font-weight:700;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.lbtrack{display:flex;align-items:center;width:max-content;will-change:transform;
  animation:lbroll var(--lbdur,26s) linear infinite}
.labelbar:hover .lbtrack{animation-play-state:paused}
.labelbar .lead{font-weight:900}
/* 라벨 사이는 점이 아니라 빈 자리로 나눈다. 점을 찍으면 목록처럼 보이고,
   띠는 목록이 아니라 한 줄이다. 자리 폭이 곧 라벨 간 간격이다 —
   이 칸이 있어야 세트를 이어 붙였을 때 이음매의 간격도 같아진다. */
.labelbar .dot{width:74px;flex:0 0 auto}
@keyframes lbroll{from{transform:translateX(0)}to{transform:translateX(var(--lbshift,-100%))}}
@media(prefers-reduced-motion:reduce){.lbtrack{animation:none}}

/* 카테고리 (종목) — 글자수에 맞는 가로 사각 버튼 */
.cats{padding:22px 0 2px}
.cat-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.cat-row::-webkit-scrollbar{display:none}
.catf{flex:0 0 auto;padding:12px 20px;border-radius:12px;font-size:15px;font-weight:600;
  border:1.5px solid var(--line);color:var(--ink);background:#fff;transition:.16s;white-space:nowrap}
.catf:hover{border-color:var(--ink)}
.catf.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}

/* Controls */
.controls{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:22px 0 8px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:20px}
.count{font-size:15px;font-weight:800}
.count small{color:var(--ink-2);font-weight:600;font-size:13px;margin-left:4px}
.filters{display:flex;gap:7px;flex-wrap:wrap}
.chipf{font-size:13px;font-weight:700;padding:9px 15px;border-radius:11px;
  border:1.5px solid var(--line);color:var(--ink-2);transition:.15s}
.chipf:hover{border-color:var(--ink)}
.chipf.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sortdd{position:relative}
.sortdd-btn{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink);
  border:1.5px solid var(--line);border-radius:11px;padding:9px 14px;background:#fff;transition:.15s;white-space:nowrap}
.sortdd-btn:hover{border-color:var(--ink)}
.sortdd-btn .chev{font-size:10px;color:var(--ink-2);transition:transform .18s}
.sortdd.open .sortdd-btn{border-color:var(--ink)}
.sortdd.open .sortdd-btn .chev{transform:rotate(180deg)}
.sortdd-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:25;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 36px -18px rgba(0,0,0,.4);
  padding:6px;min-width:172px;display:none}
.sortdd.open .sortdd-menu{display:block}
.sortdd-menu button{display:block;width:100%;text-align:left;font-size:13.5px;font-weight:600;
  padding:11px 12px;border-radius:8px;color:var(--ink-2);white-space:nowrap;transition:.12s}
.sortdd-menu button:hover{background:var(--soft);color:var(--ink)}
.sortdd-menu button.on{color:var(--ink);font-weight:800;background:var(--soft)}

/* 카드 그리드 (매물형) */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:16px 0 30px}
@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.grid{grid-template-columns:1fr}}
.empty{grid-column:1/-1;text-align:center;color:var(--ink-2);padding:56px 0;font-size:14px}
.empty-t{font-size:16px;font-weight:800;color:var(--ink)}
.empty-b{margin-top:7px;font-size:14px;line-height:1.6}

/* 조건 남기기 띠 — 목록 아래에 항상 있다.
   예전에는 코치가 0명일 때만 나왔는데, 조건이 안 맞아 돌아가는 기관은
   목록이 비었을 때보다 목록이 찼을 때 훨씬 많다. 네 명 보고 "우리 지역엔
   없네" 하고 닫는 사람에게 남길 자리가 없었다.
   빈 상태에서는 감춘다 — 그쪽 안내문에 이미 같은 버튼이 있다. */
.askbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin:0 0 70px;padding:24px 26px;background:var(--panel);
  border:1px solid var(--line);border-radius:18px}
.askbar-t{font-size:15.5px;font-weight:800}
.askbar-b{margin-top:5px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.askbar-btn{margin-left:auto;flex:0 0 auto;background:var(--ink);color:#fff;border:0;
  border-radius:12px;padding:14px 26px;font:inherit;font-size:14.5px;font-weight:800;
  cursor:pointer;transition:.15s}
.askbar-btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px -14px rgba(0,0,0,.6)}
.ccard{cursor:pointer;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:.2s;display:flex;flex-direction:column}
.ccard:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(0,0,0,.4)}
.ccard:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* 카드 사진칸은 사진이 무엇이든 항상 정사각(1:1)이다.
   aspect-ratio 로만 잡으면 이 속성을 모르는 브라우저(카카오톡 인앱,
   구형 iOS Safari)에서 높이가 auto 로 풀리고, 그러면 칸이 사진의
   원래 비율을 그대로 따라가 카드마다 키가 달라진다 — 전신 사진은
   길쭉하고 얼굴 사진은 뭉툭해진다.
   그래서 ::before 의 padding 으로 높이를 만든다. 퍼센트 padding 은
   항상 '너비' 기준이라 어느 브라우저에서나 너비와 같은 높이가 되고,
   사진은 그 위에 absolute 로 덮어 cover 로 잘라 넣는다.
   flex:0 0 auto — .ccard 가 세로 flex 라, 이게 없으면 칸이 눌려 줄 수 있다.

   4:5(125%) 였던 것을 1:1 로 줄였다. 폰에서 사진이 카드의 3분의 2를
   먹어 한 화면에 두 장이 겨우 들어왔다. 목록의 일은 훑어보게 하는
   것인데, 훑을 것이 화면에 없었다.
   줄인 높이는 그대로 없앤다 — 글자칸에 여백을 넣어 카드 키를 유지하면
   사진만 작아지고 카드는 그대로라 아무것도 나아지지 않는다.

   object-position 을 위로 올린 이유: cover 는 세로로 긴 사진을 위아래
   똑같이 잘라낸다. 인물 사진은 얼굴이 위쪽에 있어서, 가운데 기준으로
   자르면 이마가 먼저 날아간다. 20% 는 '윗부분을 남긴다'는 뜻이다. */
.cthumb{position:relative;flex:0 0 auto;background:var(--soft);overflow:hidden}
.cthumb::before{content:'';display:block;padding-top:100%}
.cthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
/* z-index 가 필요한 이유: 이 뱃지들은 마크업에서 <img> 보다 앞에 있다.
   사진칸을 padding 방식으로 바꾸면서 img 가 absolute 가 됐는데, 위치가
   잡힌 형제끼리는 나중에 나온 쪽이 위에 그려진다 — 그래서 사진이 뱃지를
   덮어 '협의 필요'와 '사전예약 n' 이 통째로 사라졌다.
   마크업 순서를 바꿔도 되지만, 뱃지는 사진 위에 얹는 것이 원래 의도이니
   그 의도를 CSS 에 적어 둔다. */
/* 칩 배경은 반투명이 아니라 불투명이다. 예전에는 흰 칩이
   rgba(255,255,255,.92) 라 뒤 사진이 8% 비쳤다. 밝은 배경 사진 위에서는
   새하얗고 어두운 사진 위에서는 희끄무레해져서, 같은 '협의 필요' 인데
   카드마다 색이 달라 보였다. 사진은 코치마다 다르니 칩 색을 사진에
   맡기면 안 된다.
   불투명해지면서 backdrop-filter 도 뺐다 — 비칠 것이 없는데 흐리게 할
   이유가 없다(칩마다 GPU 레이어를 하나씩 더 만든다). */
.cstatus{position:absolute;z-index:1;top:10px;left:10px;font-size:11px;font-weight:800;padding:6px 10px;
  border-radius:100px}
.cstatus.fa{background:var(--ok);color:#fff}
.cstatus.guest{background:#fff;color:var(--ink);border:1px solid var(--line)}
/* 잠긴 자리. 색을 죽여서 상태값(초록·흰색)과 헷갈리지 않게 한다 —
   회색 칩이 세 번째 상태처럼 보이면 안 된다. 비었다는 뜻이어야 한다. */
.cstatus.lock{background:rgba(255,255,255,.86);color:var(--ink-2);border:1px solid var(--line);font-weight:700}
.cres{position:absolute;z-index:1;top:10px;right:10px;font-size:11px;font-weight:800;color:#fff;
  background:var(--ink);padding:6px 10px;border-radius:100px}
.cbody{padding:14px 14px 16px;display:flex;flex-direction:column;gap:7px}
.ctitle{font-size:15.5px;font-weight:900;letter-spacing:-.01em}
.ctitle span{color:var(--ink-2);font-weight:700;font-size:13px}
.cspec{font-size:12.5px;color:var(--ink-2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.cmeta{font-size:13px;font-weight:800;margin-top:1px}
.cmeta.free{color:var(--ok)}
/* 잠긴 메타 줄은 누를 수 있어야 한다. '로그인 후 확인'이라고만 적고 누를 데가
   없으면, 읽은 사람이 로그인 버튼을 찾아 화면 위쪽까지 올라가야 한다. */
.cmeta.lock{color:var(--ink-2);font-weight:700;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line);cursor:pointer}
.cmeta.lock:hover{text-decoration-color:var(--ink-2)}
.cbadges{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.bdg{font-size:10.5px;font-weight:800;padding:4px 8px;border-radius:6px;background:var(--soft);color:var(--ink-2)}
.bdg.cov{background:var(--ink);color:#fff}

/* 상세 페이지 (헤이딜러 매물 상세 스타일) */
.detail{padding:14px 0 130px}
.back{font-size:14px;font-weight:700;color:var(--ink-2);padding:8px 0;margin-bottom:10px}
.back:hover{color:var(--ink)}
.detail-grid{display:grid;grid-template-columns:400px 1fr;gap:40px;align-items:start}
@media(max-width:760px){.detail-grid{grid-template-columns:1fr;gap:24px}}
.d-photo-wrap{position:sticky;top:80px}
@media(max-width:760px){.d-photo-wrap{position:static}}
/* 카드와 같은 이유로 padding 방식(위 .cthumb 주석 참고). */
.d-photo{position:relative;border-radius:18px;overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.d-photo::before{content:'';display:block;padding-top:125%}
.d-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 사진이 한 장뿐이면 아래 줄은 아예 그리지 않는다. 썸네일 한 개짜리
   줄은 고를 게 없는 선택지라 화면만 어지럽힌다. */
/* 사진이 5장까지 오므로 한 줄에 다 못 들어가면 접힌다. 예전엔 2장이라
   줄넘김을 생각할 일이 없었는데, 고정폭 썸네일 다섯이면 좁은 화면에서
   사진칸 밖으로 삐져나간다. 폭을 줄여 우표만 하게 만드는 대신 접는다 —
   썸네일은 눌러서 고르는 것이라 작아지면 고를 수가 없다. */
.d-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.d-thumb{position:relative;width:64px;flex:0 0 auto;padding:0;border-radius:10px;overflow:hidden;
  background:var(--soft);border:1px solid var(--line);cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s}
.d-thumb::before{content:'';display:block;padding-top:125%}
.d-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.d-thumb:hover{opacity:.85}
.d-thumb.on{opacity:1;border-color:var(--ink)}
.d-brand{font-size:14px;font-weight:700;color:var(--ink-2)}
.d-model{font-size:26px;font-weight:900;letter-spacing:-.02em;margin-top:5px;line-height:1.15}
.d-trim{font-size:15px;color:var(--ink-2);margin-top:8px;line-height:1.55}
.d-badges{display:flex;gap:6px;margin-top:15px;flex-wrap:wrap}
.d-badges .bdg{font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:7px;background:var(--soft);color:var(--ink-2)}
.d-badges .bdg.cov{background:var(--ink);color:#fff}
.d-specs{border-top:2px solid var(--ink);margin-top:22px}
.d-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 2px;border-bottom:1px solid var(--line);font-size:14.5px}
.d-row .k{color:var(--ink-2);font-weight:600}
.d-row .v{font-weight:700;background:var(--soft);color:var(--ink);padding:6px 12px;border-radius:8px}
.d-row .v.free{background:rgba(18,122,62,.10);color:var(--ok);font-weight:800}
/* 값이 여러 개인 줄 — 칸을 나눠 담고, 넘치면 오른쪽 정렬로 다음 줄에 붙인다 */
.d-row .vs{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
/* 펼침 행 (헤이딜러 › 스타일) */
.d-acc{border-bottom:1px solid var(--line)}
.d-row-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 2px;background:none;font-size:14.5px;cursor:pointer}
.d-row-btn .k{color:var(--ink-2);font-weight:600}
.v-link{font-weight:700;display:inline-flex;align-items:center;gap:6px;background:var(--soft);
  color:var(--ink);padding:6px 12px;border-radius:8px;transition:.15s}
.v-link .arw{color:var(--ink-2);font-size:16px;line-height:1;transition:transform .18s}
.d-row-btn:hover .v-link{background:#E7E9EB}
.d-acc.open .v-link{background:var(--ink);color:#fff}
.d-acc.open .v-link .arw{transform:rotate(90deg);color:#fff}
.d-acc-body{display:none;padding:2px 2px 15px}
.d-acc.open .d-acc-body{display:block}
.acc-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.acc-list li{font-size:13.5px;color:var(--ink-2);line-height:1.55;padding-left:15px;position:relative}
.acc-list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.d-section{padding:22px 0;border-bottom:1px solid var(--line)}
.d-section h3{font-size:16px;font-weight:900;margin-bottom:15px}
.opt-list{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:440px){.opt-list{grid-template-columns:1fr}}
.opt-i{font-size:14px;font-weight:600;padding-left:22px;position:relative}
.opt-i::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:900}
.reasons{list-style:none;display:flex;flex-direction:column;gap:13px}
.reasons li{font-size:14.5px;color:var(--ink-2);line-height:1.6;padding-left:17px;position:relative}
.reasons li::before{content:"・";position:absolute;left:0;color:var(--ink);font-weight:900}
.recommend{background:var(--soft);border-radius:16px;padding:22px;border-bottom:none;margin-top:10px}
.d-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:14px 0}
.d-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.d-bar .info{font-size:16px;font-weight:900}
.d-bar .info small{display:block;font-size:12px;color:var(--ink-2);font-weight:600;margin-top:2px}
.d-bar .cta{background:var(--ink);color:#fff;font-size:16px;font-weight:800;padding:15px 44px;border-radius:12px;transition:.16s}
.d-bar .cta:hover{opacity:.88}

/* Modal (기존 흐름 유지) */
.overlay{position:fixed;inset:0;background:rgba(10,10,10,.5);backdrop-filter:blur(4px);
  z-index:60;display:none;align-items:flex-end;justify-content:center}
.overlay.open{display:flex}
@media(min-width:680px){.overlay.open{align-items:center}}
/* 처리방침은 다른 시트 위에서 열려야 한다(동의 문구에서 바로 여는 자리) */
#privacyOverlay{z-index:70}
.sheet{background:#fff;width:100%;max-width:720px;max-height:94vh;overflow-y:auto;border-radius:18px 18px 0 0;animation:rise .26s ease}
@media(min-width:680px){.sheet{border-radius:16px}}
@keyframes rise{from{transform:translateY(22px);opacity:.5}to{transform:translateY(0);opacity:1}}
.sheet-in{display:grid;grid-template-columns:300px 1fr}
@media(max-width:600px){.sheet-in{grid-template-columns:1fr}}
.sheet-photo{position:relative;background:var(--soft);overflow:hidden}
.sheet-photo::before{content:'';display:block;padding-top:125%}
.sheet-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.sheet-photo::before{padding-top:75%}}
.sheet-body{padding:24px 24px 18px;position:relative}
.close{position:absolute;top:14px;right:16px;font-size:24px;color:var(--ink-2);width:34px;height:34px}
.sport-chip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;border:1.5px solid var(--ink);border-radius:100px;padding:5px 12px;margin:8px 0 14px}
.block{padding:15px 0;border-top:1px solid var(--line)}
.block h3{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:9px}
.status-line{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600}
.dot2{width:9px;height:9px;border-radius:50%}
.dot2.fa{background:var(--ok)}.dot2.held{background:var(--ink)}.dot2.guest{background:var(--ink-2)}
.dday{font-size:21px;font-weight:900;margin-top:7px}
.bio-intro{font-size:13.5px;line-height:1.6;margin-bottom:12px}
.career{list-style:none;display:flex;flex-direction:column;gap:8px}
.career li{font-size:13.5px;color:var(--ink-2);padding-left:15px;position:relative;line-height:1.5}
.career li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.bio-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bio-tag{font-size:11px;font-weight:700;padding:5px 10px;border-radius:6px;background:var(--soft)}
.tsel{display:flex;flex-wrap:wrap;gap:8px}
.topt{position:relative;font-size:13px;font-weight:700;padding:11px 15px;border-radius:9px;border:1.5px solid var(--line);color:var(--ink-2);background:#fff;transition:.15s}
.topt:hover{border-color:var(--ink);color:var(--ink)}
.topt.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.topt.prov::after{content:"";position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--ok);border:1.5px solid #fff}
.etc-input{width:100%;border:1.5px solid var(--ink);border-radius:9px;padding:12px 13px;font-size:14px;font-weight:600;outline:none;margin-top:10px}
.prov-hint{font-size:11.5px;color:var(--ink-2);margin-top:10px}
.prov-hint b{color:var(--ok)}
.res-count{font-size:21px;font-weight:900}
.res-count small{font-size:13px;font-weight:600;color:var(--ink-2)}
.bid{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:15px;margin-top:12px}
.bid .lab{font-size:11px;font-weight:800}
.bid .lab span{color:var(--ink-2);font-weight:600}
.bid-input{display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:9px;padding:0 12px;background:#fff;margin-top:9px}
.bid-input input{border:none;outline:none;width:100%;font-size:16px;font-weight:800;padding:12px 0;text-align:right}
/* '만원'이 '만/원'으로 쪼개지면 금액 칸이 아니라 오타처럼 보인다 */
.bid-input .unit{font-size:13px;font-weight:700;color:var(--ink-2);padding-left:6px;white-space:nowrap}
.nofee{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);margin-top:11px;cursor:pointer}
.nofee input{width:16px;height:16px;accent-color:var(--ink)}
.cfields{margin-top:12px;display:none;flex-direction:column;gap:12px}
.fl{font-size:11px;font-weight:800;margin-bottom:7px}
.fl .req{color:#B23A2E;margin-left:3px}
.fl-hint{font-weight:600;color:var(--ink-2);margin-left:4px}
#cfTerm{width:96px;font-size:13px;font-weight:700;text-align:center;
  border:1.5px solid var(--line);border-radius:9px;padding:11px 10px;outline:none;background:#fff}
#cfTerm:focus{border-color:var(--ink)}
.field-box{display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:9px;padding:0 13px;background:#fff}
.field-box input{border:none;outline:none;width:100%;font-size:15px;font-weight:700;padding:12px 0}
.field-box .unit{font-size:13px;font-weight:700;color:var(--ink-2);padding-left:6px;white-space:nowrap}
.field-box input[type=number]{text-align:right;font-weight:800;font-size:16px}
/* 입력을 받지 않는 상태 — 테두리를 죽여 '지금은 쓰는 칸이 아니다'를 보이게 한다 */
.field-box.off{border-color:var(--line);background:var(--soft)}
.field-box.off input{background:transparent;color:var(--ink-2)}
.cta{display:flex;gap:10px;padding:16px 24px 24px}
.btn{flex:1;padding:15px;border-radius:11px;font-size:15px;font-weight:800;transition:.16s}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{opacity:.86}
/* 못 누르는 버튼은 못 누르게 생겨야 한다. 검은 버튼 그대로 두면 눌러도
   아무 일이 없는 것이 고장으로 읽힌다. */
.btn-primary:disabled{background:var(--soft);color:var(--ink-2);cursor:default}
.btn-primary:disabled:hover{opacity:1}
.btn-ghost{background:#fff;border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}

footer{border-top:1px solid var(--line);padding:30px 0;text-align:center}
footer .fmeta{display:flex;justify-content:center;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;color:var(--ink-2)}
footer .fmeta .sep{width:3px;height:3px;border-radius:50%;background:var(--line)}
/* 푸터에도 글자 로고를 두지 않는다. 심볼은 헤더보다 작게 — 저작권 줄은
   읽으라고 있는 줄이 아니라 있어야 해서 있는 줄이다.
   opacity 로 죽이는 이유: 이 줄 전체가 회색인데 심볼만 새까맣게 남으면
   저작권 표시가 아니라 로고를 한 번 더 박은 것처럼 보인다. */
footer .fbrand{display:flex;align-items:center;gap:1px}
footer .fbrand img{height:13px;width:auto;object-fit:contain;filter:invert(1);opacity:.55;display:block}
footer .flink{font-weight:700;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
footer .flink:hover{color:var(--ink)}
.admin-link{margin-top:16px;font-size:12px;font-weight:700;color:var(--ink-2);
  border:1px solid var(--line);border-radius:100px;padding:7px 16px;transition:.15s}
.admin-link:hover{border-color:var(--ink);color:var(--ink)}

/* 관리자 확인 화면 */
.admin{max-width:720px;margin:0 auto;padding:26px 0 80px}
.admin-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.admin-h .lock{font-size:11.5px;font-weight:700;color:var(--ink-2);border:1px solid var(--line);border-radius:100px;padding:6px 12px}
.admin-note{font-size:13px;color:var(--ink-2);margin-bottom:18px;line-height:1.6}
.sub{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px}
.sub-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;background:var(--soft);border-bottom:1px solid var(--line)}
.sub-top .who{font-size:16px;font-weight:900}
.sub-top .who small{font-size:12px;font-weight:600;color:var(--ink-2);margin-left:8px}
.sst{font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:100px;white-space:nowrap}
.sst.wait{background:#fff;color:#B26A00;border:1px solid #B26A00}
.sst.ok{background:var(--ok);color:#fff}
.sst.no{background:#fff;color:#B23A2E;border:1px solid #B23A2E}
.sub-body{padding:15px 18px;display:grid;grid-template-columns:1fr 1fr;gap:11px 20px}
.kv .k{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.kv .v{font-size:13.5px;font-weight:600;line-height:1.5;word-break:break-word}
.kv.full{grid-column:1/-1}
.kv .v a{color:var(--ink);text-decoration:underline}
.sub-cta{display:flex;gap:9px;padding:0 18px 16px;flex-wrap:wrap}
.sub-cta button{font-size:13px;font-weight:800;padding:11px 18px;border-radius:9px;border:1.5px solid var(--line)}
.sub-cta .approve{background:var(--ink);color:#fff;border-color:var(--ink)}
.sub-cta .approve:hover{opacity:.86}
.sub-cta .reject:hover{border-color:#B23A2E;color:#B23A2E}
.admin-empty{text-align:center;color:var(--ink-2);padding:50px 0;font-size:14px}
@media(max-width:560px){.sub-body{grid-template-columns:1fr}}

/* 코치 등록 화면 */
.reg{max-width:560px;margin:0 auto;padding:34px 0 90px}
.reg h1{font-size:26px;font-weight:900;letter-spacing:-.03em;margin:14px 0 12px;line-height:1.15}
.reg .lead{font-size:15px;color:var(--ink-2);line-height:1.6}
.rsteps{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 4px}
.rstep{flex:1;min-width:110px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--soft)}
.rstep.key{border-color:var(--ink);background:#fff}
.rstep .n{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--ink-2)}
.rstep .t{font-size:13.5px;font-weight:800;margin-top:4px}
.fg{margin-top:20px}
.fg>label{display:block;font-size:12.5px;font-weight:800;margin-bottom:8px}
.fg>label .req{color:#B23A2E;margin-left:3px}
.inp{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:13px 14px;font-size:15px;
  font-weight:500;outline:none;background:#fff;transition:.15s}
.inp:focus{border-color:var(--ink)}
textarea.inp{min-height:92px;resize:vertical;line-height:1.6}
select.inp{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%230A0A0A' stroke-width='1.6' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt2{font-size:13.5px;font-weight:700;padding:11px 16px;border-radius:11px;border:1.5px solid var(--line);
  color:var(--ink-2);background:#fff;transition:.15s}
.opt2:hover{border-color:var(--ink)}
.opt2.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
/* 필수/선택을 상자로 갈라 둔다. "이름·연락처·종목·지역만 있으면 된다"는 말을
   글로만 하지 말고 화면 모양으로 보여야, 폼 길이에 놀라 창을 닫지 않는다.
   첫 상자는 테두리를 진하게(=여기까지가 전부), 둘째는 점선으로(=안 채워도 됨). */
.fsec{border:1.5px solid var(--line);border-radius:14px;padding:2px 18px 20px;margin-top:24px;background:#fff}
.fsec.must{border-color:var(--ink)}
.fsec.opt{background:var(--soft);border-style:dashed}
.fsec-h{padding:16px 0 0}
.fsec-h b{display:block;font-size:14px;font-weight:900;letter-spacing:-.01em}
.fsec-h span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:5px}
/* 제목 바로 밑 첫 칸은 여백이 두 번 겹쳐 뜬다 */
.fsec-h + .fg{margin-top:16px}
.callout{border:1.5px solid var(--ink);border-radius:13px;padding:18px;margin-top:24px;background:var(--soft)}
.callout h4{font-size:13.5px;font-weight:800;margin-bottom:6px}
.callout p{font-size:13px;color:var(--ink-2);line-height:1.6}
.agree{display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding:15px;border:1.5px solid var(--line);border-radius:11px;cursor:pointer}
.agree input{width:19px;height:19px;accent-color:var(--ink);margin-top:1px;flex:0 0 auto}
.agree span{font-size:13.5px;font-weight:600;line-height:1.5}
.agree.tight{margin-top:12px}
/* 동의 문구 안의 처리방침 링크 — 라벨 클릭(=체크 토글)과 분리해야 열린다 */
/* 좁은 화면에서 '전문 보기'가 '전문 보/기'로 끊기면 눌러야 할 링크로 안 보인다 */
.agree .plink{font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.field-box textarea{border:none;outline:none;width:100%;font-size:15px;font-weight:600;
  padding:12px 0;resize:vertical;min-height:84px;line-height:1.6;font-family:inherit}
.privacy-doc{font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.privacy-doc h4{font-size:13.5px;font-weight:800;color:var(--ink);margin:18px 0 6px}
.privacy-doc h4:first-child{margin-top:0}
.privacy-doc ul{padding-left:18px;list-style:disc}
/* 이 페이지는 코치만 보는 게 아니다. 흘러들어온 센터·브랜드 담당자가
   막다른 길에 서지 않도록 끝에 문을 둔다 — 배너 말고 작은 안내 한 블록. */
.xlink{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);text-align:center}
.xlink b{display:block;font-size:13.5px;font-weight:800}
.xlink p{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin:7px auto 0;max-width:380px}
.xbtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:15px}
.xbtn{font-size:13px;font-weight:700;padding:10px 16px;border-radius:10px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);transition:.15s;white-space:nowrap}
.xbtn:hover{border-color:var(--ink)}
.rsubmit{width:100%;background:var(--ink);color:#fff;font-size:16px;font-weight:800;padding:16px;border-radius:12px;margin-top:24px;transition:.16s}
.rsubmit:hover{opacity:.88}
.rdone{display:none;text-align:center;padding:64px 0}
.rdone .mk{width:60px;height:60px;border-radius:50%;background:var(--ok);color:#fff;font-size:30px;display:grid;place-items:center;margin:0 auto 20px}
.rdone h2{font-size:24px;font-weight:900;letter-spacing:-.02em;margin-bottom:12px}
.rdone p{font-size:15px;color:var(--ink-2);max-width:440px;margin:0 auto 6px;line-height:1.65}
.rhint{font-size:12px;color:var(--ink-2);line-height:1.5;margin-top:8px}
.ta{resize:vertical;min-height:96px;font-family:inherit;line-height:1.6}
/* 본인인증 — 입력칸과 버튼이 한 줄에 붙어 '지금 눌러야 할 것'이 보이게 한다 */
.vrow{display:flex;gap:8px;align-items:center;margin-top:8px}
.vrow .inp{flex:1;min-width:0}
.vbtn{flex:0 0 auto;white-space:nowrap;background:var(--ink);color:#fff;font-size:13.5px;
  font-weight:800;padding:0 16px;height:46px;border-radius:10px;transition:.16s}
.vbtn:hover{opacity:.88}
.vbtn:disabled{background:var(--soft);color:var(--ink-2);cursor:default;opacity:1}
/* 사진 두 칸 — 코치가 접수하면서 직접 올린다(012).
   칸을 나란히 두는 이유: 무엇을 몇 장 내야 하는지가 한눈에 보인다.
   '사진 첨부' 버튼 하나만 두면 몇 장인지, 어떤 사진인지 읽어야 안다. */
/* 폭을 묶어 둔다. 폼 전체 너비로 두면 데스크톱에서 사진 칸만 화면
   한 판을 차지해, 아래 항목이 있다는 걸 모르고 지나친다. */
.phrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;max-width:340px}
/* 이 칸은 사진을 넣기 전엔 안이 비어 있다. 높이를 aspect-ratio 로만
   잡으면 그 속성을 모르는 브라우저에서 높이가 0 이 되어 칸 자체가
   사라진다 — 코치가 올릴 자리를 못 찾는다. padding 으로 세운다. */
.phbox{position:relative;border:1.5px dashed var(--line);border-radius:12px;
  background:var(--soft);overflow:hidden;cursor:pointer;transition:.15s;text-align:center}
.phbox::before{content:'';display:block;padding-top:133.33%}
.phbox:hover{border-color:var(--ink)}
.phbox.on{border-style:solid;border-color:var(--ink);background:#fff}
.phbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phlabel{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  padding:0 12px;font-size:13px;font-weight:800;line-height:1.5}
/* 점선만으로는 '누르는 곳'인지 '읽는 곳'인지 갈리지 않는다.
   + 하나가 그 판단을 없앤다. 사진이 들어오면 사라진다. */
.phbox:not(.on) .phlabel::before{content:'+';display:block;font-size:26px;
  font-weight:400;color:var(--ink-2);line-height:1;margin-bottom:10px}
.phlabel span{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-top:5px}
/* 사진이 들어오면 라벨은 아래쪽 띠로 물러난다. 지우고 다시 그리지 않는
   이유는, 어느 칸이 대표인지가 사진을 넣은 뒤에도 계속 보여야 해서다. */
.phbox.on .phlabel{top:auto;bottom:0;transform:none;padding:8px 10px;
  background:rgba(10,10,10,.72);color:#fff;font-size:11.5px}
.phbox.on .phlabel span{display:none}
.phx{position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:50%;
  background:rgba(10,10,10,.72);color:#fff;font-size:15px;line-height:26px;display:none}
.phbox.on .phx{display:block}
.vmsg{font-size:12.5px;line-height:1.5;margin-top:8px;display:none}
.vmsg.show{display:block}
.vmsg.ok{color:var(--ok);font-weight:700}
.vmsg.err{color:#c0392b;font-weight:700}
/* 인증이 끝나면 번호를 잠근다 — 인증한 번호와 접수한 번호가 갈라지지 않게 */
.inp:disabled{background:var(--soft);color:var(--ink-2)}
.kw-group{margin-top:14px}
.kw-title{font-size:11.5px;font-weight:800;color:var(--ink-2);margin-bottom:9px}
.kw-preview{margin-top:16px;background:var(--soft);border:1px solid var(--line);border-radius:12px;
  padding:16px;font-size:14.5px;font-weight:600;line-height:1.6;color:var(--ink)}
.kw-preview.empty{color:var(--ink-2);font-weight:500}
.kw-prompt{margin-top:12px;font-size:13px;color:var(--ink-2);background:var(--soft);border:1px dashed var(--line);border-radius:11px;padding:14px;text-align:center}
.kw-preview .lbl{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase;margin-bottom:8px}
/* 직접 입력 — 제시된 칩에 없는 분야를 코치가 직접 적는다.
   칩보다 눈에 덜 띄어야 한다. 먼저 제시안을 보게 하고, 없을 때만 쓰게 한다. */
.kw-etc{margin-top:9px;font-size:13.5px;padding:10px 13px}
.opt2.etc{border-style:dashed}
.opt2.etc.sel{border-style:solid}
.opt2.etc::after{content:'×';margin-left:7px;font-weight:800;opacity:.55}
/* 전속 설명 */
.explain{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:24px}
.explain .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;
  background:var(--ink);color:#fff;padding:5px 12px;border-radius:100px;margin-bottom:14px}
.explain h3{font-size:18px;font-weight:900;letter-spacing:-.02em;line-height:1.35;margin-bottom:11px}
.explain>p{font-size:13.5px;color:var(--ink-2);line-height:1.7}
.explain-points{display:flex;flex-direction:column;gap:13px;margin-top:18px}
/* 사실 블록만 남고 머리글이 없어진 경우 — 상자 안쪽 여백이 두 번 겹치지 않게 */
.explain-points:first-child{margin-top:0}
.ep{padding-left:17px;position:relative}
.ep::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.ep b{display:block;font-size:14px;font-weight:800;margin-bottom:2px}
.ep span{font-size:13px;color:var(--ink-2);line-height:1.55}
.tagchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.tagchip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:8px 9px 8px 13px}
.tagchip button{font-size:17px;line-height:1;color:var(--ink-2);width:18px;height:18px;
  display:grid;place-items:center;border-radius:5px;transition:.12s}
.tagchip button:hover{background:rgba(0,0,0,.07);color:var(--ink)}

/* ===================== 모바일 최적화 ===================== */
@media(max-width:760px){
  .wrap{padding:0 16px}
  /* 헤더: 로고 + 네비(코치 영입/등록) + 성사 카운터 */
  .hbar{height:54px;gap:14px}
  .brand .mark{height:23px}
  .gnb{gap:14px}
  .gnb a{font-size:14px}
  /* 히어로 + 라벨 바 */
  .hero{padding:22px 0 4px}
  .hero h1{font-size:21px}
  .hero .hsub{font-size:13px}
  .labelbar{margin:14px -16px 0;font-size:13px;padding:14px 0}
  .labelbar .dot{width:46px}
  /* 카테고리 */
  .cats{padding:16px 0 2px}
  .catf{padding:11px 18px;font-size:14.5px}
  /* 컨트롤: 결과 수 + 정렬 드롭다운 한 줄, 필터는 아래 가로 스크롤 */
  .controls{align-items:center;gap:10px;padding:16px 0 2px}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:8px -16px 0;padding:0 16px}
  .filters::-webkit-scrollbar{display:none}
  /* nowrap 만으로는 칸이 좁아지면 글자가 줄바꿈된다 — '전체'가 '전/체'로 쪼개진다.
     칩은 줄이지도 접지도 말고 옆으로 밀려나게 둔다. */
  .filters .chipf{flex:0 0 auto;white-space:nowrap}
  /* 카드: 폰에서 2열 */
  .grid{grid-template-columns:1fr 1fr;gap:12px;padding:14px 0 24px}
  /* 폰에서는 버튼을 오른쪽에 붙이면 글자와 겹쳐 좁아진다. 아래로 내리고 꽉 채운다. */
  .askbar{gap:16px;padding:20px 18px;margin-bottom:56px}
  .askbar-t{font-size:14.5px}
  .askbar-b{font-size:13px}
  .askbar-btn{margin-left:0;width:100%;padding:15px 0}
  .cbody{padding:12px 12px 14px;gap:6px}
  .ctitle{font-size:14px}
  .ctitle span{font-size:12px}
  .cspec{font-size:12px;min-height:34px}
  .cstatus,.cres{font-size:10.5px;padding:5px 9px}
  /* 상세 페이지 */
  .detail{padding:8px 0 calc(118px + env(safe-area-inset-bottom))}
  .back{font-size:14px;padding:10px 0}
  /* 사진은 화면 폭을 그대로 쓴다. 예전엔 340px 로 묶어 두었는데, 그 숫자는
     작은 폰을 기준으로 잡은 것이라 요즘 큰 폰(440pt)에서는 양옆이 50px 씩
     비고 정작 봐야 할 사진이 작아졌다. 코치를 고를 때 제일 먼저 보는 것이
     사진이므로 여기서 폭을 아낄 이유가 없다. */
  .d-photo-wrap{max-width:none;margin:0}
  /* 그래도 화면을 다 먹지는 않게 자른다. 62vh 는 화면 기준이라 어느 코치든
     같은 높이로 잘린다 — 카드처럼 들쭉날쭉해지지 않는다.
     요즘 폰에서는 4:5 비율이 먼저 걸려서 이 값이 실제로 자르는 일은 드물다.
     작은 폰에서 사진이 한 화면을 통째로 덮는 것만 막는 안전선이다. */
  .d-photo{max-height:62vh;margin:0}
  /* 썸네일도 같이 키운다. 사진이 커진 만큼 64px 은 우표처럼 보이고,
     썸네일은 눌러서 고르는 것이라 작으면 고를 수가 없다.
     5장이 정확히 한 줄에 들어가는 폭이라 몇 장이 오든 줄이 넘어가지 않는다. */
  .d-thumb{width:calc((100% - 32px) / 5)}
  .d-model{font-size:22px}
  .d-trim{font-size:14px}
  .d-section h3{font-size:15.5px}
  /* 하단 고정바: 홈바 안전영역 반영 */
  .d-bar{padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
  .d-bar .info{font-size:15px}
  .d-bar .cta{padding:15px 30px;font-size:15px}
  /* 제안 시트 */
  .sheet{max-height:92vh;border-radius:18px 18px 0 0}
  .cta{padding:14px 18px calc(20px + env(safe-area-inset-bottom))}
  /* iOS 입력 확대 방지: 폼 입력 16px 이상 */
  .field-box input,.etc-input,.bid-input input{font-size:16px}
  /* 등록 폼: 2열 → 1열, 입력 16px */
  .reg{padding:26px 0 70px}
  .reg h1{font-size:22px}
  .two{grid-template-columns:1fr}
  .inp{font-size:16px}
}
@media(max-width:360px){
  .grid{grid-template-columns:1fr}
}