@charset "utf-8";
/* 건강정보 게시판 (PC)
 * 목록: 시안 A(아이콘형, 2026-10-23 원장님 확정) — 수치·색은 docs/sian/siana_example/시안A_PC.html 기준 (930px 본문 상자 안)
 * 상세: 구지점 디자인(_public/css/board.css 의 .board-view-*)을 그대로 쓰고 본점에서 더한 항목만 맞춤. */

/* ---------- 목록 ---------- */
.hi_box{background:#fff;color:#3a3a3a;text-align:left;letter-spacing:-.2px;word-break:keep-all;}
.hi_box *{box-sizing:border-box;}
.hi_blind{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* 상단 배너: 대기실 사진 + 남색 반투명 덮개 */
.hi_hero,.hi_hero p,.hi_hero h2{text-align:center;}
.hi_hero{position:relative;overflow:hidden;width:100%;padding:40px 0 84px;text-align:center;color:#fff;background:linear-gradient(rgba(30,36,46,.72),rgba(30,36,46,.82)),url(/_public/_img/data/09.jpg) center 60%/cover;}
.hi_hero:before{content:'';position:absolute;right:-80px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(232,163,58,.28),rgba(232,163,58,0) 70%);}
.hi_hero:after{content:'';position:absolute;left:-60px;bottom:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,0) 70%);}
.hi_hero .hi_eb{position:relative;margin:0 0 12px;font-size:12px;line-height:1.3;letter-spacing:3px;color:#E8A33A;font-weight:700;}
.hi_hero .hi_tit{position:relative;margin:0 0 12px;font-size:28px;line-height:1.3;font-weight:800;letter-spacing:-1px;color:#fff;}
.hi_hero .hi_lead{position:relative;margin:0 0 24px;font-size:15px;line-height:1.5;color:#c9ced6;}

/* 검색창: 흰색 둥근 입력창 + 금색 원형 단추 */
.hi_srch{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;width:460px;height:50px;padding:0 8px 0 22px;background:#fff;border-radius:28px;}
.hi_srch input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:transparent;font-family:inherit;font-size:14px;color:#333;letter-spacing:-.2px;-webkit-appearance:none;appearance:none;}
.hi_srch input::placeholder{color:#999;}
.hi_srch input::-webkit-search-cancel-button{-webkit-appearance:none;}
.hi_srch button{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#E8A33A;color:#fff;cursor:pointer;}
.hi_srch button:hover,.hi_srch button:focus{background:#d8922a;}

.hi_wrap{position:relative;z-index:2;margin:-52px 30px 0;padding-bottom:40px;}

/* 진료과목 선택: 배너에 걸쳐 올라온 흰 패널 */
.hi_panel{padding:22px;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(39,46,56,.08);}
.hi_cats{display:flex;justify-content:space-between;margin:0;padding:0;}
.hi_cats li{list-style:none;margin:0;padding:0;text-align:center;}
.hi_cats a{display:flex;flex-direction:column;align-items:center;gap:9px;width:92px;font-size:13px;line-height:1.3;color:#555;text-decoration:none;}
.hi_cats .ci{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:#F6F3EE;color:var(--c);transition:.2s;}
.hi_cats .nm{white-space:nowrap;}
.hi_cats em{margin-left:2px;font-style:normal;font-size:11px;color:#aaa;}
.hi_cats a:hover .ci,.hi_cats a:focus .ci{box-shadow:0 0 0 2px var(--c) inset;}
.hi_cats a.on .ci{background:var(--c);color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.15);}
.hi_cats a.on{color:#121212;font-weight:800;}

/* 목록 머리: 최신 글 N · 최신순 */
.hi_sec{display:flex;justify-content:space-between;align-items:flex-end;margin:40px 2px 16px;}
.hi_sec h3{margin:0;font-size:20px;line-height:1.3;font-weight:800;color:#121212;}
.hi_sec h3 em{margin-left:6px;font-style:normal;color:#E8A33A;}
.hi_sec span,.hi_sec a{font-size:12px;color:#999;text-decoration:none;}
.hi_sec a:hover{color:#555;text-decoration:underline;}

/* 카드 3열: 사진 → 진료과목 → 제목(2줄) → 요약(2줄) → 원장·작성일. 사진 위에는 아무것도 올리지 않음(원장님 피드백) */
.hi_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0;}
.hi_card{list-style:none;margin:0;padding:0;min-width:0;}
.hi_card a{display:block;height:100%;overflow:hidden;background:#fff;border-radius:12px;box-shadow:0 4px 16px rgba(39,46,56,.06);color:inherit;text-decoration:none;transition:box-shadow .2s,transform .2s;}
.hi_card a:hover,.hi_card a:focus{box-shadow:0 8px 24px rgba(39,46,56,.12);transform:translateY(-2px);}
.hi_card .th{display:block;height:150px;background:#eceae6;}
.hi_card .th img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.hi_card .cb{display:block;padding:16px 18px 18px;}
.hi_card .ct{display:block;margin-bottom:7px;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:-.2px;}
.hi_card .tt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:46px;margin-bottom:8px;overflow:hidden;font-size:16px;line-height:1.45;font-weight:800;color:#121212;word-break:keep-all;overflow-wrap:anywhere;}
.hi_card .sm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:42px;margin-bottom:14px;overflow:hidden;font-size:13px;line-height:1.6;color:#7a7a7a;overflow-wrap:anywhere;}
.hi_card .au{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid #f0ece5;font-size:12px;line-height:1.3;color:#999;white-space:nowrap;}
.hi_card .av{display:flex;flex:none;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#272E38;color:#E8A33A;font-size:11px;font-weight:800;}
.hi_card .au b{color:#555;font-weight:700;}

/* 글 없음 / 검색 결과 없음 */
.hi_empty{padding:60px 20px;text-align:center;background:#fff;border-radius:12px;box-shadow:0 4px 16px rgba(39,46,56,.06);}
.hi_empty p{margin:0;text-align:center;font-size:15px;color:#555;}
.hi_empty p.sub{margin-top:8px;font-size:13px;color:#999;}
.hi_empty a{display:inline-block;margin-top:18px;padding:9px 20px;border-radius:20px;background:#272E38;color:#fff;font-size:13px;text-decoration:none;}

.hi_wrap .page{margin-top:30px;text-align:center;}

/* ---------- 상세: 진료과목 표시, 대표 이미지 ---------- */
.board-view-header .health_view_cat{margin:0 0 10px 0;font-size:13px;line-height:1;}
.board-view-header .health_view_cat a{color:#c79f81;font-weight:bold;text-decoration:none;}
.board-view-header .meta .writer{color:#333;font-weight:bold;}
.board-view-content .health_figure{margin:0 0 24px 0;text-align:center;}
.board-view-content .health_figure img{margin:0 auto;}