@charset "euc-kr";
/* [스코프] 주문하기(pres1form)와 보험첩약(pres2form)은 마크업이 동일해 같은 규칙을 공유한다.
.page-pres1form 이던 선택자를 :is(.page-pres1form,.page-pres2form) 로 확장(특이성 동일).
[주의] 이 주석은 반드시 @charset 아래에 둔다 - @charset 은 파일 첫 줄이어야 유효하며,
위로 올리면 CSS 안의 한글(content:'처방 목록' 등)이 전부 깨진다(2026-08-31 실제 발생). */
/* =============================================================================
custom.css - 이 저장소의 신규/개선 스타일 전용 파일
규칙 (2026-08-25 합의):
- 앞으로 추가·수정하는 스타일은 **이 파일에만** 작성한다.
- HTML/ASP 에 style="..." 인라인 스타일을 쓰지 않는다. 클래스로 연결한다.
- 기존 css/default.css · common_layout.css · board.css · reset.css 는
레거시라 건드리지 않는다. 덮어써야 하면 여기서 클래스로 재정의한다.
- 로드 경로: inc/csslink.asp 가 사이트 CSS 를 파일별로 link 하면서 이 파일을 맨 뒤에
둔다. 즉 이 파일 규칙이 레거시 규칙을 이긴다 - !important 를 남발하지 말 것.
- csslink.asp 가 파일 수정시각을 ?v= 로 붙이므로 고쳐도 강제 새로고침이 필요 없다.
@import 로 물리지 말 것 - URL 이 고정이라 캐시를 깰 수 없다.
섹션 목차
1. 레이어 팝업 (.mid-popup)
2. 메인 푸터 윗여백 (.mid-footerwrap--tight)
3. 메인 비주얼 높이 (#visual)
4. 헤더 메뉴 폰트 크기
5. 푸터 폰트/간격
6. 대메뉴 슬림 폭 + 서브메뉴 팝업 위로
7. 로그인 페이지 - C-1 안 (.page-loginform)
============================================================================= */
/* =============================================================================
1. 레이어 팝업 (.mid-popup)
-----------------------------------------------------------------------------
popup/popupwin1.asp 가 메인(index.asp)에 뿌리는 공지 팝업.
이전 구조의 문제
- div/table 에 인라인 스타일로 width·height 를 DB 값(pwidth/pheight)으로 박아서,
이미지가 박스보다 크면 그대로 삐져나왔다. (실측: 이미지 592px vs 박스 500px = 92px 초과)
- 흰 셀에 height 가 고정돼 있고 SE 에디터가 넣은 의 기본 여백 제거 */
.mid-popup__body p {
margin: 0;
}
/* 이미지 한 장짜리 팝업은 여백 0, 글 팝업만 안쪽 여백을 준다 */
.mid-popup__body--image {
line-height: 0;
font-size: 0;
}
.mid-popup__body--text {
padding: 20px 22px;
max-width: 560px; /* 글이 길어도 한 줄로 늘어나지 않게 */
}
/* 팝업이 여러 개(최대 5개)일 때 나중 것이 위에 오도록 z-index 만 올린다.
가로/세로 위치는 관리자가 팝업마다 지정한 값을 그대로 쓴다. */
.mid-popup--1 { z-index: 1001; }
.mid-popup--2 { z-index: 1002; }
.mid-popup--3 { z-index: 1003; }
.mid-popup--4 { z-index: 1004; }
/* ---- 하단 바 ------------------------------------------------------------- */
.mid-popup__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 34px;
padding: 0 6px 0 10px;
background: #8e8e8e;
color: #fff;
font-size: 13px;
line-height: 1;
}
/* "오늘 하루 보이지 않음" - 진짜 체크박스 + label 로 교체(라벨 전체가 클릭 영역) */
.mid-popup__today {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
color: #fff;
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.mid-popup__check {
width: 14px;
height: 14px;
margin: 0;
accent-color: #e38922; /* 사이트 강조색 */
cursor: pointer;
flex: none;
}
.mid-popup__today:hover {
text-decoration: underline;
}
/* 닫기 버튼 */
.mid-popup__close {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 5px 10px;
border: 0;
border-radius: 2px;
background: rgba(0, 0, 0, .18);
color: #fff;
font-family: inherit;
font-size: 13px;
line-height: 1;
cursor: pointer;
white-space: nowrap;
}
.mid-popup__close:hover {
background: rgba(0, 0, 0, .34);
}
.mid-popup__close-x {
font-size: 15px;
line-height: 1;
}
/* 키보드 접근성 - 기존 사이트엔 포커스 표시가 없어서 여기서만 살린다 */
.mid-popup__check:focus-visible,
.mid-popup__close:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* 화면이 좁을 때 (사이트가 viewport width=1200 고정이라 예외적 상황) */
@media (max-width: 640px) {
.mid-popup {
max-width: 96vw;
}
}
/* =============================================================================
2. 메인 푸터 윗여백 (.mid-footerwrap--tight)
-----------------------------------------------------------------------------
메인 하단 배너 줄과 푸터 사이가 80px 로 떠 있어서, 페이지의 다른 간격과 리듬이
맞지 않았다. 메인의 세로 간격은 20px 기준이다.
- 메뉴(#headerWrap) 아래 ~ 첫 컨텐츠(.img_visual) = 20px
- 배너 1행 ~ 2행 = 20px
- 배너 2행 ~ 푸터 = 80px <- 이것만 튀었다
기본값 80px 은 common_layout.css 의 .footerwrap 이 갖고 있다. 그 파일은 레거시라
건드리지 않고, 메인에서만 이 클래스를 덧붙여 덮는다(common/tpe.asp 에서 nowfname
으로 판단). 서브 페이지는 80px 그대로다.
============================================================================= */
.mid-footerwrap--tight {
margin-top: 20px;
}
/* =============================================================================
3. 메인 비주얼 높이 (#visual)
-----------------------------------------------------------------------------
비주얼과 그 아래 배너 줄 사이만 33px 로 떠 있었다. margin 은 원래 20px 로 맞는데,
#visual 컨테이너 높이가 405px 로 박혀 있고 실제 롤링 이미지는 392px 이라
아래쪽에 13px 짜리 빈 공간이 남아서 13 + 20 = 33px 이 된 것이다.
common_layout.css:13 #visual { ... height:405px; margin-top:20px; }
images/img_01~05.jpg 1102 x 392 <- 실제 높이
높이를 이미지에 맞추면 빈 공간이 사라지고 간격이 페이지의 20px 리듬과 같아진다.
#visual 은 index.asp 에서만 쓰고 롤링 이미지 5장이 모두 392px 이라 안전하다.
안쪽 .wrap_rolling 은 position:absolute 라 흐름에 영향이 없어 그대로 둔다.
============================================================================= */
#visual {
height: 392px;
}
/* =============================================================================
4. 헤더 메뉴 폰트 크기
-----------------------------------------------------------------------------
전 메뉴를 한 단계씩(+1px) 키운다. 원래 값은 common_layout.css 에 있고 레거시라
건드리지 않는다. 선택자를 원본과 같게 써서 나중에 로드되는 이 파일이 이기게 한다.
대메뉴 #gnb > li 16px (기본), nav-stuck 시 15px
※ nav-stuck 은 폭 배치만 예전 그대로 - 41-b
2차 메뉴 #gnb .dep2 > li > a 13px -> 14px (common_layout.css:84)
상단유틸 .button_head_util 14px -> 15px (common_layout.css:46)
대메뉴는 li 에 font-size 가 걸려 있고 a 가 상속받는 구조라 li 를 건드려야 한다.
(common_layout.css:61 의 .gnb_wrap ... .gnb_button 규칙은 DOM 에 .gnb_wrap 이
없어서 죽은 규칙이다 - 헷갈리지 말 것)
※ 41 번에서 대메뉴를 배너 폭(1102px) 균등 분할로 바꾸면서 칸이 157.4px 로 넓어져
15px -> 16px 로 키웠다(= common_layout.css 원래 값과 같음).
명시적으로 남겨 둔다 - nav-stuck(15px) 과의 기준값이자 transition 의 출발값이다.
스티키는 **폭 배치만** 예전(글자폭 좌측 밀집)으로 되돌리고(41-b), 폰트는 13 -> 15px 로
키워 기본(16px)과의 차이를 1px 로 좁혔다(2026-09-02 요청).
============================================================================= */
#gnb > li {
font-size: 16px;
}
#gnb .dep2 > li > a,
#gnb .dep3 > li > a {
font-size: 14px;
/* 좌우 패딩 15px -> 10px. 폰트를 13->14px 로 올리면 가장 긴 항목
"자주묻는질문과답변" 이 118px 이 되어 가용폭 118px(=148-30)과 같아지면서
두 줄로 접힌다. li 는 height/line-height 가 35px 로 고정이라 접히면 넘친다.
패딩을 줄여 가용폭을 128px 로 넓히면 10px 여유가 생긴다.
(13px 일 때는 110px 이라 원래는 문제가 없었다) */
padding: 0 10px;
}
.head_util_menu .button_head_util {
font-size: 15px;
}
/* =============================================================================
5. 푸터 폰트/간격 (.footerwrap)
-----------------------------------------------------------------------------
원래 common_layout.css:493 의 .footerwrap .fooercon ul li 가 12px.
전 항목을 한 단계(+1px) 키우고, 항목 사이 간격도 그에 맞춰 다듬는다.
폰트 12px -> 13px
항목간격 각 li 의 padding-right 15px -> 8px
폰트를 키우면 둘째 줄(상호명/주소/원장/TEL/FAX)이 1102px 를 20px 넘겨 FAX 가 다음 줄로
접힌다(실측). 순수 텍스트만 1014px 라 9개 항목에 남는 여유가 88px(=항목당 9px 이하) 뿐이다.
그래서 간격을 8px(항목 사이 16px)로 줄여 두 줄 모두 한 줄에 유지한다.
============================================================================= */
.footerwrap .fooercon ul li {
font-size: 13px;
}
.footerwrap .fooercon ul.ftsub01 li,
.footerwrap .fooercon ul.ftsub02 li {
padding-right: 8px;
}
/* =============================================================================
6. 대메뉴(GNB) - 슬림 폭(시안 3번) + 서브메뉴를 팝업 위로
-----------------------------------------------------------------------------
레거시 common_layout.css 의 #gnb 규칙을 덮어쓴다(이 파일이 나중에 로드됨).
폭: 고정 150px(마지막 184px) -> 글자폭 + 좌우 14px 여백. 세로 구분선 제거.
폰트 17px / 높이 49px 는 그대로. 메뉴 총 폭 약 1084px -> 약 830px.
float:left 라 자동으로 좌측 정렬되고 오른쪽이 비며, 헤더 하단 강조선은 그대로 풀폭.
팝업 위로: 메인 팝업 .mid-popup 은 z-index 1000(여러 개면 1004). 그런데 헤더의
.header_inner_wrap 이 z-index:90 으로 stacking context 를 만들어, 그 안의 #gnb>li 를
아무리 올려도 헤더 전체가 90 < 1000 이라 팝업 아래로 깔린다(그 안 .gnb-wrap 은 -1).
그래서 경계인 .header_inner_wrap 자체를 팝업보다 위(1100)로 올린다. 그러면 헤더
서브트리(=서브메뉴 포함)가 팝업 위로 온다. 헤더 바(y<157)는 팝업(y187~)과 겹치지
않으니, 실제로 겹치는 건 아래로 펼쳐지는 서브메뉴뿐이라 의도대로 동작한다.
서브메뉴 폭: 원래 .dep2 는 width:100% 라 부모 li 폭을 따른다. li 가 좁아지면 서브메뉴도
좁아져 긴 라벨("자주묻는질문과답변" 등)이 접힌다. 내용 폭에 맞추되 최소 li 폭은
보장하도록 max-content + min-width:100% 로 바꾸고, 항목은 한 줄 유지(nowrap).
============================================================================= */
/* 헤더 서브트리를 팝업 위로. 이 한 줄이 실제로 서브메뉴를 팝업 위에 올린다.
원본 선택자 #headerWrap .header_inner_wrap (id+class) 와 특이성을 맞춰야 이긴다. */
#headerWrap .header_inner_wrap {
z-index: 1100; /* 원래 90 → 팝업(1000~1004)보다 위 */
}
#gnb > li {
width: auto; /* 고정 150px -> 41 번의 flex 균등 분할에 맡긴다 */
border-left: 0; /* 세로 구분선 제거 */
}
#gnb > li:last-child {
width: auto; /* 마지막 184px 도 균등 분할로 */
border-right: 0;
}
#gnb > li > a {
padding: 0 2px; /* 칸이 157.4px 로 넉넉해 여백 불필요. 좁게 둬서 폰트를 키워도
가장 긴 항목이 접히지 않게 한다(16px 기준 여유 21.5px).
글자는 가운데정렬이라 패딩을 줄여도 보이는 위치는 그대로. */
}
#gnb .dep2,
#gnb .dep3 {
width: max-content; /* 좁아진 li 폭에 눌리지 않게 내용 폭으로 */
min-width: 100%;
}
#gnb .dep2 > li > a,
#gnb .dep3 > li > a {
white-space: nowrap; /* 서브 항목 한 줄 유지 */
}
/* =============================================================================
7. 로그인 페이지 - C-1 안 (.page-loginform)
-----------------------------------------------------------------------------
loginform.asp 를 C-1(로그인 카드 + 안내 2박스)로 재작성했다. 여기서 그 스타일과
페이지 여백을 정의한다. .container_inner·.footerwrap 은 공용이라 page-loginform 로 스코프.
- 헤더(로고+유틸+GNB)와 푸터를 이 페이지에서만 숨겨(display:none) 로그인 단독 화면.
- 바깥 컨테이너 테두리 제거, 페이지 제목/브레드크럼은 loginform.asp 에서 마크업째 제거.
- 헤더 로고 이미지(/images/logo.jpg)를 로그인 카드 위 중앙에 배치, 로그인 블록은 세로 중앙.
- 로그인 카드/입력/버튼/안내박스는 브랜드 골드(#f2b503)·탄(#c49a6c) 안에서 정돈.
============================================================================= */
/* 헤더(로고+유틸+GNB)·푸터 완전 제거 → 로그인 단독 화면 */
.page-loginform #headerWrap,
.page-loginform .header_inner_wrap,
.page-loginform .gnb-wrap,
.page-loginform .tab_background_left,
.page-loginform .tab_background_right,
.page-loginform .footerwrap { display: none !important; }
/* 페이지 배경: 따뜻한 아이보리 */
body.page-loginform { background: #f7f3ec; }
/* 로그인 블록을 뷰포트 세로 중앙에. 길면 자연 스크롤 */
.page-loginform #wrap {
min-height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px 0;
}
.page-loginform .container_inner {
border: 0; /* 바깥 테두리 제거 */
padding: 0 20px;
}
/* 로고 (로그인 카드 위 중앙, 헤더 로고 이미지 /images/logo.jpg) */
.page-loginform .lc-logo {
text-align: center;
}
.page-loginform .lc-logo a { display: inline-block; }
.page-loginform .lc-logo img {
height: 44px;
width: auto;
display: block;
border: 0;
mix-blend-mode: multiply; /* 흰 배경 JPEG 로고를 아이보리에 녹임 */
}
/* ---- C-1 로그인 영역 ---- */
.page-loginform .lc {
max-width: 560px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
font-family: "Nanum Gothic","나눔고딕",sans-serif;
color: #333;
}
/* 로그인 카드 */
.page-loginform .lc-form {
margin: 0;
background: #fff;
border: 1px solid #ece6da;
border-radius: 14px;
padding: 26px 26px 24px;
box-shadow: 0 1px 2px rgba(70,50,20,.05), 0 14px 30px -22px rgba(90,60,20,.35);
}
.page-loginform .lc-title {
margin: 0;
font-size: 20px;
font-weight: 800;
color: #2a2620;
text-align: center;
}
.page-loginform .lc-rule {
width: 34px;
height: 3px;
margin: 9px auto 20px;
background: #f2b503;
border-radius: 2px;
}
.page-loginform .lc-field {
margin-bottom: 12px;
}
.page-loginform .lc-field label {
display: block;
margin: 0 0 6px;
font-size: 13px;
font-weight: 700;
color: #5b5147;
}
.page-loginform .lc-inp {
width: 100%;
box-sizing: border-box;
border: 1px solid #ddd4c6;
background: #fff;
border-radius: 9px;
padding: 11px 13px;
font-size: 14px;
color: #333;
font-family: inherit;
}
.page-loginform .lc-inp:focus {
outline: none;
border-color: #c49a6c;
box-shadow: 0 0 0 3px rgba(196,154,108,.22);
}
.page-loginform .lc-btn {
display: block;
box-sizing: border-box; /* 입력창과 폭 일치 (오른쪽 튀어나옴 방지) */
width: 100%;
margin-top: 4px;
padding: 13px;
border-radius: 10px;
background: #f2b503;
color: #3a2c00;
font-size: 15px;
font-weight: 800;
text-align: center;
text-decoration: none;
box-shadow: 0 8px 18px -8px rgba(210,160,10,.6);
}
.page-loginform .lc-btn:hover { filter: brightness(1.04); }
.page-loginform .lc-save {
display: flex;
align-items: center;
gap: 7px;
margin-top: 12px;
font-size: 13px;
color: #6b6157;
cursor: pointer;
}
.page-loginform .lc-save input {
width: 15px;
height: 15px;
margin: 0;
accent-color: #c49a6c;
}
/* 안내 2박스 */
.page-loginform .lc-info2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.page-loginform .lc-info {
background: #fff;
border: 1px solid #ece6da;
border-radius: 12px;
padding: 18px 18px 16px;
}
.page-loginform .lc-info h4 {
margin: 0 0 8px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 800;
color: #4a3f34;
}
.page-loginform .lc-info h4::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #c49a6c;
}
.page-loginform .lc-info p {
margin: 0 0 14px;
font-size: 12.5px;
line-height: 1.7;
color: #8a7f72;
}
.page-loginform .lc-ibtn {
display: inline-block;
padding: 7px 14px;
border: 1px solid #e2cfac;
border-radius: 7px;
font-size: 12.5px;
font-weight: 700;
color: #8a5a2a;
text-decoration: none;
}
.page-loginform .lc-ibtn:hover { background: #faf3e6; }
@media (max-width: 560px) {
.page-loginform .lc-info2 { grid-template-columns: 1fr; }
}
/* =============================================================================
8. 스티키 메뉴 (ejolotto.com 방식) - 헤더 전체가 스크롤로 올라가고 메뉴 바만 상단 고정
-----------------------------------------------------------------------------
#headerWrap(155px)에서 메뉴 바는 아래쪽 약 49px. sticky 의 top 을 음수(-(155-49)=
-106px)로 주면 스크롤 시 위 106px(로고/유틸)은 뷰포트 위로 올라가 사라지고, 아래 49px
(메뉴 바)만 top:0 에 붙는다. 순수 CSS - JS·shrink 애니메이션 없음, 색상 골드 그대로.
조상(#wrap->body)에 overflow/transform 브레이커 없어 sticky 안전. custom.css 가 마지막
로드라 common_layout 의 position:relative 를 덮는다.
============================================================================= */
#headerWrap {
position: sticky;
top: -106px;
z-index: 1100;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
/* 스크롤로 메뉴 바가 붙으면(body.nav-stuck, JS 토글): 폰트 한 단계 작게 +
로그인/회원가입(.head_util_menu02)을 메뉴 바 우측에 나타나게(top 을 메뉴 행으로). */
#gnb > li { transition: font-size .2s ease; }
#gnb .dep2 > li > a, #gnb .dep3 > li > a { transition: font-size .2s ease; }
.head_util_menu02 { transition: top .25s ease, opacity .2s ease; }
body.nav-stuck #gnb > li { font-size: 15px; }
body.nav-stuck #gnb .dep2 > li > a,
body.nav-stuck #gnb .dep3 > li > a { font-size: 13px; }
body.nav-stuck .head_util_menu02 { top: 114px; }
/* =============================================================================
9. 프로세싱바 현대화 (common/waiting.asp 의 #waiting) - 원본 무수정, CSS만
-----------------------------------------------------------------------------
기존: 검정테두리 흰박스 + waiting.gif(시계+안내문), 중앙정렬이 IE 전용 posLeft/posTop
이라 최신 브라우저에서 좌측으로 어긋남. show_waiting() 은 visibility 만 토글.
여기선 #waiting 을 딤 배경 풀스크린 오버레이로, 안쪽 표/GIF 를 흰 카드 + 골드 링
스피너로 재구성. GIF 에 박혀있던 문구는 content 로 다시 넣음. visibility 는 안 건드려
(JS 토글 유지) 표시/숨김 그대로 동작. 문구가 파일전송 맥락에도 맞아 전 페이지 공통.
============================================================================= */
#waiting {
position: fixed !important;
inset: 0 !important;
width: auto !important; height: auto !important; margin: 0 !important;
z-index: 9999 !important;
display: grid; place-items: center;
background: rgba(38,30,16,.55);
}
/* 흰 카드 = 바깥 table */
#waiting > table {
display: inline-block !important;
background: #fff !important;
width: 390px !important; max-width: calc(100vw - 40px) !important;
border: 0 !important; border-collapse: collapse !important;
border-radius: 14px;
box-shadow: 0 12px 36px rgba(20,12,0,.30);
padding: 26px 34px 24px; text-align: center;
}
#waiting > table tbody, #waiting > table tr { display: block; }
#waiting > table td { display: block; background: transparent !important; padding: 0 !important; text-align: center; }
#waiting table table { display: block; width: auto !important; margin: 0 auto; }
#waiting img { display: none !important; }
/* 골드 링 스피너 (안쪽 td ::before) */
#waiting table table td::before {
content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 14px;
border-radius: 50%; border: 4px solid #eee3cf; border-top-color: #f2b503;
animation: midWaitSpin .8s linear infinite;
}
@keyframes midWaitSpin { to { transform: rotate(360deg); } }
/* 제목 (안쪽 td ::after) */
#waiting table table td::after {
content: "데이터 전송중"; display: block;
font: 800 16px/1.3 "Nanum Gothic","나눔고딕",sans-serif; color: #33291c;
}
/* 안내문 (바깥 td ::after, 안쪽 table 다음 줄) */
#waiting > table > tbody > tr > td::after {
content: "게시물의 양이 많거나,\A첨부파일이 있을 경우 다소 시간이 걸릴 수 있습니다.";
display: block; white-space: pre-line; word-break: keep-all;
font: 400 13.5px/1.55 "Nanum Gothic","나눔고딕",sans-serif; color: #8a7f72;
margin-top: 8px;
}
/* =============================================================================
10. 탕전 처방(/tang/pres1form.asp) - 안내문·버튼 한 단계 크게 (:is(.page-pres1form,.page-pres2form) 스코프)
전체 레이아웃/기능 그대로, 이 페이지에서만.
- 안내문 .h1_con: 13 -> 14px.
- 버튼(.button 스프라이트 안의 a/input): 텍스트 11~12 -> 13px. 높이는 스프라이트 고정이라
그대로 두고, 슬라이딩도어라 가로폭은 자동으로 늘어난다.
============================================================================= */
:is(.page-pres1form,.page-pres2form) .h1_con {
font-size: 14px;
line-height: 1.7;
}
:is(.page-pres1form,.page-pres2form) .button * {
font-size: 13px;
}
/* 빈 처방 안내 메시지(.bbs_list01 의 colspan=8 td)를 컨테이너 전체 높이로 채워
중간 border 안 보이게 + 수직 중앙정렬. :has() 로 빈 상태에만(약재 있으면 미적용). */
:is(.page-pres1form,.page-pres2form) .bbs_list01 td[colspan="8"] {
border-bottom: 0 !important;
vertical-align: middle;
}
:is(.page-pres1form,.page-pres2form) .order_list01:has(td[colspan="8"]) #ajaxitemlist { height: 100% !important; }
:is(.page-pres1form,.page-pres2form) .order_list01:has(td[colspan="8"]) .bbs_list01 { height: 100%; border-bottom: 0; }
/* =============================================================================
11. 환자불러오기 팝업(#ajaxcstpage = /tang/cstpage.asp + /tang/cstlist.asp)
시안(cst-popup) 기반. 폰트 2단계 크게 + 여백 정리 버전. 원본 .asp 는 placeholder 1개만.
반드시 #ajaxcstpage 안으로만 스코프 - .bbs_list01 은 왼쪽 처방표와 공유하므로 넓게 X.
============================================================================= */
/* ── 카드(모달) ── */
:is(.page-pres1form,.page-pres2form) #ajaxcstpage{
position:fixed !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%);
width:470px !important; max-width:94vw !important; height:auto !important; padding:0 !important;
background:#fff !important; border:1px solid #e4e4e6 !important; border-radius:14px !important;
box-shadow:0 0 0 100vmax rgba(0,0,0,.45), 0 24px 60px -18px rgba(0,0,0,.35) !important;
z-index:100000 !important; overflow:hidden;
font-family:"Noto Sans KR","Malgun Gothic",sans-serif;
}
:is(.page-pres1form,.page-pres2form) #ajaxcstpage *{ box-sizing:border-box; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage > table{ width:100% !important; border-collapse:collapse; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage > table > tbody > tr:nth-child(2){ display:none !important; }
/* ── 헤더 셀: 제목줄 + 검색줄 세로 배치 ── */
:is(.page-pres1form,.page-pres2form) #ajaxcstpage > table > tbody > tr:first-child > td{ padding:0 !important; position:relative; border:0 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage > table > tbody > tr:first-child table{ width:100% !important; border-collapse:collapse; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage > table > tbody > tr:first-child table td{ display:block !important; width:100% !important; padding:0 !important; text-align:left !important; vertical-align:middle; }
/* 제목줄 + 주황 라인(제목 바로 아래) */
:is(.page-pres1form,.page-pres2form) #ajaxcstpage > table > tbody > tr:first-child table td:first-child{
padding:18px 20px 20px 20px !important; position:relative;
}
:is(.page-pres1form,.page-pres2form) #ajaxcstpage > table > tbody > tr:first-child table td:first-child::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
background:linear-gradient(90deg,#b5560f,#b5560f 42%,transparent);
}
:is(.page-pres1form,.page-pres2form) #ajaxcstpage img[src*="titledot"]{ display:none !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage b{ font-size:16px !important; font-weight:800 !important; color:#141414 !important; white-space:nowrap; line-height:1.2; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage b font{ font-size:16px !important; color:#141414 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage b::before{
content:""; display:inline-block; width:10px; height:10px; border-radius:50%;
background:#b5560f; margin-right:10px; vertical-align:middle; box-shadow:0 0 0 4px rgba(181,86,15,.14);
}
/* 검색줄 */
:is(.page-pres1form,.page-pres2form) #ajaxcstpage > table > tbody > tr:first-child table td + td{
display:flex !important; gap:9px; align-items:center; padding:16px 20px !important; border-bottom:1px solid #efeff1;
}
:is(.page-pres1form,.page-pres2form) #ajaxcstpage input#cstsstring{
flex:1 1 auto; width:auto !important; height:44px !important; margin:0 !important;
border:1px solid #e4e4e6 !important; border-radius:10px !important; color:#141414 !important;
font-size:14.5px !important; padding:0 14px 0 42px !important;
background:#f7f7f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%239b9b9b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.2-3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 15px center !important;
}
:is(.page-pres1form,.page-pres2form) #ajaxcstpage input#cstsstring::placeholder{ color:#9b9b9b; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage input#cstsstring:focus{
outline:none; border-color:#b5560f !important; background-color:#fff !important; box-shadow:0 0 0 3px rgba(181,86,15,.16);
}
:is(.page-pres1form,.page-pres2form) #ajaxcstpage input[value="검색"]{
flex:0 0 auto; height:44px !important; width:auto !important; margin:0 !important; padding:0 22px !important;
border:0 !important; border-radius:10px !important; background:#b5560f !important; color:#fff !important;
font-size:14.5px !important; font-weight:700 !important; cursor:pointer; vertical-align:middle;
}
:is(.page-pres1form,.page-pres2form) #ajaxcstpage input[value="검색"]:hover{ background:#984809 !important; }
/* × 닫기(우상단) */
:is(.page-pres1form,.page-pres2form) #ajaxcstpage input[value="창닫기"]{
position:absolute !important; top:13px; right:18px; margin:0 !important; padding:0 !important;
width:32px !important; height:32px !important; font-size:0 !important; color:transparent !important;
border:1px solid #e4e4e6 !important; border-radius:9px !important; cursor:pointer;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/16px no-repeat !important;
}
:is(.page-pres1form,.page-pres2form) #ajaxcstpage input[value="창닫기"]:hover{
border-color:#b5560f !important;
background:#f7f7f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b5560f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/16px no-repeat !important;
}
/* ── 리스트 ── */
:is(.page-pres1form,.page-pres2form) #ajaxcstpage > table > tbody > tr:nth-child(3) > td{ padding:0 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage #ajaxcstlist{ height:auto !important; max-height:344px !important; overflow-y:auto !important; padding:0 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .board_01{ padding:0 !important; margin:0 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01{ width:100% !important; border:0 !important; border-collapse:collapse !important; table-layout:fixed; background:#fff !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 colgroup col:nth-child(1){ width:auto !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 colgroup col:nth-child(2){ width:66px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 colgroup col:nth-child(3){ width:64px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 colgroup col:nth-child(4){ width:37% !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 colgroup col:nth-child(5){ width:0 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 thead th{
position:sticky; top:0; z-index:1; background:#f7f7f8 !important; color:#6b6b6b !important;
font-size:12.5px !important; font-weight:700 !important; text-align:left !important;
padding:11px 12px !important; border:0 !important; border-bottom:1px solid #e4e4e6 !important;
}
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 tbody td{
padding:13px 12px !important; font-size:13.5px !important; text-align:left !important; color:#3a3a3a !important;
border:0 !important; border-top:1px solid #efeff1 !important; background:#fff !important;
vertical-align:middle; white-space:nowrap;
}
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 tbody td:nth-child(1),
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 tbody td:nth-child(4){ overflow:hidden; text-overflow:ellipsis; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 tbody tr:hover td{ background:#f5f5f6 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 a{ color:#141414 !important; text-decoration:none !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 tbody td:first-child a{ font-weight:700; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 tbody tr:hover td:first-child a{ text-decoration:underline !important; text-decoration-color:#b5560f !important; text-underline-offset:2px; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 thead th:nth-child(5),
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 tbody td:nth-child(5){ display:none !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 th:nth-child(2),
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 td:nth-child(2){ text-align:center !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 th:nth-child(3),
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 td:nth-child(3){ text-align:right !important; font-variant-numeric:tabular-nums; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 td:nth-child(4){ color:#6b6b6b !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 tbody td:nth-child(2) a{
display:inline-block; background:#eef0f1; color:#333; border-radius:99px; padding:5px 10px; font-size:12px; font-weight:700; min-width:26px;
}
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 tbody tr:hover td:nth-child(2) a{ text-decoration:none !important; }
/* 빈 목록 메시지 */
:is(.page-pres1form,.page-pres2form) #ajaxcstpage .bbs_list01 td.cst-empty{
display:table-cell !important; text-align:center !important; color:#8a7f72 !important;
font-size:14px !important; font-weight:500 !important; padding:54px 16px !important;
border-top:0 !important; overflow:visible; white-space:normal;
}
/* =============================================================================
12. 처방추가 팝업(#ajaxspdpage = /tang/spdpage.asp + spdlist.asp + spdview.asp)
마스터-디테일(좌 #ajaxspdlist + 우 #ajaxspddetail) + 초성필터. 환자팝업과 같은 규칙.
원본 .asp 는 placeholder 1개만. 반드시 #ajaxspdpage 안으로만 스코프.
구조: #ajaxspdpage > table:first-of-type(헤더) + table:last-of-type(패널, foster됨).
============================================================================= */
/* ── 카드(모달) ── */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage{
position:fixed !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%);
width:640px !important; max-width:95vw !important; height:auto !important; padding:0 !important;
background:#fff !important; border:1px solid #e4e4e6 !important; border-radius:14px !important;
box-shadow:0 0 0 100vmax rgba(0,0,0,.45), 0 24px 60px -18px rgba(0,0,0,.35) !important;
z-index:100000 !important; overflow:hidden;
font-family:"Noto Sans KR","Malgun Gothic",sans-serif;
}
:is(.page-pres1form,.page-pres2form) #ajaxspdpage *{ box-sizing:border-box; }
/* ── 헤더(table:first-of-type) ── */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:first-of-type{ width:100% !important; border-collapse:collapse; position:relative; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:first-of-type > tbody > tr:first-child > td{ padding:0 !important; position:relative; }
/* 헤더 내부 테이블: 제목/컨트롤 세로 스택 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:first-of-type table{ width:100% !important; border-collapse:collapse; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:first-of-type table td{ display:block !important; width:100% !important; padding:0 !important; text-align:left !important; }
/* 제목줄 + 주황 라인 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:first-of-type table td:first-child{ padding:18px 20px 18px 20px !important; position:relative; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:first-of-type table td:first-child::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
background:linear-gradient(90deg,#b5560f,#b5560f 42%,transparent);
}
:is(.page-pres1form,.page-pres2form) #ajaxspdpage img[src*="titledot"]{ display:none !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage b{ font-size:16px !important; font-weight:800 !important; color:#141414 !important; white-space:nowrap; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage b font{ font-size:16px !important; color:#141414 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage b::before{ content:""; display:inline-block; width:10px; height:10px; border-radius:50%; background:#b5560f; margin-right:10px; vertical-align:middle; box-shadow:0 0 0 4px rgba(181,86,15,.14); }
/* 컨트롤줄(검색 + 초성필터), 창닫기는 우상단 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:first-of-type table td + td{
display:flex !important; flex-wrap:wrap; gap:7px; align-items:center; padding:14px 20px 16px !important;
}
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input#spdsstring{
flex:1 1 calc(100% - 74px); width:auto !important; height:42px !important; margin:0 !important;
border:1px solid #e4e4e6 !important; border-radius:10px !important; color:#141414 !important;
font-size:14.5px !important; padding:0 14px 0 40px !important;
background:#f7f7f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239b9b9b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.2-3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 14px center !important;
}
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input#spdsstring::placeholder{ color:#9b9b9b; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input#spdsstring:focus{ outline:none; border-color:#b5560f !important; background-color:#fff !important; box-shadow:0 0 0 3px rgba(181,86,15,.16); }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input[value="검색"]{
flex:0 0 auto; height:42px !important; width:auto !important; margin:0 !important; padding:0 18px !important;
border:0 !important; border-radius:10px !important; background:#b5560f !important; color:#fff !important;
font-size:14.5px !important; font-weight:700 !important; cursor:pointer;
}
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input[value="검색"]:hover{ background:#984809 !important; }
/* 초성 버튼(검색/창닫기 제외한 btnlgray) = 세그먼트 필터 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:first-of-type input.btnlgray:not([value="검색"]):not([value="창닫기"]){
flex:0 0 auto; width:32px !important; height:32px !important; margin:0 !important; padding:0 !important;
border:1px solid #e4e4e6 !important; border-radius:8px !important; background:#fff !important;
color:#3a3a3a !important; font-size:12.5px !important; font-weight:700 !important; cursor:pointer; transition:all .12s;
}
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:first-of-type input.btnlgray:not([value="검색"]):not([value="창닫기"]):hover{ border-color:#b5560f !important; color:#b5560f !important; }
/* 창닫기 → × 우상단 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input[value="창닫기"]{
position:absolute !important; top:14px; right:18px; margin:0 !important; padding:0 !important;
width:32px !important; height:32px !important; font-size:0 !important; color:transparent !important;
border:1px solid #e4e4e6 !important; border-radius:9px !important; cursor:pointer;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/16px no-repeat !important;
}
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input[value="창닫기"]:hover{ border-color:#b5560f !important; }
/* ── 패널(table:last-of-type) : 좌 목록 | 우 상세 ── */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:last-of-type{ width:100% !important; table-layout:fixed; border-collapse:collapse; border-top:1px solid #efeff1; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:last-of-type > tbody > tr > td:nth-child(1){ width:45% !important; vertical-align:top; padding:0 !important; }
/* [구조차이 주의] 구분선은 '빈 td' 다. pres1form 은 td 3개(목록|구분선|상세), pres2form(inspdpage)은
td 2개(목록|상세) 라 nth-child(2) 로 칠하면 보험첩약에선 **상세 패널 전체가 회색**이 된다.
-> :empty 로 한정해 빈 칸일 때만 구분선으로 칠한다. */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:last-of-type > tbody > tr > td:empty{ width:1px !important; padding:0 !important; background:#ececee; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:last-of-type > tbody > tr > td:nth-child(3){ vertical-align:top; padding:0 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist{ height:auto !important; max-height:360px !important; overflow-y:auto !important; width:100% !important; padding:0 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail{ height:auto !important; max-height:360px !important; overflow-y:auto !important; width:100% !important; padding:14px 16px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .board_01{ padding:0 !important; margin:0 !important; }
/* 공통 리스트 테이블 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_list01{ width:100% !important; border:0 !important; border-collapse:collapse !important; table-layout:fixed; background:#fff !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_list01 thead th{
position:sticky; top:0; z-index:1; background:#f7f7f8 !important; color:#6b6b6b !important;
font-size:12px !important; font-weight:700 !important; text-align:left !important;
padding:10px 10px !important; border:0 !important; border-bottom:1px solid #e4e4e6 !important; white-space:nowrap;
}
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_list01 tbody td{
padding:11px 10px !important; font-size:13.5px !important; text-align:left !important; color:#3a3a3a !important;
border:0 !important; border-top:1px solid #efeff1 !important; background:#fff !important; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_list01 tbody tr:hover td{ background:#f5f5f6 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_list01 a{ color:#141414 !important; text-decoration:none !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 tbody td:first-child a{ font-weight:700; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 tbody tr:hover td:first-child a{ text-decoration:underline !important; text-decoration-color:#b5560f !important; text-underline-offset:2px; }
/* 좌목록 컬럼: 표준처방명(auto)·출전·약재수(우)·상세보기 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 th:nth-child(3),
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 td:nth-child(3){ text-align:right !important; font-variant-numeric:tabular-nums; color:#6b6b6b !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 td:nth-child(2){ color:#6b6b6b !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 th:nth-child(4),
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 td:nth-child(4){ text-align:center !important; overflow:visible; }
/* 상세보기 버튼 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input[value="상세보기"]{
width:auto !important; height:26px !important; padding:0 10px !important; border:1px solid #e4e4e6 !important;
border-radius:7px !important; background:#fff !important; color:#6b6b6b !important; font-size:11.5px !important; font-weight:600 !important; cursor:pointer;
}
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input[value="상세보기"]:hover{ border-color:#b5560f !important; color:#b5560f !important; }
/* 좌목록 빈 메시지(colspan=4) - 파랑 경고문은 무채/주황으로 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_list01 td[colspan="4"]{ text-align:center !important; padding:34px 14px !important; color:#8a7f72 !important; font-size:13px !important; line-height:1.7; border-top:0 !important; white-space:normal; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage font[color="blue"]{ color:#b5560f !important; }
/* 우상세: bbs_view01 (처방명/설명/관련) */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_view01{ width:100% !important; border:1px solid #ececee !important; border-radius:10px; border-collapse:separate !important; overflow:hidden; margin:0 0 12px; background:#fff; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_view01 th{ width:78px; background:#f7f7f8 !important; color:#6b6b6b !important; font-size:12px !important; font-weight:700 !important; text-align:left !important; padding:9px 10px !important; border:0 !important; border-bottom:1px solid #efeff1 !important; vertical-align:top; white-space:nowrap; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_view01 td{ font-size:13px !important; color:#141414 !important; padding:9px 10px !important; border:0 !important; border-bottom:1px solid #efeff1 !important; word-break:keep-all; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_view01 tr:last-child th,
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_view01 tr:last-child td{ border-bottom:0 !important; }
/* 우상세: 약재구성표 컬럼 NO·약재명·원산지·표준량·g당단가 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01{ border:1px solid #ececee !important; border-radius:10px; overflow:hidden; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 th:nth-child(1),
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 td:nth-child(1){ text-align:center !important; color:#9b9b9b !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 th:nth-child(4),
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 td:nth-child(4),
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 th:nth-child(5),
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 td:nth-child(5){ text-align:right !important; font-variant-numeric:tabular-nums; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 tbody tr:last-child td{ background:#faf7f2 !important; font-weight:700; color:#141414 !important; border-top:1px solid #e4e4e6 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .expen,
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .exp{ color:#9b9b9b !important; font-weight:400; }
/* 우상세 빈 메시지 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .noarticle{ color:#8a7f72 !important; font-size:13px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail td[colspan]{ text-align:center !important; padding:30px 14px !important; line-height:1.7; white-space:normal; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage font[color="fb5200"]{ color:#b5560f !important; }
/* 12-b. 처방추가: 스페이서 행 접기 + 가로 스크롤 제거(컬럼 폭 패널에 맞춤) */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:first-of-type > tbody > tr:not(:first-child){ display:none !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:first-of-type table > tbody > tr:not(:first-child){ display:none !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist{ overflow-x:hidden !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail{ overflow-x:hidden !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(1){ width:auto !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(2){ width:48px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(3){ width:46px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(4){ width:62px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(1){ width:28px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(2){ width:auto !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(3){ width:50px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(4){ width:52px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(5){ width:54px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_view01 colgroup col:nth-child(1){ width:74px !important; }
/* 12-c. 약재구성표 g당단가 잘림 방지: 컬럼 폭 재조정 + 상세보기 버튼 살짝 축소 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(1){ width:26px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(3){ width:46px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(4){ width:48px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(5){ width:62px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 td{ white-space:nowrap; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input[value="상세보기"]{ padding:0 8px !important; font-size:11px !important; height:24px !important; }
/* 12-d. 처방추가 팝업 넓혀 목록 전체 보이게: 카드 폭 640->880, 출전 컬럼 넓힘, 패널 높이↑ */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage{ width:930px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:last-of-type > tbody > tr > td:nth-child(1){ width:46% !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(2){ width:80px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(3){ width:50px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(4){ width:66px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist{ max-height:470px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail{ max-height:470px !important; }
/* 12-e. g당단가 여유폭(388원 등 잘림 방지) */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(4){ width:44px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(5){ width:70px !important; }
/* 12-f. 잘림 원천 차단: 텍스트 컬럼 줄바꿈 허용(숫자 컬럼만 nowrap), NO/상세보기 폭 보정 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_list01 tbody td{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; word-break:keep-all; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 td:nth-child(3){ white-space:nowrap !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 td:nth-child(4),
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 td:nth-child(5){ white-space:nowrap !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(1){ width:34px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 th:nth-child(1){ white-space:nowrap !important; text-overflow:clip !important; overflow:visible !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(4){ width:74px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspdlist .bbs_list01 th:nth-child(4){ white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; }
/* 12-g. 상세 NO 컬럼 두자리 숫자 세로쪼개짐 방지: nowrap + 폭/패딩 보정 */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 td:nth-child(1){ white-space:nowrap !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 colgroup col:nth-child(1){ width:38px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 td:nth-child(1),
:is(.page-pres1form,.page-pres2form) #ajaxspdpage #ajaxspddetail .bbs_list01 th:nth-child(1){ padding-left:6px !important; padding-right:6px !important; }
/* =============================================================================
13. 약재추가 팝업(#ajaxhrbpage = /tang/hrbpage.asp + hrblist.asp) - 단일 목록 + 초성필터
환자팝업과 같은 규칙. 원본 .asp 는 placeholder 1개 + 빈메시지 1분기.
반드시 #ajaxhrbpage 안으로만 스코프. 헤더 내부표는 `> tr:first-child table` 로 (리스트표와 구분).
============================================================================= */
/* ── 카드(모달) ── */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage{
position:fixed !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%);
width:500px !important; max-width:94vw !important; height:auto !important; padding:0 !important;
background:#fff !important; border:1px solid #e4e4e6 !important; border-radius:14px !important;
box-shadow:0 0 0 100vmax rgba(0,0,0,.45), 0 24px 60px -18px rgba(0,0,0,.35) !important;
z-index:100000 !important; overflow:hidden; font-family:"Noto Sans KR","Malgun Gothic",sans-serif;
}
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage *{ box-sizing:border-box; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage > table{ width:100% !important; border-collapse:collapse; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage > table > tbody > tr:nth-child(2){ display:none !important; }
/* ── 헤더 ── */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage > table > tbody > tr:first-child > td{ padding:0 !important; position:relative; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage > table > tbody > tr:first-child table{ width:100% !important; border-collapse:collapse; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage > table > tbody > tr:first-child table td{ display:block !important; width:100% !important; padding:0 !important; text-align:left !important; }
/* 제목줄 (내부표 tr1 td1) + 주황 라인 */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage > table > tbody > tr:first-child table > tbody > tr:nth-child(1) > td:nth-child(1){ padding:18px 20px 15px 20px !important; position:relative; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage > table > tbody > tr:first-child table > tbody > tr:nth-child(1) > td:nth-child(1)::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,#b5560f,#b5560f 42%,transparent);
}
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage img[src*="titledot"]{ display:none !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage b{ font-size:16px !important; font-weight:800 !important; color:#141414 !important; white-space:nowrap; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage b font{ font-size:16px !important; color:#141414 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage b::before{ content:""; display:inline-block; width:10px; height:10px; border-radius:50%; background:#b5560f; margin-right:10px; vertical-align:middle; box-shadow:0 0 0 4px rgba(181,86,15,.14); }
/* 검색줄 (내부표 tr1 td2) */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage > table > tbody > tr:first-child table > tbody > tr:nth-child(1) > td:nth-child(2){ display:flex !important; gap:8px; align-items:center; padding:14px 20px 0 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage input#hrbsstring{
flex:1 1 auto; width:auto !important; height:42px !important; margin:0 !important;
border:1px solid #e4e4e6 !important; border-radius:10px !important; color:#141414 !important;
font-size:14.5px !important; padding:0 14px 0 40px !important;
background:#f7f7f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239b9b9b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.2-3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 14px center !important;
}
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage input#hrbsstring::placeholder{ color:#9b9b9b; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage input#hrbsstring:focus{ outline:none; border-color:#b5560f !important; background-color:#fff !important; box-shadow:0 0 0 3px rgba(181,86,15,.16); }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage input[value="검색"]{
flex:0 0 auto; height:42px !important; width:auto !important; margin:0 !important; padding:0 18px !important;
border:0 !important; border-radius:10px !important; background:#b5560f !important; color:#fff !important; font-size:14.5px !important; font-weight:700 !important; cursor:pointer;
}
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage input[value="검색"]:hover{ background:#984809 !important; }
/* 스페이서 행(내부표 tr2) 숨김 */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage > table > tbody > tr:first-child table > tbody > tr:nth-child(2){ display:none !important; }
/* 초성 행(내부표 tr3) */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage > table > tbody > tr:first-child table > tbody > tr:nth-child(3) > td{ display:flex !important; flex-wrap:wrap; gap:6px; padding:12px 20px 16px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage input.btnlgray:not([value="검색"]):not([value="창닫기"]){
flex:0 0 auto; width:31px !important; height:31px !important; margin:0 !important; padding:0 !important;
border:1px solid #e4e4e6 !important; border-radius:8px !important; background:#fff !important; color:#3a3a3a !important; font-size:12.5px !important; font-weight:700 !important; cursor:pointer; transition:all .12s;
}
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage input.btnlgray:not([value="검색"]):not([value="창닫기"]):hover{ border-color:#b5560f !important; color:#b5560f !important; }
/* 창닫기 → × 우상단 */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage input[value="창닫기"]{
position:absolute !important; top:14px; right:18px; margin:0 !important; padding:0 !important;
width:32px !important; height:32px !important; font-size:0 !important; color:transparent !important;
border:1px solid #e4e4e6 !important; border-radius:9px !important; cursor:pointer;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/16px no-repeat !important;
}
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage input[value="창닫기"]:hover{ border-color:#b5560f !important; }
/* ── 리스트 ── */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage > table > tbody > tr:nth-child(3) > td{ padding:0 !important; border-top:1px solid #efeff1; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage #ajaxhrblist{ height:auto !important; max-height:360px !important; overflow-y:auto !important; overflow-x:hidden !important; padding:0 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .board_01{ padding:0 !important; margin:0 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01{ width:100% !important; border:0 !important; border-collapse:collapse !important; table-layout:fixed; background:#fff !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(1){ width:auto !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(2){ width:64px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(3){ width:78px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(4){ width:92px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 thead th{
position:sticky; top:0; z-index:1; background:#f7f7f8 !important; color:#6b6b6b !important;
font-size:12px !important; font-weight:700 !important; text-align:left !important; padding:10px 10px !important; border:0 !important; border-bottom:1px solid #e4e4e6 !important; white-space:nowrap;
}
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 tbody td{
padding:12px 10px !important; font-size:13.5px !important; text-align:left !important; color:#3a3a3a !important;
border:0 !important; border-top:1px solid #efeff1 !important; background:#fff !important; vertical-align:middle; white-space:normal; word-break:keep-all;
}
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 tbody tr:hover td{ background:#f5f5f6 !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 a{ color:#141414 !important; text-decoration:none !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 tbody td:first-child a{ font-weight:700; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 tbody tr:hover td:first-child a{ text-decoration:underline !important; text-decoration-color:#b5560f !important; text-underline-offset:2px; }
/* 컬럼 정렬: 원산지(중앙) g당단가(우,nowrap) 상태(중앙) */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 th:nth-child(2),
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 td:nth-child(2){ text-align:center !important; color:#6b6b6b !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 th:nth-child(3),
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 td:nth-child(3){ text-align:right !important; font-variant-numeric:tabular-nums; white-space:nowrap !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 th:nth-child(4),
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 td:nth-child(4){ text-align:center !important; white-space:nowrap !important; }
/* 상태 뱃지: 처방가능(초록)/처방불가(빨강) */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 td:nth-child(4) font{ display:inline-block; padding:4px 10px; border-radius:99px; font-size:12px !important; font-weight:700; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage font[color="006a35"]{ color:#087443 !important; background:#e8f5ee; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage font[color="ff0000"]{ color:#cf2020 !important; background:#fbeaea; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 tbody tr:has(font[color="ff0000"]) td{ opacity:.72; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 tbody tr:has(font[color="ff0000"]) td:first-child a{ text-decoration:line-through; color:#9b9b9b !important; }
/* 빈 메시지(hrblist else 분기, td.hrb-empty) */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 td.hrb-empty{ display:table-cell !important; text-align:center !important; padding:46px 16px !important; color:#8a7f72 !important; font-size:14px !important; border-top:0 !important; white-space:normal; }
/* 13-b. 초성 14개 한 줄에 들어오게 카드 폭 500->560 */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage{ width:560px !important; }
/* 13-c. 목록 균형: 한약재명 너무 넓던 것 개선 - 카드 560->430(콘텐츠에 맞춤), 컬럼 실측값 기준.
한약재명 auto(~153, 90% 한 줄, 긴 이름만 wrap), 원산지86·g당단가78·상태96. 초성은 2줄로 자연 배치. */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage{ width:430px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(1){ width:auto !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(2){ width:86px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(3){ width:78px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(4){ width:96px !important; }
/* 13-d. 팝업 폭 말고 '셀 조절'로 균형: 카드 560 유지, 컬럼을 비율로 배분해 남는 폭을 고루 나눔.
한약재명 38%(콘텐츠 맞춤)·원산지 18%·g당단가 18%·상태 26%. */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage{ width:560px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(1){ width:38% !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(2){ width:18% !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(3){ width:18% !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(4){ width:26% !important; }
/* =============================================================================
14. 나의비방 팝업(#ajaxspdpage 재사용 = mybpage.asp + myblist.asp + mybview.asp)
패널/목록/상세는 섹션 12(#ajaxspdpage 스코프)가 이미 적용됨. 여기선 검색 input(#mybsstring)
스타일 + 빈메시지만 보강. 초성 없음. 원본 .asp 는 placeholder + 빈메시지 else분기.
============================================================================= */
/* 검색 input #mybsstring - #spdsstring 과 동일 스타일(돋보기+주황포커스). 초성 없어 flex:1 1 auto */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input#mybsstring{
flex:1 1 auto; width:auto !important; height:42px !important; margin:0 !important;
border:1px solid #e4e4e6 !important; border-radius:10px !important; color:#141414 !important;
font-size:14.5px !important; padding:0 14px 0 40px !important;
background:#f7f7f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239b9b9b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.2-3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 14px center !important;
}
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input#mybsstring::placeholder{ color:#9b9b9b; }
:is(.page-pres1form,.page-pres2form) #ajaxspdpage input#mybsstring:focus{ outline:none; border-color:#b5560f !important; background-color:#fff !important; box-shadow:0 0 0 3px rgba(181,86,15,.16); }
/* 나의비방 빈 목록 메시지(myblist else, td.myb-empty) */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage .bbs_list01 td.myb-empty{ display:table-cell !important; text-align:center !important; padding:46px 16px !important; color:#8a7f72 !important; font-size:14px !important; border-top:0 !important; white-space:normal; }
/* =============================================================================
15. 주문하기(pres1form) 좌측 처방목록 초기 로딩 이미지 정돈 (:is(.page-pres1form,.page-pres2form))
jqpres1hrblistinit() 가 #ajaxitemlist 에
에 인라인 width:150px 이 있어 padding(30·46)과 합산됨.
-> width:auto 로 덮어 '내용+패딩' 폭이 되게 함(그러면 시안 값과 같아진다).
간격은 li margin(5px씩)+inline-block 공백 때문에 23px 이던 것을 flex gap 10px 로 고정. */
:is(.page-pres1form,.page-pres2form) .orderbox03 .button a{ width:auto !important; }
:is(.page-pres1form,.page-pres2form) .orderbox03 ul.box02{ display:flex; justify-content:center; align-items:center; gap:10px; }
:is(.page-pres1form,.page-pres2form) .orderbox03 ul.box02 li{ margin:0 !important; padding:0 !important; }
/* 간격 19px 의 정체: flex gap 10 + li padding-right 5 + span margin-right 4 -> 뒤 둘을 제거해 정확히 10 */
:is(.page-pres1form,.page-pres2form) .orderbox03 ul.box02 .button{ margin:0 !important; }
/* 폭이 시안보다 컸던 이유: 라이브 폰트가 Dotum 이라 한글이 넓게 렌더됨(시안은 Noto Sans KR).
팝업/카드와 같은 폰트 스택으로 맞추면 시안 폭에 근접한다. */
:is(.page-pres1form,.page-pres2form) .orderbox03 .button a{ font-family:"Noto Sans KR","Malgun Gothic","맑은 고딕",sans-serif; }
/* 24. 초성(ㄱㄴㄷㄹ) 버튼 폰트 한 단계 크게: 12.5 -> 13.5px (처방추가·약재추가 공통).
글자가 커진 만큼 버튼도 32 -> 34px 로 키워 답답해 보이지 않게 함. */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:first-of-type input.btnlgray:not([value="검색"]):not([value="창닫기"]),
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage input.btnlgray:not([value="검색"]):not([value="창닫기"]){
width:34px !important; height:34px !important; font-size:13.5px !important;
}
/* 25. 조제 설정 섹션 제목 폰트 한 단계 크게: 12 -> 13px.
대상 = .order_select01 의 li.text_bold 전체이므로 제형(탕제/환제/캡슐제조) 어느 모드에서든
같은 라벨류(제형 선택·조제 용량·재탕 여부·제환 선택·환제 상세·포장 선택 …)에 모두 적용된다. */
:is(.page-pres1form,.page-pres2form) .order_select01 li.text_bold{ font-size:13px !important; }
/* =============================================================================
26. 환제 모드 '포장 선택' 하단 정돈 + 포장병 이미지
- 라벨 11 -> 12.5px, 입력칸 높이 20 -> 28px(폰트 12 -> 13)로 다른 입력들과 통일
- 포장병 이미지: 44x69 -> 64x100 으로 확대하고, 회색 배경을 제거한 투명 PNG 로 교체.
원본 /images/img_product.gif 는 그대로 두고 content:url() 로 표시만 바꾼다
(원본 .asp·.gif 무수정 -> 이 규칙만 지우면 완전히 원복).
============================================================================= */
/* 라벨(용기 소/중/대/특, 금박·종이+청병, 안내문) */
:is(.page-pres1form,.page-pres2form) #layertangpart22 li,
:is(.page-pres1form,.page-pres2form) #layertangpart30 li{ font-size:12.5px !important; line-height:1.9; }
/* 입력칸: 다른 조제설정 입력과 같은 높이/폰트로 */
:is(.page-pres1form,.page-pres2form) #layertangpart22 input.input_text01,
:is(.page-pres1form,.page-pres2form) #layertangpart30 input.input_text01{
height:28px !important; font-size:13px !important; padding:0 8px !important;
border:1px solid #e4e4e6 !important; border-radius:8px !important; background:#f7f7f8 !important;
color:#141414 !important; vertical-align:middle; margin:0 3px !important;
}
:is(.page-pres1form,.page-pres2form) #layertangpart22 input.input_text01:focus,
:is(.page-pres1form,.page-pres2form) #layertangpart30 input.input_text01:focus{
outline:none; border-color:#b5560f !important; background:#fff !important; box-shadow:0 0 0 3px rgba(181,86,15,.16);
}
/* 포장병 이미지: 확대 + 배경 제거본으로 교체 */
:is(.page-pres1form,.page-pres2form) .order_select01 img[src*="img_product"]{
content:url("/images/img_product_nobg.png");
width:64px !important; height:100px !important; object-fit:contain;
}
/* 이미지를 '포장 선택' 라벨의 '포' 글자 시작점(패널 기준 35px)에 맞춤. 원본 인라인 left:15px 를 덮음 */
:is(.page-pres1form,.page-pres2form) .order_select01 div:has(> img[src*="img_product"]){ left:35px !important; }
/* 26-b. 포장 선택 행 정렬/여백/문구
- 각 행을 grid 로 만들어 [라벨][수량][개 =][가격] 4열을 **모든 행에서 같은 폭**으로 고정
-> 세로 라인이 정확히 맞는다. (텍스트 노드도 grid item 이 되므로 열 폭 지정이 먹는다)
- 입력칸을 열 폭에 꽉 채워 통일 + 이전보다 넓게(수량 64 / 가격 96)
- 이미지가 44->64px 로 넓어진 만큼 본문 왼쪽 여백을 늘려 이미지와 겹치지 않게
- '탄자대(일반)보다 …' 안내 문구 폰트 한 단계 크게 */
:is(.page-pres1form,.page-pres2form) #layertangpart22 ul > li:has(> input),
:is(.page-pres1form,.page-pres2form) #layertangpart30 ul > li:has(> input){
display:grid !important; grid-template-columns:104px 50px max-content 68px;
align-items:center; gap:6px; margin:0 0 6px !important; white-space:nowrap;
/* [2026-09-02] 라벨 열을 max-content -> 104px 고정.
max-content 면 그룹마다 라벨 길이가 달라('* 금박+청병포장 : ' 97.05px vs
'용기(소:100ml) : ' 92.5px) 입력칸 세로 라인이 두 그룹 사이에서 4.5px 어긋났다.
104px = 11.08(들여쓰기, 아래 참고) + 92.5(용기 라벨) 를 담는 최소값. 금박(97.05)도 들어간다.
'개 =' 열은 두 그룹의 문구가 같아 max-content 로 둬도 폭이 동일하다.
nowrap 이라 '=' 가 다음 줄로 넘어가지 않는다. */
}
:is(.page-pres1form,.page-pres2form) #layertangpart22 ul > li:has(> input) input.input_text01,
:is(.page-pres1form,.page-pres2form) #layertangpart30 ul > li:has(> input) input.input_text01{
width:100% !important; margin:0 !important; box-sizing:border-box;
}
/* 26-c. [2026-09-02] '용기(...)' 글자를 '* 금박+청병포장' 의 **'금' 자리**에 맞춘다.
청병 2행은 앞에 '* ' 가 붙어 글자가 그만큼 오른쪽에서 시작하는데 용기 4행은 붙지 않아
왼쪽 라인이 어긋나 보였다. '* ' 의 실측 폭은 **11.08px**(12.5px NanumGothic).
용기 행만 그만큼 들여쓰고 라벨 열을 같은 만큼(104 -> 93) 줄인다.
-> 들여쓰기 + 라벨열 = 11 + 93 = 104 로 청병 행(0 + 104)과 같아서
**글자 시작선은 맞고 입력칸 열은 그대로 유지**된다. */
:is(.page-pres1form,.page-pres2form) #layertangpart22 ul > li:has(> input){
padding-left:11px !important;
grid-template-columns:93px 50px max-content 68px;
}
/* 이미지(64px, left:15px -> 우측 끝 79px)와 본문 사이 여백 24px 확보 */
:is(.page-pres1form,.page-pres2form) #layertangpart22{ padding-left:112px !important; }
:is(.page-pres1form,.page-pres2form) #layertangpart30{ padding-left:112px !important; }
/* 안내 문구 11 -> 12.5px */
:is(.page-pres1form,.page-pres2form) .order_select01 .expteal{ font-size:12.5px !important; line-height:1.7; }
/* 27. 상단바 처방명·고객/환자명 입력칸 확대 80 -> 112px.
여유 근거: '전체약재삭제'(우측끝 615) 와 '처방추가'(시작 703) 사이 88px 공백 ->
두 칸을 각 32px 늘려도(합 64) 24px 여유가 남아 버튼 그룹과 겹치지 않는다. */
:is(.page-pres1form,.page-pres2form) .orderbox01 input[name="fmlname"],
:is(.page-pres1form,.page-pres2form) .orderbox01 input[name="cstname"]{ width:112px !important; }
/* 28. 간편서식(복약지도서) 팝업 내용 폰트 한 단계 크게
본문 13 -> 14 / 안내박스 12.5 -> 13.5 / 섹션제목 13.5 -> 14.5 / 입력·셀렉트·textarea 13 -> 14
(헤더 제목 16px 은 그대로 두어 위계 유지) */
:is(.page-pres1form,.page-pres2form) #ajaxcautpage table.bbs_view01 td{ font-size:14px !important; }
/* 안내문 회색 박스 */
:is(.page-pres1form,.page-pres2form) #ajaxcautpage table.bbs_view01 td:has(> font[color="444444"]):not(:has(b)):not(:has(input)):not(:has(select)):not(:has(textarea)),
:is(.page-pres1form,.page-pres2form) #ajaxcautpage table.bbs_view01 td:has(> font[color="white"]):not(:has(b)):not(:has(input)):not(:has(select)):not(:has(textarea)),
:is(.page-pres1form,.page-pres2form) #ajaxcautpage table.bbs_view01 tr:nth-of-type(5) > td,
:is(.page-pres1form,.page-pres2form) #ajaxcautpage table.bbs_view01 tr:nth-of-type(9) > td{ font-size:13.5px !important; }
/* 섹션 제목(::after 로 넣은 텍스트) */
:is(.page-pres1form,.page-pres2form) #ajaxcautpage td > font > b::after{ font-size:14.5px; }
/* 환자명 줄의 '님 귀하' */
:is(.page-pres1form,.page-pres2form) #ajaxcautpage table.bbs_view01 tr:nth-of-type(1) > td::after{ font-size:14px; }
/* 입력 요소 */
:is(.page-pres1form,.page-pres2form) #ajaxcautpage input[type="text"]{ font-size:14px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcautpage input[name="tmpcstname"]{ font-size:14.5px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcautpage select{ font-size:14px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxcautpage textarea{ font-size:14px !important; }
/* 헤더 아래 안내문구 */
:is(.page-pres1form,.page-pres2form) #ajaxcautpage .expgray{ font-size:13px !important; }
/* 28-b. 간편서식 팝업 푸터 버튼(저장하기/창 닫 기) 폰트 13 -> 14px.
본문(14px)과 맞추고, 글자가 커진 만큼 높이도 38 -> 40px 로 소폭 확대. */
:is(.page-pres1form,.page-pres2form) #ajaxcautpage .mid_btn a{ font-size:14px !important; height:40px !important; }
/* 29. 주수상반 라벨 클릭으로 체크박스 토글
pres1form.asp 에서 체크박스에 id='jusuflag' 를 주고 텍스트를 로 감쌌다.
(라벨 클릭 -> 브라우저가 input 에 클릭을 전달 -> 원본 onclick(caltangprice/jqpres1save) 그대로 실행)
여기선 클릭 가능하다는 표시만 추가. */
:is(.page-pres1form,.page-pres2form) .order_select01 label[for="jusuflag"]{ cursor:pointer; user-select:none; }
:is(.page-pres1form,.page-pres2form) .order_select01 li:has(> input[type=checkbox]){ cursor:pointer; }
/* 30. 두 가지 간격/폭 보정
(1) 목록 ↔ 조제설정 간격을 하단 폼 간격과 동일하게: 26px -> 16px.
.orderbox02 는 .filebox·.orderbox03 도 자식이라 flex 로 못 바꾼다(레이아웃 붕괴).
float 유지한 채 우측 패널을 10px 넓혀(439->449) 남는 간격이 16px 이 되게 함.
덤으로 '포장 선택' 가용폭도 419->429 로 늘어 여유가 생긴다.
(2) 약재추가 팝업 560 -> 660px, 한약재명 열 비중 38% -> 48% 로 확대. */
:is(.page-pres1form,.page-pres2form) .order_select01{ width:449px !important; box-sizing:border-box !important; }
/* content-box 였던 탓에 449 + padding/border 가 더해져 471 이 됐다 -> border-box 로 총폭 고정 */
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage{ width:660px !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(1){ width:48% !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(2){ width:15% !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(3){ width:16% !important; }
:is(.page-pres1form,.page-pres2form) #ajaxhrbpage .bbs_list01 colgroup col:nth-child(4){ width:21% !important; }
/* =============================================================================
31. 처방 목록 스크롤 영역 정리 (세로줄 + 우측 모서리 깨짐)
원인(측정): 카드(.order_list01, overflow:auto)와 내부(#ajaxitemlist, overflow-y:auto)가
**둘 다 스크롤 컨테이너**라 스크롤바가 2개(17px + 15px) 나란히 그려졌다.
그 경계가 세로줄로 보이고, 카드가 스크롤되면서 border-radius 14px 우측 모서리가 깨졌다.
추가로 표 배경이 회색(234,233,233)이라 흰 카드와의 경계도 세로줄처럼 보였다.
============================================================================= */
/* 카드는 스크롤하지 않음 -> 스크롤바 1개, 둥근 모서리가 내용물을 깔끔히 클리핑 */
:is(.page-pres1form,.page-pres2form) .order_list01{ overflow:hidden !important; }
/* 스크롤은 내부만 담당 */
:is(.page-pres1form,.page-pres2form) .order_list01 #ajaxitemlist{ overflow-y:auto !important; overflow-x:hidden !important; }
/* 표 회색 배경 제거(카드와 같은 흰색) -> 경계 세로줄 사라짐 */
:is(.page-pres1form,.page-pres2form) .order_list01 table.bbs_list01,
:is(.page-pres1form,.page-pres2form) .order_list01 table.bbs_list01 tbody,
:is(.page-pres1form,.page-pres2form) .order_list01 table.bbs_list01 tr{ background:#fff !important; }
/* 스크롤바를 얇고 연하게(트랙 경계선 제거) */
:is(.page-pres1form,.page-pres2form) .order_list01 #ajaxitemlist{ scrollbar-width:thin; scrollbar-color:#d6d6d9 transparent; }
:is(.page-pres1form,.page-pres2form) .order_list01 #ajaxitemlist::-webkit-scrollbar{ width:8px; }
:is(.page-pres1form,.page-pres2form) .order_list01 #ajaxitemlist::-webkit-scrollbar-track{ background:transparent; border:0; }
:is(.page-pres1form,.page-pres2form) .order_list01 #ajaxitemlist::-webkit-scrollbar-thumb{ background:#d6d6d9; border-radius:99px; }
:is(.page-pres1form,.page-pres2form) .order_list01 #ajaxitemlist::-webkit-scrollbar-thumb:hover{ background:#b9b9bd; }
/* 32. 고객/환자목록 팝업 폭 470 -> 490px (요청: 20px 더 넓게).
컬럼은 환자명 auto / 성별 66 / 나이 64 / 진단명 37% 비율 유지 -> 늘어난 20px 은
환자명(auto) 과 진단명(%) 에 분배되어 이름·진단이 더 여유있게 보인다. */
:is(.page-pres1form,.page-pres2form) #ajaxcstpage{ width:540px !important; }
/* 33. 보험첩약 약재추가 팝업은 컬럼이 5개(한약재명·원산지·제조사·g당단가·상태)로 다르다.
기존 4컬럼 규칙(48/15/16/21%)이 그대로 먹어 제조사(90px)가 좁아 74개 셀이 잘렸다.
-> pres2form 전용으로 5컬럼 비율 재배분. 제조사에 넉넉히 주고 한약재명은 조금 줄인다. */
.page-pres2form #ajaxhrbpage .bbs_list01 colgroup col:nth-child(1){ width:32% !important; }
.page-pres2form #ajaxhrbpage .bbs_list01 colgroup col:nth-child(2){ width:12% !important; }
.page-pres2form #ajaxhrbpage .bbs_list01 colgroup col:nth-child(3){ width:28% !important; }
.page-pres2form #ajaxhrbpage .bbs_list01 colgroup col:nth-child(4){ width:14% !important; }
.page-pres2form #ajaxhrbpage .bbs_list01 colgroup col:nth-child(5){ width:14% !important; }
/* 제조사·한약재명은 길어질 수 있으니 줄바꿈 허용(잘림 방지) */
.page-pres2form #ajaxhrbpage .bbs_list01 td:nth-child(1),
.page-pres2form #ajaxhrbpage .bbs_list01 td:nth-child(3){ white-space:normal !important; word-break:keep-all; }
/* 34. 보험첩약 표준처방 팝업을 주문하기와 동일하게 맞춤
(a) 컬럼이 5개(질환명·처방유형·기준처방·약재수·상세보기)인데 4컬럼용 폭이 적용돼
기준처방 50px 등으로 **82개 셀이 잘림** -> 5컬럼 비율 재배분 + 긴 항목 줄바꿈 허용.
(b) 주문하기엔 목록↔상세 사이 1px 구분선(빈 td)이 있는데 보험첩약은 td 가 2개라 없음
-> 상세 td 에 왼쪽 테두리를 줘 동일하게 보이게 함. */
.page-pres2form #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(1){ width:28% !important; }
.page-pres2form #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(2){ width:20% !important; }
.page-pres2form #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(3){ width:23% !important; }
.page-pres2form #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(4){ width:10% !important; }
.page-pres2form #ajaxspdpage #ajaxspdlist .bbs_list01 colgroup col:nth-child(5){ width:19% !important; }
/* 질환명·기준처방은 길어질 수 있으니 줄바꿈 허용(잘림 방지) */
.page-pres2form #ajaxspdpage #ajaxspdlist .bbs_list01 td:nth-child(1),
.page-pres2form #ajaxspdpage #ajaxspdlist .bbs_list01 td:nth-child(3){ white-space:normal !important; word-break:keep-all; }
/* 목록↔상세 구분선(주문하기의 빈 td 구분선과 동일한 효과) */
.page-pres2form #ajaxspdpage > table:last-of-type > tbody > tr > td:nth-child(2){ border-left:1px solid #ececee !important; }
/* 상세보기 버튼(인라인 width:55px + 패딩 = 59px)이 들어가도록 그 셀 좌우 패딩 축소 */
.page-pres2form #ajaxspdpage #ajaxspdlist .bbs_list01 td:nth-child(5){ padding-left:6px !important; padding-right:6px !important; text-align:center !important; }
/* 35. 보험첩약 표준처방 팝업 '결과 없음' 상태를 주문하기와 동일하게
(a) 우측 상세 패널이 60px 아래로 밀림: 상세 td 가 vertical-align:middle 이라 세로 가운데로 내려감
(주문하기는 top). -> 상세 td 도 top 으로.
(b) 좌측 빈 메시지가 왼쪽 정렬 + 좁은 패딩(11/10): 주문하기는 가운데 정렬 + 34/14 패딩.
td.td_center 인데 정렬이 안 먹던 것을 명시. */
.page-pres2form #ajaxspdpage > table:last-of-type > tbody > tr > td{ vertical-align:top !important; }
.page-pres2form #ajaxspdpage #ajaxspdlist .bbs_list01 td.td_center{
text-align:center !important; padding:34px 14px !important; white-space:normal !important;
}
/* 36. 표준처방 팝업 좌측 목록 폭 확대 (428 -> 500px). 상세는 나머지를 차지.
주문하기(td 3개: 목록|구분선|상세)·보험첩약(td 2개: 목록|상세) 모두 first-child 가 목록이라 공용.
※ 초성 버튼 간격은 측정 결과 14개 모두 정확히 7px 로 균일하다(ㅇ→ㅈ 포함).
넓어 보이는 것은 ㅇ·ㅈ 글자가 좌우로 여백이 많은 모양이라 생기는 착시. */
:is(.page-pres1form,.page-pres2form) #ajaxspdpage > table:last-of-type > tbody > tr > td:first-child{ width:500px !important; }
/* 36-b. 보험첩약 초성줄의 'ㅇ' 과 'ㅈ' 사이에 원본 마크업의 회원명 앞, ::after 는 뒤에 들어간다
-> "회원명"님 환영합니다. (요청: 쌍따옴표로 감싸고 마침표까지) */
body.nav-stuck .head_util_menu03 > b::before {
content: '"'; /* 쌍따옴표(요청대로 곧은 따옴표) */
}
body.nav-stuck .head_util_menu03 > b::after {
content: '"님 환영합니다.'; /* 닫는 쌍따옴표 + 인사말 + 마침표 */
}
/* 원본의 밑줄 제거( 의 UA 스타일 + b 에 걸릴 수 있는 밑줄까지) */
body.nav-stuck .head_util_menu03 > b,
body.nav-stuck .head_util_menu03 > b u {
text-decoration: none;
}
/* 스티키 바에는 '회원명님 환영합니다' 만 남긴다 -> span 은 전부 숨김.
- 일반회원의 '님 환영합니다' span : 위 ::after 와 중복
- 관리자/SMS 아이콘 span : 요청대로 스티키에서는 감춘다(2026-09-02)
- 'Your Point' span : 자리가 없다
셋 다 원래 헤더(스크롤 올림)에서는 그대로 보인다 - 숨김은 nav-stuck 에만 걸린다. */
body.nav-stuck .head_util_menu03 > span {
display: none;
}
/* =============================================================================
43. 주문하기 - 처방 목록 / 조제 설정 높이 통일 (695px)
-----------------------------------------------------------------------------
요청(2026-09-02): 두 카드 높이를 같게, 크기는 '조제 설정의 환제 높이'에 맞춘다.
실측(pres1form, 조제 설정 .order_select01 의 자연 높이):
탕제 257.2 / 캡슐제조 237.4 / 환제·수환·호환 502.9 / 환제·농축환 540.9 /
환제·밀환 654.9 / 환제·밀환+공진단(18mm) 702.4
처방 목록 .order_list01 은 레거시 height:477px + 테두리 2px = 479px 였다.
-> 기준을 환제(밀환) 상태의 654.9 로 잡아 655px 로 통일했다가,
요청(2026-09-03)으로 715px 로 키웠다가, 같은 날 46-d 에서 헤더 아래 여백을 20px 줄이면서
그만큼 낮춰 **695px** 이 최종값이다.
가장 큰 조합(환제·밀환+공진단)에서도 스크롤이 생기지 않는 높이다
(655px 는 그 상태에서 59px 부족했다: scrollHeight 649 vs clientHeight 590).
실측: 695px 에서 6개 상태(탕제/캡슐/수환/농축환/밀환/밀환+공진단) 전부 scrollHeight == clientHeight == 630.
box-sizing: .order_select01 은 이미 border-box 지만 .order_list01 은 content-box 라
(477 + 테두리 2 = 479) 같은 값을 줘도 2px 어긋난다. 둘 다 border-box 로 맞춘다.
16-11 에서 준 height:auto(캡슐일 때 아래가 비는 문제) 를 덮어쓰는 것이므로,
**탕제(257)·캡슐(237) 에서는 아래에 빈 공간이 생긴다** - 높이 통일의 대가다.
반대로 환제·밀환+공진단(702) 은 655 를 넘어서 (715 로 키운 지금은 넘지 않는다) 카드 밖으로 삐져나오지 않게
조제 설정에 세로 스크롤을 준다(그 한 조합에서만 생긴다).
처방 목록은 40 번에서 flex 컬럼 + #ajaxitemlist 가 남는 공간을 채우게 돼 있어
높이만 키우면 목록이 더 많이 보인다.
============================================================================= */
:is(.page-pres1form,.page-pres2form) .order_list01,
:is(.page-pres1form,.page-pres2form) .order_select01 {
box-sizing: border-box !important;
height: 754px !important; /* 2026-10-12: 695 -> 748. 53 탄자대 캡션으로 밀환+공진단 상태가 53px 넘어 스크롤이 생겨 그만큼 키움
2026-10-21: 748 -> 754. 53-c 일반 탄자대 캡션 위 여백(4 -> 10px)만큼 밀환+공진단 상태가 6px 넘어 키움 */
}
/* 카드 높이를 넘는 조합의 스크롤 처리는 46 번으로 옮겼다.
(695px 에서는 어떤 제형 조합도 넘지 않지만 안전장치로 스크롤 구조는 남겨둔다.)
(카드 전체를 스크롤시키면 스크롤바가 '조제 설정' 헤더까지 덮어 처방목록과 달라 보인다) */
:is(.page-pres1form,.page-pres2form) .order_select01 {
overflow: hidden !important;
}
/* =============================================================================
44. 하단 버튼 폭 - 바로 위 .filebox 두 카드에 맞춤
-----------------------------------------------------------------------------
요청(2026-09-03, 2차): 버튼을 바로 위 카드에 **딱 맞춘다**.
주문하기 : [보관함담기 + 나의비방으로 저장] = 왼쪽 카드(복용법·주의사항) 폭
[주문하기] = 오른쪽 카드(조제지시·전달사항) 폭
보험첩약 : [보관함담기] = 왼쪽 카드, [주문하기] = 오른쪽 카드 (버튼이 2개라 자연히 50/50)
마크업(tang/pres1form.asp 743~748):
.orderbox03 > ul.box02 > li > span.button > a (a 에 인라인 width:150px)
17-1 에서 ul 을 text-align:center + li 를 inline-block 으로 만들어 가운데 정렬했는데,
폭 비율을 주려면 flex 가 필요하므로 여기서 flex 로 바꾼다(가운데 정렬은 의미가 없어짐 -
세 버튼이 행 전체를 채우기 때문).
.filebox 는 17-2 에서 `flex:1 1 0` + `gap:16px` 이라 카드 한 장 폭 = **calc(50% - 8px)**.
버튼 사이 간격도 카드 사이와 같은 **16px**.
주문하기(3개): 왼쪽 카드 폭을 버튼 2개 + 그 사이 간격 16px 로 나눈다.
한 칸 = (calc(50% - 8px) - 16px) / 2 = **calc(25% - 12px)**
오른쪽 버튼 = 카드 한 장 = **calc(50% - 8px)**
합계 = (25%-12) + 16 + (25%-12) + 16 + (50%-8) = 100% -> 행을 정확히 채우고 카드와 좌우 끝이 맞는다.
보험첩약(2개): 버튼 1개 = 카드 1장 = **calc(50% - 8px)** (= 결과적으로 50/50).
a 의 인라인 width:150px 은 !important 로 덮어야 한다(인라인이 우선하므로).
※ 보험첩약(pres2form)은 '나의비방으로 저장' 이 주석 처리돼(pres2form.asp 835행)
**버튼이 2개**다. 그래서 비율 규칙만 페이지별로 따로 준다
(요청 2026-09-03: 보험첩약은 50 / 50). 간격 1개(16px)를 빼고 나누므로 calc(50% - 8px).
flex 컨테이너·버튼 채우기 규칙은 두 페이지 공용.
============================================================================= */
:is(.page-pres1form,.page-pres2form) .orderbox03 ul.box02 {
display: flex !important;
gap: 16px; /* = 바로 위 .filebox 의 카드 사이 간격(17-2) */
align-items: center;
}
:is(.page-pres1form,.page-pres2form) .orderbox03 ul.box02 li {
margin: 0 !important;
min-width: 0; /* flex 아이템 기본 min-width:auto 때문에 안 줄어드는 것 방지 */
}
/* 주문하기: 앞 2개가 왼쪽 카드(복용법)를 반씩, 마지막이 오른쪽 카드(조제지시) 폭 */
.page-pres1form .orderbox03 ul.box02 li:nth-child(1),
.page-pres1form .orderbox03 ul.box02 li:nth-child(2) { flex: 0 0 calc(25% - 12px); }
.page-pres1form .orderbox03 ul.box02 li:nth-child(3) { flex: 0 0 calc(50% - 8px); }
/* 보험첩약: 버튼 1개 = 카드 1장 */
.page-pres2form .orderbox03 ul.box02 li:nth-child(1),
.page-pres2form .orderbox03 ul.box02 li:nth-child(2) { flex: 0 0 calc(50% - 8px); }
/* span.button 과 a 를 칸 폭에 꽉 채운다 (.button 의 margin-right:4px 도 제거) */
:is(.page-pres1form,.page-pres2form) .orderbox03 ul.box02 li > span.button {
display: block;
width: 100%;
margin-right: 0;
}
:is(.page-pres1form,.page-pres2form) .orderbox03 ul.box02 li > span.button > a {
display: block !important;
width: 100% !important; /* 원본 인라인 width:150px 를 덮는다 */
box-sizing: border-box;
text-align: center;
}
/* =============================================================================
45. 섹션 사이 세로 여백을 16px 로 통일
-----------------------------------------------------------------------------
요청(2026-09-03): 처방목록↔가격목록, 가격목록↔복용법/조제지시, 복용법↔버튼 의
위아래 여백을 모두 같게. 기준은 **복용법·주의사항 / 조제지시·전달사항 두 카드의
좌우 간격 16px**(17-2 의 .filebox { gap:16px }).
구조: .orderbox02 안에 order_list01 / order_select01(둘 다 float) 다음으로
.orderbox03(빈 것, height:0) -> .orderbox05 -> .filebox -> .orderbox03(버튼)
이 모두 **형제로 들어있다**(닫는 태그가 없어 .orderbox02 의 자식이다).
실측한 변경 전 여백: 목록↔가격 **20px**, 가격↔복용법 16px, 복용법↔버튼 **22px**.
- 20px = .orderbox05 의 margin-top:20px (common_layout.css:424)
- 22px = .orderbox03 의 margin-top (17-1 의 6px 를 뒤 규칙이 덮은 값)
빈 .orderbox03(height:0) 은 자기 마진이 상쇄돼 눈에 보이는 여백을 만들지 않지만,
margin-top 을 16px 로 바꾸면 뒤 .orderbox05 의 마진과 상쇄되며 값이 커질 수 있으므로
**마진을 0 으로 명시**한다. 판별은 버튼 ul 유무로 한다(빈 쪽은 ul.box02 가 없다).
============================================================================= */
:is(.page-pres1form,.page-pres2form) .orderbox05 { margin-top: 16px !important; }
:is(.page-pres1form,.page-pres2form) .orderbox03 { margin-top: 16px !important; }
/* 내용이 없는 .orderbox03(height:0)은 여백을 만들지 않게 */
:is(.page-pres1form,.page-pres2form) .orderbox03:not(:has(ul.box02)) { margin: 0 !important; }
/* 45-b. 박스가 아니라 **보이는 테두리** 기준으로 맞춘다.
.orderbox05 는 height:99px 고정인데 안의 .paybox 는 104.2px 라 **아래로 5.2px 삐져나와**
있었다(실측). 그래서 박스 간격은 16px 인데 눈에 보이는 간격은 **10.8px** 였다.
-> height:auto 로 내용에 맞추고, .paybox 가 float 라 그냥 auto 면 높이가 0 이 되므로
flex 로 감싼다. flex 는 align-items:stretch 가 기본이라 덤으로 **6칸 높이가 같아져**
가격바 아래 테두리가 한 줄로 떨어진다(원래는 주문총액 칸만 1px 더 길었다).
폭·x 좌표는 인라인 width 그대로라 변하지 않는다(실측 확인). */
:is(.page-pres1form,.page-pres2form) .orderbox05 {
height: auto !important;
display: flex;
align-items: stretch;
}
:is(.page-pres1form,.page-pres2form) .orderbox05 > .paybox {
float: none !important;
flex: 0 0 auto;
}
/* =============================================================================
46. 조제 설정 스크롤을 처방 목록과 같은 구조로
-----------------------------------------------------------------------------
요청(2026-09-03): 처방목록처럼 조제 설정도 스크롤을 맞춰달라.
문제: 43 번에서 카드(.order_select01) 자체에 overflow-y:auto 를 줬더니
**스크롤바가 '● 조제 설정' 헤더까지 덮으며 카드 전체 높이를 지나갔다.**
처방목록은 40 번에서 카드가 flex 컬럼이고 ::before 헤더는 고정, 안쪽
#ajaxitemlist 만 스크롤이라 스크롤바가 목록 영역에만 있다.
조제 설정은 헤더 아래에 형제가 5개(ul.box02 x2 + layertangpart1/2/3)라
'스크롤 전용 자식' 이 없었다. 처음엔 layertangpart* 만 스크롤시켜 봤지만
**제형 선택/조제 용량이 고정으로 남아 스크롤이 '제환 선택'부터 시작**해 처방목록과 달랐다.
-> tang/pres1form.asp(411행) · tang/pres2form.asp(443행) 에 래퍼 한 겹을 넣었다:
... 기존 5개 형제 전부 ...
(원본 수정은 이 div 한 쌍뿐. 내부 마크업/스크립트는 그대로다)
카드 -> flex 컬럼 + overflow:hidden (처방목록과 동일)
::before -> flex:0 0 auto (헤더 고정)
.order_select01_body -> flex:1 1 auto; min-height:0; overflow-y:auto (여기만 스크롤)
스크롤바 모양(얇게·연하게)도 처방목록(31 번)과 같은 값으로 맞췄다.
※ 래퍼가 생기면서 .order_select01 > ul (20-f / 20-g) 이 직계가 아니게 되므로
.order_select01 .order_select01_body > ul 로 함께 고쳤다.
============================================================================= */
:is(.page-pres1form,.page-pres2form) .order_select01 {
display: flex !important;
flex-direction: column;
}
:is(.page-pres1form,.page-pres2form) .order_select01::before {
flex: 0 0 auto;
/* 18-1 이 준 헤더 아래 여백 12px 를 스크롤 영역의 padding-top 으로 옮긴다.
그래야 스크롤 시작 y 가 처방목록과 정확히 같아진다(둘 다 카드top + 46.2px).
여백 자체는 아래 padding-top 으로 유지되므로 보이는 간격은 그대로다. */
margin-bottom: 0 !important;
}
:is(.page-pres1form,.page-pres2form) .order_select01 > .order_select01_body {
flex: 1 1 auto;
min-height: 0;
padding-top: 12px; /* 헤더에서 옮겨온 여백 */
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: #d6d6d9 transparent;
}
:is(.page-pres1form,.page-pres2form) .order_select01 > .order_select01_body::-webkit-scrollbar { width: 8px; }
:is(.page-pres1form,.page-pres2form) .order_select01 > .order_select01_body::-webkit-scrollbar-track { background: transparent; border: 0; }
:is(.page-pres1form,.page-pres2form) .order_select01 > .order_select01_body::-webkit-scrollbar-thumb { background: #d6d6d9; border-radius: 99px; }
:is(.page-pres1form,.page-pres2form) .order_select01 > .order_select01_body::-webkit-scrollbar-thumb:hover { background: #b9b9bd; }
/* 46-b. 스크롤바 세로선을 처방목록과 같은 위치(카드 오른쪽 끝)로.
카드에 padding-right:20px 이 있어 스크롤 영역이 카드 오른쪽 끝에서 20px 안쪽에서 끝났다
-> 스크롤바가 카드 안쪽에 떠 있는 것처럼 보였다(처방목록은 카드 padding 0 이라 끝에 붙는다).
카드의 우패딩을 0 으로 옮기고 그 20px 를 스크롤 영역의 padding-right 로 준다.
결과: 스크롤 영역이 카드 테두리(1px)까지 꽉 차고 스크롤바는 카드 끝에 붙는다.
내용은 padding-right 20px 로 그대로 여백을 유지한다.
::before 헤더의 margin-right:-20px(18-1) 은 카드 우패딩을 덮으려던 것이라 함께 0 으로. */
:is(.page-pres1form,.page-pres2form) .order_select01 { padding-right: 0 !important; }
:is(.page-pres1form,.page-pres2form) .order_select01::before { margin-right: 0 !important; }
:is(.page-pres1form,.page-pres2form) .order_select01 > .order_select01_body { padding-right: 20px; }
/* 46-c. 처방 목록 스크롤 영역의 **아래 라인**을 조제 설정과 맞춘다.
조제 설정은 카드 padding-bottom:18px 라 스크롤 영역이 카드 아래 테두리에서 19px(18+1) 위에서
끝나는데, 처방 목록은 카드 padding 0 이라 1px(테두리)만 남고 끝까지 내려갔다.
-> 처방 목록 카드에 padding-bottom:18px. 40 번에서 카드가 flex 컬럼이고 #ajaxitemlist 가
flex:1 이라 목록 영역이 그만큼 줄어들 뿐 잘리지 않는다.
결과(실측): 두 카드의 스크롤 영역이 top 445 / bottom 1034.8, 안쪽 여백 46.2 / 19 / 1 / 1 로 동일. */
:is(.page-pres1form,.page-pres2form) .order_list01 { padding-bottom: 18px !important; }
/* 46-d. 조제 설정 제목 아래 첫 항목까지의 여백 축소 (38 -> 18px).
내역: 스크롤영역 padding-top 12 + 첫 ul.box02 의 인라인 margin-top 20 + li.text_bold 의 margin-top 6.
이 중 원본 인라인 20px 만 없앤다(나머지는 섹션 사이 리듬이라 유지).
줄인 20px 만큼 카드 높이도 715 -> 695px 로 낮췄다(43 번) - 그래도 스크롤은 생기지 않는다
(실측: 6개 제형 상태 전부 scrollHeight == clientHeight == 630). */
:is(.page-pres1form,.page-pres2form) .order_select01_body > ul.box02:first-child { margin-top: 0 !important; }
/* =============================================================================
47. 로그인 - 비밀번호 표시/숨김 토글
-----------------------------------------------------------------------------
요청(2026-09-04). member/loginform.asp 의 비밀번호 칸을 .lc-pw 로 감싸고
그 안에 눈 모양 버튼(button#pwtoggle)을 넣었다. 토글은 같은 파일의 togglepw().
- 기본은 **숨김**(input type=password), 누르면 표시(type=text) + 아이콘이 '눈 가림'으로 바뀜
- button type="button" 이라 폼이 제출되지 않는다(로그인은 loginnow() 링크)
- aria-pressed / aria-label 을 함께 갱신해 스크린리더에도 상태가 전달된다
아이콘은 외부 파일 없이 data URI SVG(획 색 #8a7f72)로 넣었다.
============================================================================= */
.page-loginform .lc-pw {
position: relative;
}
/* 아이콘이 글자를 덮지 않게 오른쪽 여백 확보 (기본 padding 11px 13px) */
.page-loginform .lc-pw .lc-inp {
padding-right: 44px;
}
.page-loginform .lc-pwtoggle {
position: absolute;
top: 50%;
right: 7px;
transform: translateY(-50%);
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent no-repeat center / 20px 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a7f72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
cursor: pointer;
opacity: .55;
transition: opacity .12s, background-color .12s;
}
.page-loginform .lc-pwtoggle:hover {
opacity: 1;
background-color: #f7f0e4;
}
.page-loginform .lc-pwtoggle:focus-visible {
outline: 2px solid #f2b503;
outline-offset: 2px;
opacity: 1;
}
/* 표시 중(on): 눈 가림 아이콘 */
.page-loginform .lc-pwtoggle.on {
opacity: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a5a2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
/* =============================================================================
48. 헤더 회원영역 - 시안 A '한 줄로 정돈'
-----------------------------------------------------------------------------
대상: 로그인 상태 헤더 오른쪽의 .head_util_menu03(회원명·관리자·SMS·포인트) 와
.head_util_menu02(정보수정·로그아웃). 원본 .asp 무수정, CSS 만.
고친 것 세 가지
(1) 세로 어긋남 - 두 블록이 각각 절대배치라 중심이 53.1 / 51.0 으로 2.1px 어긋나 있었다.
menu02 는 top:35 + 높이 32 라 중심이 51 로 고정이므로, menu03 을
top:51px + translateY(-50%) 로 바꿔 **내용 높이와 무관하게** 중심을 51 에 맞춘다.
(2) 2018년 GIF(18x11 admin.gif / 12x13 cpsms.gif) -> 인라인 SVG 라인 아이콘 20px.
img 를 content:url() 로 갈아끼우고 링크(a)를 30px 정사각 클릭영역으로 만든다.
웹폰트를 새로 물지 않으려고 아이콘 폰트 대신 data URI SVG 를 쓴다
(사이트에 @font-face 가 하나도 없다).
(3) 1px 회색 네모 두 개(80x30) -> 이어붙인 세그먼트 버튼. ul 이 테두리를 갖고
li 사이만 얇은 선. 아이콘(연필/로그아웃)을 ::before 로 붙인다.
회원명의 밑줄()은 링크가 아닌데 링크처럼 보여서 뺀다(굵기는 유지).
============================================================================= */
/* --- (1) 두 블록 세로 중심 맞춤 + 가로 간격 고정 --- */
.head_util_menu03 {
top: 51px; /* = menu02 의 세로 중심(35 + 32/2) */
transform: translateY(-50%);
/* 원본은 left:660px 고정이라 버튼이 넓어지면 간격이 8.6px 까지 좁아졌다(실측).
오른쪽 기준으로 바꿔 버튼 폭(181px) + 16px 을 항상 띄운다.
내용(회원명 길이·포인트 자릿수)이 늘면 왼쪽으로 자란다. */
left: auto;
/* 버튼 폭 181 + 보이는 간격 14 */
right: 195px;
display: flex;
align-items: center;
/* [간격 계산] 아이콘 링크는 30px 박스 안에 20px 글리프라 좌우로 '보이지 않는 5px'가 있다.
그래서 gap 을 그대로 쓰면 눈에 보이는 간격이 11 / 16 / 19px 로 제각각이 된다(실측).
보이는 간격을 전부 14px 로 맞추려면
이름-아이콘 : gap + 5 = 14 -> gap 9
아이콘-아이콘 : 안쪽gap + 10 = 14 -> 안쪽 4
아이콘-포인트 : 5 + gap + 포인트패딩 = 14 -> 패딩 0 */
gap: 9px;
white-space: nowrap;
}
/* 회원명: 밑줄 제거, 굵기 유지 */
.head_util_menu03 > b,
.head_util_menu03 > b u {
text-decoration: none;
color: #333;
}
/* 원본 span 의 밑줄이 아이콘 영역까지 그어지는 것 방지 */
.head_util_menu03 > span {
text-decoration: none !important;
padding-left: 0 !important;
display: inline-flex;
align-items: center;
gap: 4px; /* + 아이콘 박스 여백 5 x 2 = 보이는 14 */
}
/* --- (2) 관리자 / SMS 아이콘 --- */
.head_util_menu03 a:has(> img[src$="admin.gif"]),
.head_util_menu03 a:has(> img[src$="cpsms.gif"]) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
transition: background-color .12s;
}
.head_util_menu03 a:has(> img[src$="admin.gif"]):hover,
.head_util_menu03 a:has(> img[src$="cpsms.gif"]):hover {
background: #f7ede3;
}
.head_util_menu03 img[src$="admin.gif"] {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23b5560f' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.2-2.9 7.8-7 9-4.1-1.2-7-4.8-7-9V6z'/%3E%3Cpath d='M9.2 12.2l1.9 1.9 3.7-3.9'/%3E%3C/svg%3E");
width: 20px !important;
height: 20px !important;
vertical-align: middle;
}
.head_util_menu03 img[src$="cpsms.gif"] {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-3.8-.8L3 20.5l1.4-4.1A8.4 8.4 0 0 1 3.6 11.5 8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4z'/%3E%3C/svg%3E");
width: 20px !important;
height: 20px !important;
vertical-align: middle;
}
/* 포인트 앞 여백은 컨테이너 gap 9 + 아이콘 박스 여백 5 = 14 로 이미 맞으므로 0 */
.head_util_menu03 > span:last-of-type {
padding-left: 0 !important;
}
/* --- (3) 정보수정 / 로그아웃 = 세그먼트 버튼 --- */
.head_util_menu02 ul {
display: flex;
border: 1px solid #e0dbd3;
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.head_util_menu02 ul li {
float: none !important;
width: auto !important;
height: 30px !important;
line-height: 30px !important;
border: 0 !important;
text-align: center;
}
.head_util_menu02 ul li + li {
border-left: 1px solid #ede8e1 !important;
}
.head_util_menu02 ul li a.button_head_util {
display: inline-flex;
align-items: center;
gap: 5px;
height: 30px;
padding: 0 11px;
font-size: 12.5px;
font-weight: 600;
color: #4a443e;
text-decoration: none;
transition: background-color .12s, color .12s;
}
.head_util_menu02 ul li a.button_head_util:hover {
background: #faf6f0;
color: #8a5a2a;
}
/* 버튼 아이콘 - **nth-child 가 아니라 href 로 고른다.**
같은 .head_util_menu02 가 비로그인일 때는 로그인/회원가입이라,
first/last-child 로 붙이면 '로그인'에 연필, '회원가입'에 로그아웃 아이콘이 붙는다. */
.head_util_menu02 ul li a.button_head_util::before {
content: '';
width: 15px;
height: 15px;
flex: none;
/* 단축 background 를 쓰면 아래 규칙들의 background-image 를 none 으로 리셋해버린다
(게다가 이 선택자가 특이성이 더 높아 이긴다) -> 롱핸드로만 둔다. */
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* 정보수정 = 연필 */
.head_util_menu02 ul li a.button_head_util[href*="memform"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a837c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}
/* 로그아웃 = 나가기 화살표 */
.head_util_menu02 ul li a.button_head_util[href*="logout"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a837c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
}
/* 로그인 = 들어가기 화살표 (비로그인 상태) */
.head_util_menu02 ul li a.button_head_util[href*="loginform"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a837c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
}
/* 회원가입 = 사람 추가 (비로그인 상태) */
.head_util_menu02 ul li a.button_head_util[href*="regiform"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a837c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E");
}
/* =============================================================================
49. 보험첩약 - '복용 방법' 행 정렬을 '대상질환 선택' 행과 맞추고 폰트 한 단계 크게
-----------------------------------------------------------------------------
요청(2026-09-05). 보험첩약(/tang/pres2form.asp)에만 있는 행이다.
원인: 우패널 조제 설정의 한 행은 `` 안에 라벨 li(.text_bold)와 내용 li 가
**둘 다 float:left** 로 들어있고, 라벨 폭이 글자 수대로 shrink-to-fit 이다.
- '대상질환 선택'(6자) 라벨 = 127.4px -> 내용이 x=1022.9 에서 시작
- '복용 방법'(4자) 라벨 = 104.5px
게다가 '복용 방법' 내용("- 하루 [select] 회, [select] 에 복용하십시요.")은 float 의
shrink-to-fit 폭이 415px(=.box02 전체 폭)로 잡혀 라벨 옆에 못 들어가고 **다음 줄 맨 왼쪽**
으로 떨어졌다. 그래서 이 행만 내용이 카드 좌측 끝(895.5)에 붙어 보였다.
처리: '복용 방법' 은 라벨을 한 줄 전체(width:100%)로 써서 내용을 **다음 줄로 내리고**,
내려간 내용의 들여쓰기는 **padding-left:20px** 로 둔다(2026-09-05 사용자 지정).
마크업/핸들러 무수정.
(처음에는 '대상질환 선택' 내용과 같은 x 에 맞추려고 128px 을 줬으나, 사용자가 20px 로
바꿔달라고 해서 얕은 들여쓰기로 확정. 아래 :has(#sdisnm) 라벨 128px 고정은 그때 만든
정렬 기준선인데, 자연폭 127.4 -> 128 이라 시각 변화가 없어 그대로 둔다.)
(.box02 는 common_layout.css 396행에서 width:415px 고정이라 계산이 흔들리지 않는다.)
줄바꿈 정책(사용자 지정): **가로 스크롤 없이 넘치면 아래로 내린다.**
한 줄 전체 폭은 394.89px, 20px 들여쓰기 기준 가용폭은 415-20=395px 라 nowrap 으로
억지로 한 줄에 넣어봤지만 여유가 0.11px 뿐이라 실제 화면에서는 .box02(overflow:auto)에
가로 스크롤이 생기고 왼쪽 '- 하' 가 잘렸다. 그래서 nowrap 을 쓰지 않고 줄바꿈을 허용한다.
줄바꿈 지점은 아래 50번(패널 공통 keep-all)이 담당한다 -> '복용하십시요.' 가 통째로
다음 줄로 내려가고, 그 줄은 padding-left:20px 덕에 첫 줄 '- 하루' 와 같은 x 에서 시작한다.
ul.box02 의 overflow:auto 는 건드리지 않는다. 줄바꿈을 허용하는 한 가로 넘침이 없어
스크롤바가 생기지 않고, overflow:visible 로 바꾸면 float 이 안 감싸져 행 높이가 0 이 된다
(실측: 97.8px -> 0). 이건 실제로 밟았던 함정이다.
폰트: 행 텍스트 12.5 -> 13.5px, select 13 -> 14px (한 단계). select 높이는 32px 로 동일.
============================================================================= */
/* 정렬 기준선: '대상질환 선택' 라벨 칸을 128px 로 고정 -> 내용이 항상 x=1023.5 에서 시작 */
.page-pres2form .order_select01 ul.box02:has(#sdisnm) > li.text_bold {
width: 128px !important;
box-sizing: border-box;
}
/* '복용 방법': 라벨이 한 줄을 다 쓰게 해 내용을 다음 줄로 내린다 */
.page-pres2form .order_select01 ul.box02:has(#drinkmethod1) > li.text_bold {
width: 100% !important;
box-sizing: border-box;
}
/* 내려간 내용의 들여쓰기 = 20px (원본 인라인 padding-left:5px 를 덮어씀) */
.page-pres2form .order_select01 ul.box02:has(#drinkmethod1) > li.text_bold + li {
width: 100% !important;
padding-left: 20px !important;
box-sizing: border-box;
}
/* 폰트 한 단계 크게 (텍스트 12.5 -> 13.5, select 13 -> 14) */
.page-pres2form .order_select01 ul.box02:has(#drinkmethod1) li {
font-size: 13.5px !important;
}
.page-pres2form .order_select01 ul.box02:has(#drinkmethod1) select {
font-size: 14px !important;
}
/* =============================================================================
50. 보험첩약 조제 설정 패널 - 줄바꿈 규칙 통일 (단어 중간 끊김 금지 + 넘친 줄 정렬)
-----------------------------------------------------------------------------
요청(2026-09-05): "좌우 스크롤 없이 텍스트 아래로 내려가", "'입니다.' 도 맞춰줘,
일일이 이렇게 해야 하나" -> 행 하나씩이 아니라 이 패널 전체에 한 번에 적용한다.
원인: css/default.css 22행이 ul/li/div/span/p 에 **word-break:break-all** 을 걸어
한글이 단어 중간에서 쪼개진다. 그래서 넘칠 때
'- 하루 [3회] 회, [식전 30분] 에 복용하십' / '시요.'
'... 20첩 기준 42,110.00원' / '입니다.'
처럼 마지막 두어 글자만 떨어져 나갔다. break-all 은 상속이 아니라 요소마다 직접
걸려 있으므로 부모에만 주면 안 되고 같은 요소들을 다시 잡아야 한다.
처리
1) 패널 안 모든 요소를 keep-all 로 -> 띄어쓰기에서만 줄이 바뀐다.
끊을 수 없는 아주 긴 토큰만 overflow-wrap:break-word 로 예외 처리(가로 넘침 방지).
2) 약재비 안내문(#txtYakjae, getmaxprice.asp 가 채우는 영역)은 매달린 들여쓰기로
넘친 줄('입니다.')을 첫 줄 본문 시작선에 맞춘다.
실측: '*' span 은 인라인 padding-left:20px, 그 뒤 본문 '마' 시작 x = 31.19px
-> div 에 padding-left:31px 를 주고, 첫 줄의 '*' span 과 같은 div 안 대상질환
ul.box02 만 margin-left:-31px 로 빼낸다. (text-indent:-31px 는 안 먹는다 - 앞에
블록이 있어 본문이 익명 블록으로 들어가고 크롬이 거기엔 적용하지 않는다.)
가로 스크롤을 만들지 않는 것이 원칙이다. nowrap 으로 한 줄에 욱여넣는 방식은
.box02(overflow:auto) 에 스크롤바를 만들어 왼쪽 글자가 잘리므로 쓰지 않는다.
============================================================================= */
.page-pres2form .order_select01,
.page-pres2form .order_select01 :is(ul, li, div, span, p, label) {
word-break: keep-all !important;
overflow-wrap: break-word;
}
/* 약재비 안내문: 넘친 줄을 첫 줄 본문(31.19px)에 맞춘다 */
.page-pres2form #txtYakjae {
padding-left: 31px !important;
}
/* 첫 줄만 들여쓰기에서 빼서 '*' 를 제자리(20px)에 둔다.
text-indent:-31px 는 여기서 먹지 않는다 - 앞에 블록(ul.box02)이 있어 본문이 익명 블록에
들어가는데 크롬이 그 첫 줄에는 text-indent 를 적용하지 않는다(실측 확인). */
.page-pres2form #txtYakjae > span:first-of-type {
margin-left: -31px !important;
}
/* 같은 div 안 대상질환 ul.box02 는 원래 자리로 (이걸 빼면 31px 밀려 넘친다) */
.page-pres2form #txtYakjae > ul {
margin-left: -31px !important;
}
/* =============================================================================
51. 명인당이야기(/home/htmlpage.asp) - 이미지 본문을 텍스트로 전환
-----------------------------------------------------------------------------
요청(2026-09-05). 8개 페이지(pagecode 1111300 1111400 1411000 1411100 1411200
1411300 1411400 1411500)의 본문이 전부 900px JPG 한 장이었다. 글을 진짜 글자로
옮기고 사진/그래프만 잘라 남겼다. 시안 승인본대로 구현.
구조: htmlpage.asp 는 DB 의 textbody 를
.container_inner > .conbody > .board_01 > table.bbs_view03 > tbody > tr > td
안에 그대로 출력한다. 그래서 여기 스타일은 그 td 안에서 동작해야 한다.
본문 HTML 은 로 감싼다(DB 쪽).
주의 1. board.css 167행이 table 에 word-break:break-all 을 걸어 td 가 이를
상속한다 -> 한글이 단어 중간에서 쪼개진다. .story 에서 keep-all 로 되돌린다.
(49/50번 섹션에서 겪은 것과 같은 문제)
주의 2. board.css 325행 .bbs_view03 배경이 #eae9e9 회색이라 흰 지면으로 덮는다.
2026-09-05 추가: 고령 이용자가 많은 사이트라 본문 글자를 한 단계씩 키웠다.
본문 14.5 -> 16px, 1단 항목 14.5 -> 16, 2/3단 14 -> 15.5, 표 14 -> 15.5,
페이지 제목 30 -> 33, 소제목 17 -> 19, 원문 15.5 -> 17, 캡션/출처 12.5 -> 13.5.
기준 폰트도 15 -> 16.5px, line-height 1.8 -> 1.85.
2026-09-05 재조정: 페이지마다 글자 크기가 달라 보인다는 지적 -> **4단계로 고정**한다.
33px 페이지 제목(.story-title)
19px 소제목(.story-sec, .story-wonmun .wtitle)
16px 본문 전부 - p, 리드문, 1/2/3단 항목, 번호목록, 정의행, 표 th/td/caption,
한문 원문, 배너 부제. **본문급은 예외 없이 16px 이다.**
13.5px 보조 - 캡션, 출처, 원문 라벨, 인용 표기
본문이 문단인 페이지(한의원전경)와 목록인 페이지(참옻 문헌자료)의 크기가 각각
16 / 15.5 로 갈려 페이지마다 달라 보였던 것이 원인이다.
이때 잡은 것 2가지:
- .story-lead / .story-src 는
라서 .story p (특이도 0,1,1) 에 눌려 있었다.
.story p.story-lead 처럼 타입을 붙여야 먹는다.
- board.css 의 .bbs_view03 td{font-size:13px} 가 td 에 직접 걸려 있어
table 에서 물려받는 크기를 이긴다. .story table.tbl td 에 크기를 명시한다.
주의 3. 본문에 작은따옴표를 쓰지 않는다. vbfunction 의 comedb() 가 '' -> ' 로
되돌리기 때문에 저장/출력 왕복에서 깨질 수 있다.
============================================================================= */
/* 겉 테두리와 여백 제거 (2026-09-05 요청)
common_layout.css 의 .container_inner 가
width:1000px; margin:0 auto; padding:50px 50px 70px; border:1px solid #d8d8d8; overflow:hidden
이라 회색 사각 테두리와 50px 안쪽 여백이 둥근 카드를 한 겹 더 감싸고 있었다.
이 페이지에서만 지운다. overflow 는 visible 로 열어 카드 그림자가 잘리지 않게 한다.
(아래 푸터는 .footerwrap 이 위쪽 여백 80px 를 이미 갖고 있어 붙지 않는다) */
.page-htmlpage .container_inner{
border:0 !important;
padding:0 !important;
overflow:visible !important;
/* width:1000px 은 content-box 라 원래 바깥 크기가 1000+padding100+border2 = 1102px
(= .contans_Wrap 폭)이었다. 여백만 지우면 카드가 1000px 로 줄어 양옆이 비므로,
width:auto 로 바꿔 지운 여백만큼 내용이 넓어지게 한다 -> 카드 = 1102px. */
width:auto !important;
}
.page-htmlpage .board_01 > table.bbs_view03{ background:#fff !important; border:0 !important; width:100%; }
/* 바깥 껍데기 칸만 지운다. 자손 선택자로 쓰면 본문 안 표(.tbl)의 테두리까지 죽는다 */
.page-htmlpage .board_01 > table.bbs_view03 > tbody > tr > td{ padding:0 !important; border:0 !important; }
.story{
word-break: keep-all;
overflow-wrap: break-word;
color:#1b1613;
font-family:"Noto Sans KR","Malgun Gothic","맑은 고딕",sans-serif;
font-size:16px; line-height:1.85;
text-align:left;
/* 페이지 한 장을 둥근 종이로 (2026-09-05) */
border:1px solid #ece2d4;
border-radius:18px;
overflow:hidden; /* 배너 위쪽 모서리까지 깎이게 */
box-shadow:0 1px 2px rgba(90,60,20,.04), 0 18px 40px -30px rgba(90,60,20,.35);
}
.story *{ box-sizing:border-box; }
/* 상단 문양 띠 - 원본 이미지의 주황 띠를 CSS 로 */
.story-band{
padding:30px 40px 26px; color:#fff;
border-radius:17px 17px 0 0;
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.075) 0 1px, transparent 1px 22px),
repeating-linear-gradient(-45deg, rgba(255,255,255,.075) 0 1px, transparent 1px 22px),
linear-gradient(160deg,#d18f2e,#c07d20);
}
.story-band .bar{ display:block; width:26px; height:3px; background:#fff; border-radius:2px; margin-bottom:14px; opacity:.9; }
.story-band .t1{ font-size:23px; font-weight:900; letter-spacing:-.01em; margin:0; color:#fff; line-height:1.4; }
.story-band .t2{ font-size:16px; font-weight:500; margin:6px 0 0; color:#fff; opacity:.95; }
/* 배경 아트 - 한지(韓紙) 바탕 + 전통 마름모 문양 (2026-09-05, D안)
이미지 파일 없이 CSS 로만 그린다. 글 대비를 해치지 않는 세기로만 쓴다.
- 바탕: 따뜻한 종이색 #fdfaf4 + feTurbulence 노이즈를 회색이 아닌 갈색으로 착색(alpha .20)
+ 96도 방향 미세 결(한지 섬유)
- 문양: 상단 배너와 같은 45/-45도 마름모 격자를, 우측 상단에서 시작해 아래로 사라지게
mask 로 페이드. 긴 페이지에서는 아래쪽이 자연히 종이 바탕만 남는다.
- ::before 로 깔고 본문은 z-index:1 로 띄운다(문양이 글 위에 오지 않게).
다른 안으로 바꾸려면 이 블록만 교체하면 된다. */
.story-body{
position:relative;
padding:38px 40px 46px;
border-radius:0 0 17px 17px;
background-color:#fdfaf4;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.47 0 0 0 0 0.24 0 0 0 0.20 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E"),
repeating-linear-gradient(96deg, rgba(150,110,55,.03) 0 1px, transparent 1px 7px);
background-size:320px 320px, auto;
}
.story-body::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background-image:
repeating-linear-gradient(45deg, rgba(181,86,15,.15) 0 1px, transparent 1px 26px),
repeating-linear-gradient(-45deg, rgba(181,86,15,.15) 0 1px, transparent 1px 26px);
-webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, rgba(0,0,0,.42) 38%, transparent 72%);
mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, rgba(0,0,0,.42) 38%, transparent 72%);
}
.story-body > *{ position:relative; z-index:1; }
/* 제목 계층 */
.story-title{ font-size:33px; font-weight:700; color:#b5560f; margin:0 0 16px; letter-spacing:-.01em; line-height:1.35; }
.story-sec{ font-size:19px; font-weight:700; color:#b5560f; margin:36px 0 10px; }
.story-sec.crimson{ color:#8f2f2f; }
.story-body > .story-sec:first-child,
.story-body > .story-title:first-child{ margin-top:0; }
.story p.story-lead{ font-size:16px; font-weight:700; color:#8f2f2f; line-height:1.75; margin:0 0 20px; }
.story p{ margin:0 0 16px; font-size:16px; color:#463c34; }
.story b, .story strong{ font-weight:700; color:#1b1613; }
.story .em{ color:#b5560f; font-weight:700; }
.story .emc{ color:#8f2f2f; font-weight:700; }
.story .han{ font-weight:700; color:#1b1613; }
/* 계층 목록: 1단(·) / 2단(-) / 3단(:) */
.story ul.l1, .story ul.l2, .story ul.l3{ list-style:none; margin:0; padding:0; }
.story ul.l1{ margin:0 0 14px; }
.story ul.l1 > li{ position:relative; padding-left:17px; font-size:16px; font-weight:700; color:#1b1613; margin-bottom:6px; }
.story ul.l1 > li::before{ content:"·"; position:absolute; left:2px; color:#b5560f; font-weight:900; }
.story ul.l2{ margin:6px 0 14px; }
.story ul.l2 > li{ position:relative; padding-left:17px; font-size:16px; font-weight:400; color:#463c34; margin-bottom:6px; }
.story ul.l2 > li::before{ content:"\2013"; position:absolute; left:0; color:#877b71; }
.story ul.l3{ margin:4px 0 10px; }
.story ul.l3 > li{ position:relative; padding-left:17px; font-size:16px; color:#463c34; margin-bottom:5px; }
.story ul.l3 > li::before{ content:":"; position:absolute; left:3px; color:#877b71; }
.story ul.l1 ul.l2{ margin-top:6px; }
.story ul.l1 > li > .nb{ font-weight:400; color:#463c34; }
/* 번호 목록(문헌 인용 등) */
.story ol.num{ list-style:none; counter-reset:n; margin:6px 0 14px; padding:0; }
.story ol.num > li{ counter-increment:n; position:relative; padding-left:26px; font-size:16px; color:#463c34; margin-bottom:6px; }
.story ol.num > li::before{ content:counter(n) "."; position:absolute; left:0; color:#877b71; font-weight:500; }
/* 用語 정의행: 라벨 + 본문. 넘친 줄이 본문 시작선에 맞는다 */
.story .def{ display:grid; grid-template-columns:max-content 1fr; gap:0 10px; font-size:16px; color:#463c34; margin-bottom:14px; }
.story .def > .k{ font-weight:700; color:#1b1613; white-space:nowrap; }
.story .def > .v > p{ margin:0 0 5px; font-size:16px; }
.story .def > .v > p:last-child{ margin-bottom:0; }
/* 한문 원문 블록 */
.story-wonmun{
border:1px solid #e8ded1; border-left:3px solid #8f2f2f; border-radius:12px;
background:rgba(255,255,255,.55); padding:20px 24px; margin:14px 0 18px;
}
.story-wonmun .wlabel{ font-size:13.5px; font-weight:700; color:#8f2f2f; letter-spacing:.04em; margin-bottom:12px; }
.story-wonmun .wtitle{ font-size:19px; font-weight:700; color:#1b1613; margin-bottom:10px; }
.story-wonmun ul{ list-style:none; margin:0 0 14px; padding:0; }
.story-wonmun ul:last-of-type{ margin-bottom:0; }
.story-wonmun li{ font-size:16px; color:#8a4b23; line-height:2; }
.story-cite{ display:block; text-align:right; font-size:13.5px; color:#877b71; margin-top:12px; }
.story .ref{ color:#b5560f; font-weight:700; }
/* 그림 */
.story-figs{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; margin:22px 0 18px; }
.story-fig{ margin:22px 0 18px; width:max-content; max-width:100%; }
.story-figs .story-fig{ margin:0; }
.story-fig img{ display:block; max-width:100%; height:auto; border:1px solid #e8ded1; border-radius:12px; background:#fff; }
.story-fig figcaption, .story-cap{ font-size:13.5px; color:#877b71; margin-top:8px; }
/* 캘리그라피는 배경을 투명하게 만든 PNG 라 종이 위에 바로 얹힌다(테두리/판 없음).
mix-blend-mode 는 쓰지 않는다 - .story-body 가 쌓임 맥락을 만들어 종이색과 안 섞인다. */
.story-fig.plain img{ border:0; background:transparent; border-radius:0; }
/* 표 */
.story-tablewrap{ overflow-x:auto; margin:16px 0 8px; width:max-content; max-width:100%; }
.story-tablewrap:has(> table.tbl){ border:1px solid #e8ded1; border-radius:12px; overflow:hidden; background:#fff; }
.story-tablewrap:has(> table.tbl) .story-src{ padding:0 14px 10px; }
.story table.tbl{ border:0; }
.story table.tbl th:first-child{ border-left:0; }
.story table.tbl th:last-child, .story table.tbl td:last-child{ border-right:0; }
.story table.tbl thead th{ border-top:0; }
.story table.tbl tbody tr:last-child td{ border-bottom:0; }
.story table.tbl td:first-child{ border-left:0; }
.story-tablewrap .story-src{ margin:6px 0 0; }
.story table.tbl{ border-collapse:collapse; font-size:16px; min-width:460px; width:auto !important; }
/* board.css 167행이 table 에 width:100% 를 걸어 2열 표까지 늘어난다 -> 내용폭으로 */
/* default.css / board.css / reset.css 세 곳이 caption 을 통째로 숨긴다
(visibility:hidden; width:0; height:0; overflow:hidden; font:0/0). 하나하나 되돌려야 보인다. */
.story table.tbl caption{
caption-side:top; text-align:left; padding:11px 14px 9px;
visibility:visible; width:auto; height:auto; overflow:visible;
font:700 16px/1.6 "Noto Sans KR","Malgun Gothic","맑은 고딕",sans-serif;
color:#b5560f;
}
.story table.tbl th{ padding:10px 15px; border:1px solid #e8ded1; font-size:16px; font-weight:700; color:#1b1613; text-align:center; white-space:nowrap; }
.story table.tbl td{ padding:9px 15px; border:1px solid #e8ded1; font-size:16px; text-align:center; color:#463c34; font-variant-numeric:tabular-nums; white-space:nowrap; }
.story table.tbl td.k{ text-align:left; color:#1b1613; white-space:normal; }
.story table.tbl.red th{ background:#f2dede; }
.story table.tbl.gold th{ background:#fbeecd; }
.story p.story-src{ font-size:13.5px; color:#877b71; text-align:right; margin:6px 0 18px; }
.story-hr{ display:block !important; border:0; border-top:1px solid #e8ded1; margin:34px 0; clear:both; height:0; }
/* 사진을 흘려보낸(float) 뒤에 다음 단락이 겹치지 않게 */
.story-body::after{ content:""; display:block; clear:both; }
.story-title{ clear:both; }
@media (max-width:720px){
.story{ border-radius:14px; }
.story-band{ border-radius:13px 13px 0 0; }
.story-body{ border-radius:0 0 13px 13px; }
.story-body{ padding:26px 20px 32px; }
.story-band{ padding:24px 20px 20px; }
.story-band .t1{ font-size:20px; }
.story-title{ font-size:27px; }
.story .def{ grid-template-columns:1fr; gap:2px; }
}
/* =============================================================================
52. 대메뉴(GNB) - 지금 보고 있는 페이지의 메뉴 활성화 표시
-----------------------------------------------------------------------------
요청(2026-10-12): 현재 페이지가 어느 대메뉴에 속하는지 보이게 한다.
common/tps.asp 가 페이지 -> 메뉴 번호를 계산해 body 에 gnb-on-N 을 붙인다
(1 탕전 처방하기, 2 보험첩약, 3 공동조제, 4 처방보관함, 5 고객센터, 6 마이페이지,
7 명인당이야기). 활성 항목은 글자를 브랜드 주황(#b5560f)으로, li 아래에 3px 막대를 둔다.
마우스를 올렸을 때(원래 주황 배경 + 흰 글자)는 활성 항목도 원래 hover 그대로 보이게 한다.
============================================================================= */
body.gnb-on-1 #gnb > li:nth-child(1) > a,
body.gnb-on-2 #gnb > li:nth-child(2) > a,
body.gnb-on-3 #gnb > li:nth-child(3) > a,
body.gnb-on-4 #gnb > li:nth-child(4) > a,
body.gnb-on-5 #gnb > li:nth-child(5) > a,
body.gnb-on-6 #gnb > li:nth-child(6) > a,
body.gnb-on-7 #gnb > li:nth-child(7) > a {
color: #b5560f;
font-weight: 700;
}
body.gnb-on-1 #gnb > li:nth-child(1)::after,
body.gnb-on-2 #gnb > li:nth-child(2)::after,
body.gnb-on-3 #gnb > li:nth-child(3)::after,
body.gnb-on-4 #gnb > li:nth-child(4)::after,
body.gnb-on-5 #gnb > li:nth-child(5)::after,
body.gnb-on-6 #gnb > li:nth-child(6)::after,
body.gnb-on-7 #gnb > li:nth-child(7)::after {
content: "";
position: absolute;
left: 18%;
right: 18%;
bottom: 0;
height: 3px;
border-radius: 2px 2px 0 0;
background: #b5560f;
pointer-events: none;
}
body[class*="gnb-on-"] #gnb > li:hover > a {
color: #fff; /* hover 는 원래대로(common_layout.css:79) */
}
/* =============================================================================
53. 밀환 '환제 상세' - 일반 탄자대 / 공진단 탄자대 구분 표시
-----------------------------------------------------------------------------
요청(2026-10-12): 16/17/18㎜ 가 두 줄인데 '공진단' 글자가 18㎜ 에만 붙어 있어
일반 18㎜ 를 공진단으로, 공진단 16/17㎜ 를 일반으로 오해할 수 있다.
저장값은 원래 구분된다(일반 16/17/18, 공진단 26/27/28 - 가격·관리자 표시도 별도).
pres1form/pres2form.asp 에서 각 줄 위에 p.tjd-cap 캡션을 넣고 '18㎜← 공진단' 을 '18㎜' 로,
빠져 있던 공진단 17㎜ 의 을 보충했다(그래서 17㎜ 만 파랗게 보이던 것도 사라짐).
칩 줄 폭이 242px 라 캡션을 옆에 두면 줄바꿈되므로 줄 위에 작게 단다.
============================================================================= */
:is(.page-pres1form,.page-pres2form) .tjd-cap {
margin: 4px 0 4px 2px;
font-size: 12px;
font-weight: 600;
line-height: 16px;
color: #7a7a7a;
}
:is(.page-pres1form,.page-pres2form) .tjd-cap-gong {
margin-top: 10px;
color: #b5560f; /* 공진단 줄은 브랜드 주황으로 구분 */
}
/* 53-c (2026-10-21) 일반 탄자대는 16~18㎜ 다 → '일반 탄자대' 캡션을 다시 16~18㎜ 줄(#layertangpart26) 바로 위로 옮김.
(53-b, 10-13 에 4·5㎜ 줄 위로 올렸던 것을 되돌림. 화면: 4·5㎜ → 일반 탄자대 16·17·18㎜ → 공진단 탄자대 16·17·18㎜)
캡션이 #layertangpart26 안에 있어 밀환일 때만 보이므로 53-b 의 :has() 표시 규칙은 필요 없다.
4·5㎜ 줄과 떨어뜨려 아래 줄 이름표로 읽히게 공진단 캡션과 같은 위쪽 여백을 준다. */
:is(.page-pres1form,.page-pres2form) .tjd-cap-mil { margin-top: 10px; }