/* 세현 게시판·회원 페이지(온라인 상담, 수술 후 상담, 공지사항, 회원가입, 아이디·비밀번호 찾기).
   틀은 scripts/sehyun-sub-pages.mjs, 동작은 site/js/sehyun-board.js. 글자 크기와 색은 sehyun-sub.css 와 같은 규칙이다.
   입력 칸 글자는 16px 아래로 내리지 않는다(아이폰이 입력할 때 화면을 확대한다). */

/* 방문자가 쓴 글과 입력하는 글자는 줄인 Pretendard 에 없는 한글일 수 있어 PretendardFull 로 채운다(sehyun-overrides.css 에 정의). */
.sh-sub :is(.sh-board, .sh-form, .sh-board-msg) { font-family:'Pretendard', 'PretendardFull', 'Noto Sans KR', sans-serif; }
.sh-sub :is(.sh-board, .sh-form) :is(input, select, textarea, button) { font-family:inherit; }
.sh-sub .sh-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- 게시판 ---------- */
.sh-sub .sh-board-sec { padding:12rem 0 14rem; }
.sh-sub .sh-board { max-width:1200px; margin:0 auto; }
.sh-sub .sh-board[aria-busy="true"] { opacity:.55; transition:opacity .2s; }
.sh-sub .sh-board-status { padding:8rem 0; text-align:center; font-size:calc(1.5rem * var(--fs-767)); opacity:.7; }
.sh-sub .sh-board-msg { padding:8rem 2rem; text-align:center; border-top:2px solid var(--color-primary); border-bottom:1px solid var(--sh-line); }
.sh-sub .sh-board-msg-t { font-size:calc(1.7rem * var(--fs-767)); line-height:1.7; color:var(--color-primary); white-space:pre-line; }
.sh-sub .sh-board-msg .sh-btns { margin-top:3.6rem; }
/* button 요소는 sehyun-sub.css 가 글자 크기를 물려받게 해 두어 여기서 정한다 */
.sh-sub .sh-board .sh-btn, .sh-sub .sh-form .sh-btn, .sh-sub .sh-board-msg .sh-btn { min-width:16rem; height:5.2rem; cursor:pointer; font-family:inherit; font-size:calc(1.4rem * var(--fs-767)); font-weight:500; }

.sh-sub .sh-board-top { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:2rem; margin-bottom:2rem; }
.sh-sub .sh-board-cats { display:flex; flex-wrap:wrap; gap:.8rem; }
.sh-sub .sh-board-cat { display:inline-flex; align-items:center; height:4rem; padding:0 1.8rem; border:1px solid rgba(0,0,0,.15); border-radius:2rem;
 font-size:calc(1.4rem * var(--fs-767)); color:var(--color-primary); transition:background .25s, color .25s, border-color .25s; }
.sh-sub .sh-board-cat:hover { border-color:var(--color-primary); }
.sh-sub .sh-board-cat[aria-current] { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.sh-sub .sh-board-total { margin-left:auto; font-size:calc(1.4rem * var(--fs-767)); opacity:.7; }

.sh-sub .sh-board-list { border-top:2px solid var(--color-primary); }
.sh-sub .sh-board-row a { display:flex; align-items:center; gap:1.6rem; padding:1.8rem 1.6rem; border-bottom:1px solid var(--sh-line);
 font-size:calc(1.5rem * var(--fs-767)); color:var(--color-primary); transition:background .2s; }
.sh-sub .sh-board-row a:hover { background:#faf7f0; }
.sh-sub .sh-board-row a:focus-visible { outline:2px solid var(--color-key); outline-offset:-2px; }
.sh-sub .sh-board-row :is(.no, .cat, .state, .name, .date, .hits) { flex:none; }
.sh-sub .sh-board-row .no { width:7rem; text-align:center; opacity:.55; font-size:calc(1.3rem * var(--fs-767)); }
.sh-sub .sh-board-row .cat { width:9rem; color:var(--color-key); font-weight:500; font-size:calc(1.4rem * var(--fs-767)); }
.sh-sub .sh-board-row .title { flex:1; min-width:0; display:flex; align-items:center; gap:.8rem; }
.sh-sub .sh-board-row .title .t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.sh-sub .sh-board-row .cmt { flex:none; color:var(--color-key); font-size:calc(1.3rem * var(--fs-767)); }
.sh-sub .sh-board-row .re { flex:none; padding:.2rem .8rem; border:1px solid var(--color-key); border-radius:.4rem; color:var(--color-key); font-size:calc(1.2rem * var(--fs-767)); }
.sh-sub .sh-board-row.is-reply .title { padding-left:2rem; }
.sh-sub .sh-board-row .lock { flex:none; width:1.4rem; height:1.6rem; background:currentColor; opacity:.5;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 0 1 8 0v2h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm2 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 0 1 8 0v2h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm2 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat; }
.sh-sub .sh-board-row .name { width:8rem; text-align:center; }
.sh-sub .sh-board-row .date { width:10rem; text-align:center; opacity:.65; font-size:calc(1.4rem * var(--fs-767)); }
.sh-sub .sh-board-row .hits { width:8rem; text-align:right; opacity:.5; font-size:calc(1.3rem * var(--fs-767)); }
.sh-sub .sh-board-row.is-notice a { background:#faf7f0; }
.sh-sub .sh-board-row.is-notice .no { opacity:1; font-weight:700; color:var(--color-key); }
.sh-sub .sh-board-empty { padding:8rem 0; text-align:center; border-bottom:1px solid var(--sh-line); font-size:calc(1.5rem * var(--fs-767)); opacity:.7; }

/* 답변 상태 */
.sh-sub .state { display:inline-flex; justify-content:center; align-items:center; width:8.4rem; height:3rem; border-radius:1.5rem; font-size:calc(1.2rem * var(--fs-767)); font-weight:500; }
.sh-sub .state.is-done { background:var(--color-key); color:#fff; }
.sh-sub .state.is-wait { border:1px solid rgba(0,0,0,.2); color:var(--color-primary); opacity:.75; }

/* 쪽 번호 */
.sh-sub .sh-pager { display:flex; justify-content:center; flex-wrap:wrap; gap:.4rem; margin-top:5rem; }
.sh-sub .sh-pager a { display:inline-flex; justify-content:center; align-items:center; min-width:4.2rem; height:4.2rem; padding:0 .8rem; border-radius:2.1rem;
 font-size:calc(1.4rem * var(--fs-767)); color:var(--color-primary); transition:background .2s; }
.sh-sub .sh-pager a:hover { background:#f1ede6; }
.sh-sub .sh-pager a[aria-current] { background:var(--color-primary); color:#fff; font-weight:700; }
.sh-sub .sh-pager a.edge { opacity:.6; }

/* 검색·글쓰기 */
.sh-sub .sh-board-foot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:2rem; margin-top:5rem; }
.sh-sub .sh-board-search { display:flex; gap:.8rem; }
.sh-sub .sh-board-search :is(select, input) { height:5.2rem; padding:0 1.6rem; border:1px solid rgba(0,0,0,.2); border-radius:.6rem; background:#fff;
 font-size:max(16px, calc(1.4rem * var(--fs-767))); color:var(--color-primary); }
.sh-sub .sh-board-search input { width:26rem; }
.sh-sub .sh-board-search .sh-btn { min-width:10rem; }

/* ---------- 글 보기 ---------- */
.sh-sub .sh-post { border-top:2px solid var(--color-primary); }
.sh-sub .sh-post-head { padding:3.6rem 1.6rem 3rem; border-bottom:1px solid var(--sh-line); }
.sh-sub .sh-post-top { display:flex; align-items:center; gap:1.2rem; margin-bottom:1.4rem; }
.sh-sub .sh-post-cat { font-size:calc(1.4rem * var(--fs-767)); color:var(--color-key); font-weight:500; }
.sh-sub .sh-post-title { font-size:2.6rem; font-weight:700; line-height:1.45; letter-spacing:-.02em; color:var(--color-primary); overflow-wrap:anywhere; }
.sh-sub .sh-post-meta { margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.4rem 1.8rem; font-size:calc(1.4rem * var(--fs-767)); opacity:.65; }
.sh-sub .sh-post-admin { margin-top:1.4rem; font-size:calc(1.4rem * var(--fs-767)); color:var(--color-key); }
.sh-sub .sh-post-body { padding:4.8rem 1.6rem; display:flex; flex-direction:column; gap:2rem; }
.sh-sub .sh-post-text { font-size:calc(1.6rem * var(--fs-767)); line-height:1.9; color:var(--color-primary); white-space:pre-line; overflow-wrap:anywhere; }
.sh-sub .sh-post-text.is-empty { opacity:.6; }
.sh-sub :is(.sh-post-body, .sh-post-answer-body) img { display:block; max-width:100%; height:auto; border-radius:.8rem; }
.sh-sub .sh-post-files { padding:0 1.6rem 3rem; display:flex; flex-direction:column; gap:.8rem; }
.sh-sub .sh-post-files a { font-size:calc(1.4rem * var(--fs-767)); text-decoration:underline; color:var(--color-primary); }
.sh-sub .sh-post-answer { margin-bottom:4rem; padding:4.8rem; border-radius:1.2rem; background:#faf7f0; }
.sh-sub .sh-post-answer-t { margin-top:1rem; font-size:2.2rem; font-weight:700; color:var(--color-primary); }
.sh-sub .sh-post-answer-body { margin-top:2.4rem; display:flex; flex-direction:column; gap:1.6rem; }
.sh-sub .sh-post-foot { margin-top:0; padding-top:4rem; border-top:1px solid var(--sh-line); }

/* ---------- 입력 양식(글쓰기·비밀번호·회원가입) ---------- */
.sh-sub .sh-form { max-width:860px; margin:0 auto; }
.sh-sub .sh-write-form { padding-top:2rem; }
.sh-sub .sh-form fieldset { min-width:0; margin:0 0 6rem; padding:0; border:0; }
.sh-sub .sh-form-title { display:block; width:100%; margin-bottom:2.8rem; padding-bottom:1.6rem; border-bottom:2px solid var(--color-primary);
 font-size:2.2rem; font-weight:700; color:var(--color-primary); }
.sh-sub .sh-field { display:flex; flex-direction:column; gap:.9rem; margin-bottom:2.6rem; }
.sh-sub .sh-field > label, .sh-sub .sh-field-label { font-size:calc(1.5rem * var(--fs-767)); font-weight:700; color:var(--color-primary); }
/* 이름표 뒤의 필수·선택 표시(동의 체크 칸의 글자는 제외) */
.sh-sub .sh-field > label:not(.sh-check) :is(em, span), .sh-sub .sh-field-label span { margin-left:.8rem; font-style:normal; font-weight:500; font-size:calc(1.2rem * var(--fs-767)); }
.sh-sub .sh-field > label:not(.sh-check) em { color:var(--color-key); }
.sh-sub .sh-field > label:not(.sh-check) span, .sh-sub .sh-field-label span { opacity:.5; }
.sh-sub .sh-form :is(input[type=text], input[type=password], input[type=email], input[type=tel], input[type=search], select, textarea) {
 width:100%; height:5.6rem; padding:0 1.6rem; border:1px solid rgba(0,0,0,.2); border-radius:.6rem; background:#fff;
 font-size:max(16px, calc(1.5rem * var(--fs-767))); color:var(--color-primary); transition:border-color .2s; }
.sh-sub .sh-form textarea { height:auto; min-height:32rem; padding:1.6rem; line-height:1.7; resize:vertical; }
.sh-sub .sh-form :is(input, select, textarea):focus-visible { outline:2px solid var(--color-key); outline-offset:1px; border-color:var(--color-key); }
.sh-sub .sh-form .is-bad :is(input, select, textarea) { border-color:#b03a2e; }
/* 자동등록방지: 그림, 숫자 칸, 새 숫자·숫자 듣기 */
.sh-sub .sh-captcha-row { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.sh-sub .sh-captcha-img { width:160px; height:60px; border:1px solid rgba(0,0,0,.2); border-radius:.6rem; background:#fff; }
.sh-sub .sh-form .sh-captcha-row input[type=text] { flex:0 1 18rem; width:18rem; letter-spacing:.3em; }
.sh-sub .sh-form .sh-captcha-row .sh-captcha-btn { min-width:0; height:5.6rem; padding:0 2rem; }
.sh-sub .sh-help { font-size:calc(1.3rem * var(--fs-767)); line-height:1.6; opacity:.65; }
.sh-sub .sh-counter { align-self:flex-end; font-size:calc(1.2rem * var(--fs-767)); opacity:.5; }
.sh-sub .sh-check { display:flex; align-items:flex-start; gap:1rem; font-size:calc(1.5rem * var(--fs-767)); line-height:1.5; color:var(--color-primary); cursor:pointer; }
.sh-sub .sh-check input { flex:none; width:2rem; height:2rem; min-width:18px; min-height:18px; margin:.15em 0 0; accent-color:var(--color-primary); cursor:pointer; }
.sh-sub .sh-check.is-bad span { color:#b03a2e; }
.sh-sub .sh-field-checks { gap:1.2rem; }
.sh-sub .sh-agree-item { margin-bottom:3.2rem; }
.sh-sub .sh-agree-name { margin-bottom:1.2rem; font-size:calc(1.6rem * var(--fs-767)); font-weight:700; color:var(--color-primary); }
.sh-sub .sh-policy-box { height:22rem; margin-bottom:1.4rem; padding:2rem 2.4rem; overflow:auto; overscroll-behavior:contain; border:1px solid var(--sh-line); border-radius:.6rem; background:#fbfaf8; }
.sh-sub .sh-policy-box p { font-size:calc(1.4rem * var(--fs-767)); line-height:1.75; }
.sh-sub .sh-policy-box:focus-visible { outline:2px solid var(--color-key); outline-offset:1px; }
.sh-sub .sh-check-all { padding:2rem 2.4rem; border-radius:.6rem; background:#faf7f0; font-weight:700; }
.sh-sub .sh-write-note { margin-top:-.4rem; font-size:calc(1.4rem * var(--fs-767)); color:var(--color-key); }
.sh-sub .sh-form-msg { min-height:2.4rem; margin-bottom:1.6rem; text-align:center; font-size:calc(1.5rem * var(--fs-767)); line-height:1.6; color:#b03a2e; }
.sh-sub .sh-form-msg.is-info { color:var(--color-primary); }
.sh-sub .sh-form .sh-btns { margin-top:1rem; }
.sh-sub .sh-form-foot { margin-top:3.2rem; display:flex; justify-content:center; gap:2.4rem; font-size:calc(1.4rem * var(--fs-767)); color:var(--color-primary); }
.sh-sub .sh-form-foot a { text-decoration:underline; text-underline-offset:.3em; color:var(--color-primary); }
/* 자동 등록 막기용 칸(사람에게는 보이지 않는다) */
.sh-sub .sh-hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.sh-sub .sh-pw-form { max-width:48rem; padding:6rem 0; text-align:center; border-top:2px solid var(--color-primary); }
.sh-sub .sh-pw-title { font-size:2.2rem; font-weight:700; color:var(--color-primary); overflow-wrap:anywhere; }
.sh-sub .sh-pw-lead { margin:1.6rem 0 3.2rem; font-size:calc(1.5rem * var(--fs-767)); line-height:1.7; opacity:.8; }
.sh-sub .sh-pw-form .sh-field { text-align:left; }

/* 회원가입·계정 찾기 */
.sh-sub .sh-join { padding:8rem 0 14rem; }
.sh-sub .sh-join > .sh-in > .sh-body { margin:0 0 6rem; }
.sh-sub .sh-join-done { max-width:860px; margin:0 auto; }
.sh-sub .sh-find { padding:10rem 0 14rem; }
.sh-sub .sh-find .sh-body { margin-top:0; }
.sh-sub .sh-find .sh-btn { font-size:calc(1.4rem * var(--fs-767)); font-weight:500; }
/* 카카오톡 버튼은 진료안내의 TALK 버튼(sehyun-sub.css .sh-kakao)과 같은 색을 쓰되 버튼 모양은 옆 전화 버튼과 맞춘다 */
.sh-sub .sh-find .sh-btn.sh-kakao { margin-top:0; min-width:22rem; height:6rem; padding:0 3rem; border-radius:3rem; }

/* ---------- 휴대폰 ---------- */
@media only screen and (max-width:767px) {
 .sh-sub .sh-board-sec { padding:7rem 0 10rem; }
 /* 세로로 쌓을 때는 한 줄 flex 로 둔다. 여러 줄(wrap)이면 늘이기가 화면 폭이 아니라 가장 넓은 자식(분류 줄 전체) 폭을 따라 화면 밖으로 나간다 */
 .sh-sub .sh-board-top { flex-direction:column; flex-wrap:nowrap; align-items:stretch; }
 .sh-sub .sh-board-cats { flex-wrap:nowrap; overflow-x:auto; margin:0 calc(var(--sh-pad) * -1); padding:0 var(--sh-pad) .4rem; scrollbar-width:none; }
 .sh-sub .sh-board-cats::-webkit-scrollbar { display:none; }
 .sh-sub .sh-board-cat { white-space:nowrap; font-size:calc(1.5rem * var(--fs-767)); }
 .sh-sub .sh-board-total { margin-left:0; font-size:calc(1.5rem * var(--fs-767)); }
 .sh-sub .sh-board-row a { flex-wrap:wrap; gap:.8rem 1.2rem; padding:2rem .4rem; font-size:calc(1.7rem * var(--fs-767)); }
 .sh-sub .sh-board-row .no { display:none; }
 .sh-sub .sh-board-row.is-notice .no { display:inline; width:auto; font-size:calc(1.4rem * var(--fs-767)); }
 .sh-sub .sh-board-row .cat { width:auto; font-size:calc(1.4rem * var(--fs-767)); }
 .sh-sub .sh-board-row .state { order:1; margin-left:auto; }
 .sh-sub .sh-board-row .title { order:2; flex-basis:100%; }
 .sh-sub .sh-board-row .title .t { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
 .sh-sub .sh-board-row :is(.name, .date, .hits) { order:3; width:auto; text-align:left; font-size:calc(1.4rem * var(--fs-767)); opacity:.6; }
 .sh-sub .state { width:auto; height:2.8rem; padding:0 1.2rem; font-size:calc(1.3rem * var(--fs-767)); }
 .sh-sub .sh-board-foot { flex-direction:column-reverse; flex-wrap:nowrap; align-items:stretch; }
 /* 휴대폰의 .sh-btn 은 sehyun-sub.css 가 너비 100%·최대 32rem 으로 둔다. 게시판 버튼은 줄을 꽉 채우고, 검색 버튼은 글자만큼 */
 .sh-sub :is(.sh-board, .sh-form, .sh-board-msg) .sh-btn { height:6rem; font-size:calc(1.7rem * var(--fs-767)); }
 .sh-sub .sh-board-foot > .sh-btn { width:100%; max-width:none; }
 .sh-sub .sh-board-search select { flex:none; width:auto; min-width:0; padding:0 1rem; }
 .sh-sub .sh-board-search input { flex:1; width:auto; min-width:0; }
 .sh-sub .sh-board-search .sh-btn { flex:none; width:auto; min-width:0; max-width:none; padding:0 2.4rem; }
 .sh-sub .sh-post-head { padding:2.8rem .4rem 2.4rem; }
 .sh-sub .sh-post-title { font-size:2.4rem; }
 .sh-sub .sh-post-meta, .sh-sub .sh-post-cat { font-size:calc(1.4rem * var(--fs-767)); }
 .sh-sub .sh-post-body { padding:3.6rem .4rem; }
 .sh-sub .sh-post-text { font-size:calc(1.8rem * var(--fs-767)); }
 .sh-sub .sh-post-answer { padding:3.2rem 2.4rem; }
 .sh-sub .sh-board-msg { padding:6rem .4rem; }
 .sh-sub .sh-board-msg-t { font-size:calc(1.8rem * var(--fs-767)); }
 .sh-sub .sh-form-title { font-size:2.2rem; }
 .sh-sub .sh-field > label, .sh-sub .sh-field-label, .sh-sub .sh-check, .sh-sub .sh-agree-name { font-size:calc(1.7rem * var(--fs-767)); }
 .sh-sub .sh-help, .sh-sub .sh-write-note { font-size:calc(1.5rem * var(--fs-767)); }
 .sh-sub .sh-policy-box { height:26rem; padding:1.6rem; }
 .sh-sub .sh-policy-box p { font-size:calc(1.6rem * var(--fs-767)); }
 .sh-sub .sh-form .sh-btns { flex-direction:column-reverse; }
 .sh-sub .sh-form .sh-btns .sh-btn, .sh-sub .sh-board-msg .sh-btn { width:100%; max-width:none; }
 .sh-sub .sh-join { padding:5rem 0 10rem; }
 .sh-sub .sh-find { padding:6rem 0 10rem; }
 .sh-sub .sh-find .sh-btn { font-size:calc(1.7rem * var(--fs-767)); }
 .sh-sub .sh-form .sh-captcha-row input[type=text] { flex:1 1 12rem; width:auto; min-width:0; }
 .sh-sub .sh-form .sh-captcha-row .sh-captcha-btn { flex:1 1 40%; width:auto; max-width:none; height:5.2rem; font-size:calc(1.5rem * var(--fs-767)); }
}