) 탭이 그 아래로 밀리는 게 아니라 겹쳐 있었다 — 마진을 아무리 키워도 float 시작점부터 재기 때문에 화면에서는 간격이 0 이었다. clear:both 로 float 아래에 세우고, 간격은 padding 으로 준다. clear 를 걸면 생기는 clearance 가 margin-top 을 통째로 먹어 버려 마진은 못 쓴다. ※ 간격을 바꾸려면 아래 50px 하나만 고치면 된다. */ body.dv_new .dv_nav--inline{margin:0;padding:50px 0 0;clear:both;border-bottom:0} body.dv_new .dv_nav--inline .dv_nav_in{ width:100%;border:1px solid #e0e3e8;border-radius:8px;overflow:hidden; } body.dv_new .dv_nav--inline a{padding:19px 4px;font-size:19px;line-height:1.3;margin-bottom:0} /* 지금 보고 있는 칸만 색으로 채운다. 밑줄만으로는 한 칸 건너에서 잘 안 잡혔다 */ body.dv_new .dv_nav--inline a.on, body.dv_new .dv_nav--inline a.on:hover{ background:#0fb598;color:#fff;font-family:NotoKR-Bold;border-bottom-color:transparent; } /* 칸 사이 세로줄. 상자 테두리에 닿지 않게 위아래를 12px 씩 띄운다 — 위까지 그으면 테두리와 만나 격자처럼 보이고, 짧게 끊으면 칸만 갈린다. */ body.dv_new .dv_nav--inline a + a:before{ content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:#e0e3e8; } /* 채운 칸의 좌우 세로줄은 지운다 — 색 위에 선이 걸치면 지저분하다 */ body.dv_new .dv_nav--inline a.on:before, body.dv_new .dv_nav--inline a.on + a:before{display:none} /* 따라다니는 쪽 — 아래 문의바와 한 덩어리라 한 단계 작게. 접었다 펴는 것은 높이로 한다. display:none 으로 껐다 켜면 툭 튄다. */ /* [2026-09] 흰 바탕에 흰 문의바가 붙어 있어 두 줄이 한 덩어리로 뭉개져 보였다. 탭 줄만 옅은 회색을 깔아 문의바와 갈라 놓고, 지금 보는 탭은 흰 알약으로 띄운다 — 회색 바닥 위에 흰 조각이 떠 있어 어디를 보고 있는지 바로 잡힌다. */ body.dv_new .dv_nav--fixed{ max-height:0;opacity:0;overflow:hidden; transition:max-height .22s ease, opacity .22s ease; } body.dv_new .dv_nav--fixed.on_show{max-height:60px;opacity:1;border-bottom:1px solid #eef0f3} body.dv_new .dv_nav--fixed .dv_nav_in{width:1280px;margin:0 auto} body.dv_new .dv_nav--fixed a{padding:12px 4px;font-size:17px;line-height:1.3} /* 화면 위쪽을 가리는 것이 없으니, 섹션을 앵커로 이동할 때 천장에 딱 붙지만 않을 만큼만 띄운다. [2026-09] 위쪽 여백을 46 -> 70px. 예전에는 섹션마다 탭 메뉴가 한 벌씩 복제돼 있어서 그게 구분선 노릇을 했는데, 그걸 감추면서 일정표·골프장·호텔이 경계 없이 이어져 버렸다. 여백과 아래 제목으로 다시 끊어 준다. */ body.dv_new .tab{scroll-margin-top:20px;padding-top:70px;float:none;width:100%;clear:both} /* 섹션 제목 — 지금 어느 대목을 읽고 있는지 알려주는 유일한 표시다. 밑줄·여백은 감싸는 .dv_sec_hd 가 맡는다 (골프장·호텔에만 선이 붙는다). */ body.dv_new .dv_sec_h{ margin:0;padding:0; font-family:NotoKR-Bold;font-size:30px;line-height:1.3;color:#111;letter-spacing:-1px; } /* --------------------------------------------------------------- * 4. 섹션 제목 * --------------------------------------------------------------- */ body.dv_new .dv_h3{ font-family:NotoKR-Bold;font-size:26px;line-height:1.4;color:#111;letter-spacing:-0.8px; margin:0 0 20px;padding:0; } /* --------------------------------------------------------------- * 5. 포함 / 불포함 / 참고사항 * --------------------------------------------------------------- */ /* 원래 항목명이 GIF 이미지(ict_option01.gif = 포함내역)였다. 확대하면 깨지고 검색에도 안 잡혀 텍스트로 바꾼다. */ body.dv_new .tbl_option{float:none;border-top:2px solid #222;margin:0 0 10px} /* 항목 이름 칸(포함내역·불포함내역·상품소개영상·참고사항)에 옅은 회색을 깐다. 왼쪽 여백을 4px 에서 20px 로 넓힌 것은 색을 깔면서 필요해진 것이다 — 4px 이면 글자가 회색 칸의 왼쪽 끝에 바짝 붙어 칸 밖으로 새는 것처럼 보인다. 내용 칸도 같은 이유로 왼쪽을 띄워 회색 칸에서 떼어 놓는다. */ body.dv_new .tbl_option tr th{ padding:22px 20px;vertical-align:top;border-bottom:1px solid #e5e8ec; background:#f7f8fa; font-family:NotoKR-Bold;font-size:19px;line-height:1.5;color:#111;letter-spacing:-0.5px;text-align:left; } body.dv_new .tbl_option tr td{ padding:22px 20px;border-bottom:1px solid #e5e8ec; font-size:18px;line-height:1.8;color:#333; } /* 항목명 앞 아이콘 — 포함(청록 ○) / 불포함(빨강 ✕) / 선택(노랑 ✓). 요금 오해가 가장 잦은 자리라, 글자를 읽기 전에 색과 모양으로 먼저 갈리게 한다. 아이콘은 장식이 아니라 뜻을 담고 있지만, 옆 글자가 같은 뜻을 이미 말하고 있어 화면낭독기에는 aria-hidden 으로 빼 둔다(두 번 읽히지 않게). */ body.dv_new .dv_opt_th{display:flex;align-items:center;gap:10px} body.dv_new .dv_opt_ico{flex:0 0 auto;display:block;line-height:0} body.dv_new .dv_opt_ico svg{width:24px;height:24px;display:block} body.dv_new .dv_opt_ico--inc{color:#0fb598} /* 페이지 강조색 */ body.dv_new .dv_opt_ico--exc{color:#d94a44} /* 가격에 쓰는 빨강 */ /* 노랑 계열. 순수 노랑(#ffd400)은 흰 바탕에서 선이 거의 안 보여 한 단계 내린 값이다 */ body.dv_new .dv_opt_ico--opt{color:#ffb000} /* --------------------------------------------------------------- * 6. 여행 전 참고사항 (아코디언 카드) * --------------------------------------------------------------- */ body.dv_new .dv_notice{width:100%;float:none;clear:both} body.dv_new .dv_notice_grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0;padding:0;list-style:none; } body.dv_new .dv_notice_item{margin:0;padding:0;list-style:none} body.dv_new .dv_notice_btn{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; width:100%;box-sizing:border-box;min-height:118px;padding:22px 14px; border:1px solid #e0e3e8;border-radius:12px;background:#fff;cursor:pointer; font-family:NotoKR-Medium;font-size:18px;line-height:1.4;color:#222;letter-spacing:-0.5px;text-align:center; text-decoration:none;transition:border-color .15s,background .15s; } body.dv_new .dv_notice_btn:hover, body.dv_new a.dv_notice_btn:hover{border-color:#0fb598;background:#f6fdfb;color:#0b8f78;text-decoration:none} body.dv_new .dv_notice_btn.on{border-color:#0fb598;background:#f6fdfb;color:#0b8f78;font-family:NotoKR-Bold} body.dv_new .dv_notice_btn svg{width:34px;height:34px;flex:0 0 auto;color:#0fb598} /* 첫 화면에서는 접혀 있다 — 카드를 눌러야 펼쳐진다. 버튼은 꺼져 있는데 내용만 펼쳐져 있으면 어느 카드를 보고 있는지가 사라진다. 켜짐 표시(.on)와 펼침 상태를 늘 같이 간다(inc_dv_notice.php 의 스크립트). 상자는 흰 바탕에 옅은 회색 선 — 청록 테두리 + 옅은 청록 바탕은 카드(버튼)와 같은 색이라 어디까지가 누르는 자리이고 어디부터가 내용인지 흐렸다. */ body.dv_new .dv_notice_body{ display:none; margin:14px 0 0;padding:26px 28px; border:1px solid #e8ebee;border-radius:12px;background:#ffffff; font-size:18px;line-height:1.85;color:#333; } body.dv_new .dv_notice_body a{color:#0b8f78;text-decoration:underline} /* --------------------------------------------------------------- * 7. 일정표 / 골프장 / 호텔 / 환불규정 본문 * --------------------------------------------------------------- */ body.dv_new .pop_cts{float:none;font-size:18px;line-height:1.85;color:#333;border-bottom:0;padding-bottom:0} body.dv_new .pop_cts img{max-width:100%;height:auto} body.dv_new .pop_img img{max-width:100%;height:auto} body.dv_new .cc_imggr img{max-width:100%;height:auto} body.dv_new .item_golf_title{ float:none;margin:34px 0 16px; font-family:NotoKR-Bold;font-size:24px;line-height:1.4;color:#111;font-weight:normal;letter-spacing:-0.8px; } body.dv_new .etc_txt{float:none;font-size:18px;line-height:1.85;color:#333} body.dv_new .bnr_check{float:none;margin:34px 0 0} /* 하단 버튼 묶음 */ body.dv_new .cts_group > .detail_btn{ float:none;clear:both;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:50px 0 0;text-align:center; } body.dv_new .dv_btn{ display:inline-block;box-sizing:border-box;min-width:220px;padding:18px 28px; border:1px solid #cfd4da;border-radius:10px;background:#fff; font-family:NotoKR-Medium;font-size:19px;line-height:1.2;color:#333;text-decoration:none; } body.dv_new .dv_btn:hover{border-color:#0fb598;color:#0b8f78;text-decoration:none} body.dv_new .dv_btn--primary{background:#0fb598;border-color:#0fb598;color:#fff;font-family:NotoKR-Bold} body.dv_new .dv_btn--primary:hover{background:#0ba088;border-color:#0ba088;color:#fff} /* --------------------------------------------------------------- * 8. 하단 고정 문의 바 * --------------------------------------------------------------- */ /* 스크롤을 내리면 문의 버튼이 화면에서 사라지던 문제. 가격과 버튼을 계속 붙여둔다. */ body.dv_new .dv_fixbar{ position:fixed;left:0;right:0;bottom:0;z-index:98; background:#fff;border-top:1px solid #dfe3e8;box-shadow:0 -3px 14px rgba(0,0,0,0.08); } body.dv_new .dv_fixbar_in{ width:1280px;margin:0 auto; display:flex;align-items:center;gap:10px; padding:14px 0; } body.dv_new .dv_fixbar_price{flex:1 1 auto;min-width:0} body.dv_new .dv_fixbar_name{ font-family:NotoKR-Medium;font-size:16px;line-height:1.4;color:#6b7684; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } body.dv_new .dv_fixbar_won{ font-family:NotoKR-Bold;font-size:26px;line-height:1.3;color:#d94a44;letter-spacing:-0.5px; } body.dv_new .dv_fixbar_won span{font-size:17px;color:#555;font-family:NotoKR-Medium} /* 문의 버튼 3개. 선택자를 .dv_fixbar 가 아니라 .dv_fixbar_in 으로 한정한다 — 바로가기 탭(.dv_nav)도 .dv_fixbar 안에 들어 있어서, .dv_fixbar a 로 두면 탭 링크까지 이 버튼 모양(padding 17px, 20px 볼드)을 뒤집어쓴다. 특정도가 .dv_nav a 와 같아서 뒤에 오는 이쪽이 이긴다. */ body.dv_new .dv_fixbar_in a{ display:inline-flex;align-items:center;justify-content:center;gap:8px; box-sizing:border-box;min-width:190px;padding:17px 26px;border-radius:10px; font-family:NotoKR-Bold;font-size:20px;line-height:1.2;text-decoration:none; } body.dv_new .dv_fixbar .dv_fixbar_tel{background:#f4f5f7;color:#222} body.dv_new .dv_fixbar .dv_fixbar_tel:hover{background:#e8eaee;text-decoration:none} body.dv_new .dv_fixbar .dv_fixbar_kakao{background:#FEE500;color:#3C1E1E} body.dv_new .dv_fixbar .dv_fixbar_kakao:hover{background:#f2d900;text-decoration:none} body.dv_new .dv_fixbar .dv_fixbar_req{background:#0fb598;color:#fff} body.dv_new .dv_fixbar .dv_fixbar_req:hover{background:#0ba088;color:#fff;text-decoration:none} /* 고정 바에 본문 끝이 가리지 않게 — 바로가기 탭 + 문의바를 합친 높이만큼 */ body.dv_new #wrap{padding-bottom:var(--dv-bars-h)} /* 우측 떠 있는 퀵메뉴(kakao.html)를 두 바 위로 올린다 */ body.dv_new .quickmenu{bottom:calc(var(--dv-bars-h) + 20px)} /* --------------------------------------------------------------- * 9. 공유하기 — 버튼 아래에 붙는 작은 목록 * --------------------------------------------------------------- */ /* 화면 한가운데 모달을 띄우면 주소 하나 복사하는 데 화면 전체가 가려진다. 누른 버튼 바로 아래에 필요한 만큼만 펼친다. */ body.dv_new .dv_share_wrap{position:relative} body.dv_new .dv_sharemenu{ display:none; position:absolute;top:calc(100% + 8px);right:0;z-index:60; min-width:196px;padding:8px; background:#fff;border:1px solid #e0e3e8;border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.14); } body.dv_new .dv_sharemenu.on{display:block} body.dv_new .dv_sharemenu_item{ display:flex;align-items:center;gap:12px; width:100%;box-sizing:border-box;padding:12px 12px; border:0;border-radius:8px;background:none;cursor:pointer; font-family:NotoKR-Medium;font-size:17px;line-height:1.3;color:#222;letter-spacing:-0.5px; text-align:left;white-space:nowrap; } body.dv_new .dv_sharemenu_item:hover{background:#f4f5f7} body.dv_new .dv_sharemenu_item img{width:30px;height:30px;flex:0 0 auto;object-fit:contain;display:block} /* --------------------------------------------------------------- * 10. 일정 요약표 * --------------------------------------------------------------- */ /* 상단 요약(사진·가격) 바로 아래 자리 */ body.dv_new .dv_summary{width:100%;float:none;clear:both;margin:40px 0 0} /* 카드 하나하나가 떨어져 있는 형태. 테두리·모서리·아이콘 규격을 아래 "여행 전 참고사항"(.dv_notice_btn)과 똑같이 맞춰 한 벌로 읽히게 한다. 회색으로 채운 알약이 아니라 흰 바탕에 얇은 테두리다 — 채우면 덩어리로 뭉쳐 보이고, 시니어 화면에서는 글자와 배경의 대비도 흰 바탕이 가장 세다. */ body.dv_new .dv_sum_stats{ display:flex;flex-wrap:wrap;gap:14px;margin:0 0 40px;padding:0;list-style:none; } body.dv_new .dv_sum_stats li{ flex:1 1 0;min-width:0;margin:0;padding:24px 14px;float:none;list-style:none;box-sizing:border-box; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; border:1px solid #e0e3e8;border-radius:12px;background:#fff;text-align:center; } body.dv_new .dv_sum_ico{display:block;color:#0fb598;line-height:0} body.dv_new .dv_sum_ico svg{width:32px;height:32px;display:block} body.dv_new .dv_sum_v{ display:block;font-family:NotoKR-Bold;font-size:26px;line-height:1.3;color:#111;letter-spacing:-1px; } /* "일정에 따라 상이" 처럼 숫자가 아닌 값이 들어가면 26px 로는 칸을 넘는다 */ body.dv_new .dv_sum_stats li .dv_sum_v{word-break:keep-all} body.dv_new .dv_sum_l{ display:block;font-family:NotoKR-Medium;font-size:16px;line-height:1.4;color:#6b7684; } body.dv_new .dv_sum_tbl{width:100%;border-top:2px solid #222;border-collapse:collapse} body.dv_new .dv_sum_tbl caption{display:none} /* 이름 칸은 아래 참고사항 표(.tbl_option)와 같은 규격 — 옅은 회색 바탕에 좌우 20px. 두 표가 같은 페이지에 있어 서로 다르게 생기면 다른 종류의 표로 읽힌다. 숫자 카드(.dv_sum_stats)는 흰 바탕 그대로 둔다 — 표가 아니라 카드다. */ body.dv_new .dv_sum_tbl th{ padding:20px;vertical-align:top;text-align:left;border-bottom:1px solid #e5e8ec; background:#f7f8fa; font-family:NotoKR-Bold;font-size:19px;line-height:1.5;color:#111;letter-spacing:-0.5px; } body.dv_new .dv_sum_tbl td{ padding:20px;border-bottom:1px solid #e5e8ec; font-size:18px;line-height:1.7;color:#333;word-break:keep-all; } /* 골프장·숙소·관광지는 한 줄에 하나씩 */ body.dv_new .dv_sum_list{margin:0;padding:0;list-style:none} body.dv_new .dv_sum_list li{ margin:0;padding:0 0 0 16px;float:none;list-style:none;position:relative; font-size:18px;line-height:1.7;color:#333; } body.dv_new .dv_sum_list li + li{margin-top:8px} /* 앞에 작은 점 하나. 별표(★)로 시작하는 이름이 많아 글머리 기호는 눈에 안 띄게 둔다 */ body.dv_new .dv_sum_list li:before{ content:"";position:absolute;left:2px;top:12px; width:5px;height:5px;border-radius:50%;background:#c4cbd3; } body.dv_new .dv_sum_note{margin:16px 0 0;font-size:16px;line-height:1.6;color:#6b7684} /* --------------------------------------------------------------- * 10. 골프장 / 호텔 소개 카드 (inc_dv_place_card.php) * * 종전에는 이름 + 설명 + 세로로 쌓인 사진 4장이 전부였다. * 큰 사진 한 장 + 옆에 세로 썸네일로 바꾸고, 그 아래 주소·홀수·이동시간을 * 표로 붙인다. 상담에서 제일 많이 나오는 질문이 그 표에 다 들어 있다. * --------------------------------------------------------------- */ /* 본문 폭(1280)을 다 쓰지 않고 1000px 로 좁혀 가운데 정렬한다. 1280 을 꽉 채우면 사진도 글도 화면 양 끝까지 뻗어서 읽는 줄이 너무 길어진다. 좌우에 각각 140px 씩 여백이 생겨 한 덩어리로 모여 보인다. */ body.dv_new .dv_place{max-width:1000px;margin:0 auto} /* 골프장이 여러 곳이면 확실히 끊어 준다. 안 그러면 어디까지가 한 골프장인지 안 보인다 */ body.dv_new .dv_place + .dv_place{margin-top:54px;padding-top:54px;border-top:1px solid #e5e8ec} /* 이름 줄 : 로고 + 이름 (+ 사진이 없을 때만 지도버튼) */ body.dv_new .dv_place_hd{display:flex;align-items:center;gap:12px;margin:0 0 18px} /* 로고 — 이름 옆에 나란히 두면 글자에 딱 붙어 이름의 일부처럼 읽힌다. 사진 왼쪽 위에 흰 판으로 얹어(오른쪽 위 지도 버튼과 짝) 이름에서 떼어 놓는다. 골프장 로고는 배경이 흰 PNG 가 많아 사진 위에 그냥 올리면 잘 안 보인다. */ body.dv_new .dv_place_logo{ position:absolute;left:14px;top:14px;z-index:2; display:flex;align-items:center;justify-content:center; width:52px;height:52px;box-sizing:border-box;padding:5px; border-radius:10px;background:rgba(255,255,255,.94); box-shadow:0 2px 8px rgba(0,0,0,.18);line-height:0; } body.dv_new .dv_place_logo img{width:100%;height:100%;object-fit:contain;display:block} /* 사진이 없는 곳 — 얹을 데가 없으니 이름 위에 한 줄로 따로 둔다 */ body.dv_new .dv_place_logorow{margin:0 0 14px;line-height:0} body.dv_new .dv_place_logorow .dv_place_logo{ position:static;box-shadow:none;background:none;padding:0;border-radius:0; width:52px;height:52px; } /* 이름은 늘 두 줄이다 — 윗줄 한글명, 아랫줄 괄호 안 영문명. 영문명이 없는 곳도 아랫줄 자리를 비워 둔다(min-height). 그래야 카드가 가로로 나란히 설 때 사진 시작 높이가 서로 어긋나지 않는다. */ body.dv_new .dv_place_name{ flex:1 1 auto;min-width:0;margin:0;padding:0; font-family:NotoKR-Bold;font-size:26px;line-height:1.35;color:#111;letter-spacing:-0.8px; word-break:keep-all; } body.dv_new .dv_place_name_main{display:block} body.dv_new .dv_place_name_sub{ display:block;min-height:1.5em; font-family:NotoKR-Medium;font-size:16px;line-height:1.5;color:#6b7684;letter-spacing:-0.3px; word-break:break-word; } /* 지도 버튼 — 목록 카드의 태그 칩(sublist_grid.css 의 .pcard_tags span)과 같은 사각 형태다. 둥근 알약이던 때는 사진 위에 같이 얹히는 다른 조각(로고 판 10px, 사진 장수)과 모서리가 달라 저 혼자 다른 부품처럼 떠 보였다. 목록 → 상세로 넘어와도 같은 칩이 보인다. */ body.dv_new a.dv_place_map{ flex:0 0 auto;display:inline-flex;align-items:center;gap:5px; padding:4px 12px;border:0;border-radius:6px;background:#f1f3f5; font-family:NotoKR-Bold;font-size:15px;line-height:1.5;color:#000;text-decoration:none; } body.dv_new a.dv_place_map:hover{background:#e4e8ec;color:#000;text-decoration:none} body.dv_new .dv_place_map svg{width:17px;height:17px;flex:0 0 auto;color:#0fb598} /* 사진이 있으면 큰 사진 위 오른쪽에 얹는다 — 바탕은 목록 카드 태그와 같은 반투명 흰색 */ body.dv_new .dv_gal_main a.dv_place_map{ position:absolute;right:14px;top:14px;z-index:3; background:rgba(255,255,255,.8);box-shadow:0 2px 8px rgba(0,0,0,.18); } body.dv_new .dv_gal_main a.dv_place_map:hover{background:rgba(255,255,255,.95)} /* ---- 사진 : [큰 사진 7][썸네일 3] ---- 높이 420px 은 큰 사진 칸(1000px 의 70% = 약 689px)이 등록 사진 비율(1000x600)과 거의 같아지도록 잡은 값이다. 이 높이에서 사진 좌우 여백이 사실상 사라진다. */ body.dv_new .dv_place_gal{display:flex;gap:16px;height:420px;margin:0 0 30px} body.dv_new .dv_gal_strip{flex:3 1 0;display:flex;flex-direction:column;gap:6px;min-height:0;min-width:0} /* 사진이 한 장이면 썸네일 줄이 없으니 큰 사진이 폭을 다 쓴다 */ body.dv_new .dv_place_gal--one{gap:0} /* ---- 사진 슬라이드 : 곳이 한 군데뿐일 때 (inc_dv_place_card.php 의 $_banner) ---- 카드가 .dv_places 상자를 통째로 쓰는 폭(약 1270px)에서는 [큰 사진 7 : 썸네일 3] 으로 나눌 이유가 없다 — 썸네일 칸만 380px 가까이 되어 사진 고르는 줄이 사진만 해진다. 대신 같은 크기 사진을 두 장씩 늘어놓고 좌우로 밀어 넘긴다. 한 장이 폭을 다 채우면 "사진이 더 있다"가 안 보여서 넘겨 볼 생각을 안 한다. 두 장이면 한 장 크기(약 630x378)도 종전 큰 사진(689x420)과 거의 같다. ※ 한 화면에 세 장을 보이려면 --dv-gal-per 만 3 으로 바꾼다. 넘김 폭은 JS 가 실제 사진 폭을 재서 따라가므로 여기 한 곳만 고치면 된다(장수를 두 군데 적어 두면 언젠가 한쪽만 고쳐져 어긋난다). ※ 사진 비율(5:3)은 등록 사진 원본(1000x600)과 같다 — 잘리는 데 없이 다 보인다. */ body.dv_new .dv_place_gal--banner{--dv-gal-per:2;--dv-gal-gap:16px;display:block;height:auto} /* 사진마다 따로 둥근 모서리를 주므로 바깥 상자의 모서리·바탕은 푼다 */ body.dv_new .dv_place_gal--banner .dv_gal_main{ width:100%;height:auto;background:none;border-radius:0;overflow:visible; } /* 넘김은 transform 이 아니라 가로 스크롤 + 스냅 — .dv_places 와 같은 방식이다 */ body.dv_new .dv_gal_slides{ display:flex;gap:var(--dv-gal-gap); overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none; } body.dv_new .dv_gal_slides::-webkit-scrollbar{width:0;height:0} body.dv_new button.dv_gal_slide{ flex:0 0 calc((100% - (var(--dv-gal-per) - 1) * var(--dv-gal-gap)) / var(--dv-gal-per)); scroll-snap-align:start;position:relative; padding:0;margin:0;border:0;border-radius:12px;overflow:hidden; aspect-ratio:5/3;background:#f4f5f7;cursor:zoom-in;line-height:0; } /* [크게 보기]는 사진마다 하나씩 들어 있다 — 얹은 사진에만 뜨게 한다. 위쪽 .dv_gal_main:hover 규칙을 그대로 두면 한 장에 얹어도 줄 전체가 같이 뜬다. */ body.dv_new .dv_place_gal--banner .dv_gal_main:hover .dv_gal_zoom{opacity:0} body.dv_new .dv_place_gal--banner button.dv_gal_slide:hover .dv_gal_zoom{opacity:1} /* 좌우 화살표 — 제목 줄 넘김 버튼(.dv_sec_arw), 메인 슬라이더와 같은 모양 */ body.dv_new button.dv_gal_arw{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; display:flex;align-items:center;justify-content:center; width:44px;height:44px;padding:0; border:0;border-radius:20%;background:#fff;color:#000;cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,0.18); transition:transform 0.15s; } body.dv_new button.dv_gal_arw svg{width:24px;height:24px;display:block} body.dv_new button.dv_gal_arw:hover{transform:translateY(-50%) scale(1.08)} body.dv_new button.dv_gal_arw:disabled{opacity:.32;cursor:default;transform:translateY(-50%);box-shadow:0 2px 8px rgba(0,0,0,0.10)} body.dv_new button.dv_gal_prev{left:16px} body.dv_new button.dv_gal_next{right:16px} /* 사진이 줄 안에 다 들어가면 넘길 것이 없다 — 눌리지 않는 버튼을 띄워 두면 "고장난 버튼"으로 보이므로 아예 감춘다(썸네일 줄 화살표와 같은 처리). */ body.dv_new button.dv_gal_arw[hidden]{display:none} body.dv_new .dv_gal_count[hidden]{display:none} /* 사진 위에 얹힌 표시들은 클릭을 가로채지 않는다 — 슬라이드 어디를 눌러도 크게보기가 열려야 한다. 종전 마크업에서는 이 표시들이 [크게 보기] 버튼 안에 들어 있어 문제가 없었는데, 배너에서는 슬라이드 옆에 나란히 얹히므로 여기서 비켜 준다. 지도 버튼은 예외다 — 그건 눌러야 하는 링크다. */ body.dv_new .dv_place_gal--banner .dv_gal_zoom, body.dv_new .dv_place_gal--banner .dv_gal_count, body.dv_new .dv_place_gal--banner .dv_place_logo{pointer-events:none} /* 썸네일은 세로 한 줄이 아니라 2열로 깐다. 오른쪽 칸이 300px 쯤 되는데 한 줄로 세우면 썸네일 하나가 너무 커져서 화면에 두세 장밖에 안 들어온다. 2열이면 7장이 스크롤 없이 다 보인다. */ body.dv_new .dv_gal_track{ flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden; display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start; scroll-behavior:smooth; scrollbar-width:none; /* 화살표로 넘기므로 스크롤바는 숨긴다 */ } body.dv_new .dv_gal_track::-webkit-scrollbar{width:0;height:0} body.dv_new button.dv_gal_th{ display:block;width:100%;aspect-ratio:5/3;padding:0;margin:0; border:2px solid transparent;border-radius:8px;background:#f4f5f7; cursor:pointer;overflow:hidden;line-height:0; } body.dv_new button.dv_gal_th img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px} body.dv_new button.dv_gal_th:hover{border-color:#c4cbd3} body.dv_new button.dv_gal_th.on{border-color:#0fb598} body.dv_new button.dv_gal_nav{ flex:0 0 auto;width:100%;height:28px;padding:0;margin:0; border:1px solid #e5e8ec;border-radius:6px;background:#fff; color:#6b7684;cursor:pointer;line-height:0; } body.dv_new button.dv_gal_nav svg{width:20px;height:20px;display:inline-block;vertical-align:middle} body.dv_new button.dv_gal_nav:hover{border-color:#0fb598;color:#0b8f78} body.dv_new button.dv_gal_nav:disabled{opacity:.3;cursor:default;border-color:#e5e8ec;color:#6b7684} /* 사진이 줄 안에 다 들어가면 JS 가 화살표를 감춘다. flex 자식이라 명시해 준다 */ body.dv_new button.dv_gal_nav[hidden]{display:none} /* 큰 사진 — 칸을 꽉 채운다(cover). [2026-09] 처음엔 자르지 않으려고 contain 을 썼는데, 등록 사진이 전부 같은 비율이 아니라서(업로드 리사이즈는 1000x600 을 넘을 때만 비율 그대로 줄인다) 4:3 이나 16:9 사진에서 위아래 또는 좌우에 회색 바탕이 그대로 드러났다. 사진이 칸 안에 떠 있는 것처럼 보여 카드가 비어 보인다. 대신 [크게 보기]로 열면 contain 이라 잘린 데 없이 원본 전체를 볼 수 있다. */ body.dv_new .dv_gal_main{flex:7 1 0;min-width:0;position:relative;border-radius:12px;overflow:hidden;background:#f4f5f7} body.dv_new button.dv_gal_open{ display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none; cursor:zoom-in;line-height:0; } body.dv_new .dv_gal_img{width:100%;height:100%;object-fit:cover;display:block} body.dv_new .dv_gal_zoom{ position:absolute;left:14px;bottom:14px; display:inline-flex;align-items:center;gap:6px; padding:8px 14px;border-radius:999px;background:rgba(17,17,17,.72); font-family:NotoKR-Medium;font-size:15px;color:#fff;line-height:1; opacity:0;transition:opacity .15s; } body.dv_new .dv_gal_zoom svg{width:17px;height:17px} body.dv_new .dv_gal_main:hover .dv_gal_zoom{opacity:1} body.dv_new .dv_gal_count{ position:absolute;right:14px;bottom:14px; padding:6px 13px;border-radius:999px;background:rgba(17,17,17,.72); font-size:15px;color:#fff;line-height:1.3; } body.dv_new .dv_gal_count b{font-family:NotoKR-Bold} /* ---- 정보 목록 ---- 항목 이름을 값 왼쪽에 세워 두면(표 형태) 이름칸과 값칸 사이에 세로 경계가 생기고, 눈이 그 경계를 건너뛰어야 값을 읽게 된다. 항목이 네댓 개뿐일 때는 그 건너뛰기가 읽는 속도를 눈에 띄게 깎는다. 이름을 값 위에 올려서 한 덩어리로 읽히게 한다. 짧은 항목은 2열, 주소·이동시간·홈페이지처럼 긴 항목은 한 줄을 다 쓴다. */ /* [2026-09] 두 열 사이에 30px 틈을 두었더니 칸마다 그은 밑줄이 그 틈에서 끊겨 가운데가 뚫린 선이 됐다. 틈을 0 으로 두어 좌우 칸의 밑줄이 맞닿게 하고, 글자 사이 여유는 안쪽(dt/dd 오른쪽 여백)으로 낸다. 이러면 선이 끝까지 이어진다. 짧은 항목이 홀수 개일 때 마지막 하나를 한 줄 통짜로 돌리는 것은 PHP 쪽에서 한다 (inc_dv_place_card.php 의 $_odd) — 안 그러면 그 줄만 절반에서 끊긴다. */ body.dv_new .dv_place_info{ display:grid;grid-template-columns:1fr 1fr;column-gap:0; border-top:2px solid #222;margin:0 0 30px;padding:0; } body.dv_new .dv_pi dt, body.dv_new .dv_pi dd{padding-right:30px} body.dv_new .dv_pi{padding:16px 2px 17px;border-bottom:1px solid #e5e8ec;min-width:0} body.dv_new .dv_pi--wide{grid-column:1 / -1} body.dv_new .dv_pi dt{ margin:0 0 5px;padding:0;float:none; font-family:NotoKR-Medium;font-size:16px;line-height:1.4;color:#6b7684;letter-spacing:-0.3px; } body.dv_new .dv_pi dd{ margin:0;padding:0; font-family:NotoKR-Bold;font-size:20px;line-height:1.5;color:#111;letter-spacing:-0.5px; word-break:keep-all; } /* 주소·URL 은 무조건 한 줄. 넘치면 "..." 로 자른다. 두 줄로 흘러내리면 카드끼리 높이가 어긋나고, 어차피 끝까지 읽는 값이 아니다. (전체 주소는 옆 [지도] 버튼으로, 전체 주소는 링크로 확인된다) */ body.dv_new .dv_pi dd.dv_pi_break{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal; } body.dv_new .dv_pi dd.dv_pi_break a{display:inline} body.dv_new .dv_pi dd a{color:#0b8f78;text-decoration:underline} /* ---- 크게보기 레이어 (JS 가 body 직속으로 붙인다) ---- */ body.dv_new .dv_lb{ position:fixed;left:0;top:0;right:0;bottom:0;z-index:9999; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.9); } body.dv_new .dv_lb[hidden]{display:none} body.dv_new .dv_lb_img{max-width:88vw;max-height:86vh;display:block;object-fit:contain} body.dv_new .dv_lb_cap{ position:absolute;left:0;right:0;bottom:26px;text-align:center; font-size:17px;color:#fff;opacity:.85; } body.dv_new button.dv_lb_btn{ position:absolute;padding:0;border:0;border-radius:999px; background:rgba(255,255,255,.14);color:#fff;cursor:pointer; font-size:32px;line-height:1; } body.dv_new button.dv_lb_btn:hover{background:rgba(255,255,255,.28)} body.dv_new button.dv_lb_close{right:28px;top:26px;width:52px;height:52px;font-size:34px} body.dv_new button.dv_lb_prev{left:28px;top:50%;margin-top:-32px;width:64px;height:64px} body.dv_new button.dv_lb_next{right:28px;top:50%;margin-top:-32px;width:64px;height:64px} body.dv_new button.dv_lb_btn[hidden]{display:none} /* --------------------------------------------------------------- * 11. 섹션 제목 줄 + 곳이 여러 군데일 때 가로 나열 * * 한 곳당 [이름 + 사진 420 + 정보 368 + 설명] 이면 세 곳짜리 상품은 * 골프장 소개만 3,000px 이 넘는다. 마지막 골프장까지 내려간 손님이 드물다. * * 두 곳 이상이면 카드를 좁게 만들어 가로로 나란히 늘어놓고, * 세 곳 넘으면 제목 오른쪽 < > 버튼으로 넘긴다. 한 화면에 두 곳이 보인다. * 세로로 감추는 슬라이드와 달리 개수(3곳)가 제목에 적혀 있고, 넘기는 * 대상이 어느 섹션인지 버튼 위치로 바로 붙는다. * --------------------------------------------------------------- */ /* ---- 제목 줄 : [제목] ......... [3곳] [<] [>] ---- */ body.dv_new .dv_sec_hd{ display:flex;align-items:flex-end;justify-content:space-between;gap:20px; margin:0 0 26px;padding:0; } body.dv_new .dv_sec_hd .dv_sec_h{margin:0;padding:0;border:0} /* 굵은 밑줄은 골프장·호텔 섹션에만 (detailview.html 의 dv_sec_head 가 붙인다). 그 아래에 카드가 가로로 늘어서기 때문에 제목과 카드 줄을 끊어 주는 선이 필요하다. 글만 이어지는 섹션(상세정보·일정표·예약규정)에서는 선이 받쳐 줄 것이 없어 밑줄만 따로 떠 보인다. */ body.dv_new .dv_sec_hd--line{ margin:0 0 30px;padding:0 0 18px;border-bottom:2px solid #222; } body.dv_new .dv_sec_tools{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-bottom:3px} body.dv_new .dv_sec_cnt{ font-family:NotoKR-Medium;font-size:17px;color:#6b7684;margin-right:4px;white-space:nowrap; } /* 넘김 버튼은 메인(index.html)의 슬라이더 화살표(.arrow / .slick-arrow)와 같은 모양으로 둔다. 흰 바탕에 살짝 둥근 네모, 옅은 그림자, 얹으면 조금 커진다. 같은 사이트 안에서 화살표가 화면마다 다르게 생기면 같은 동작인 줄 알아보기 어렵다. 아이콘 획도 메인이 쓰는 ic_arrow_left/right.svg 와 같게 맞췄다(detailview.html dv_sec_head). */ body.dv_new button.dv_sec_arw{ display:flex;align-items:center;justify-content:center; width:44px;height:44px;padding:0; border:0;border-radius:20%;background:#fff;color:#000;cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,0.18); transition:transform 0.15s; } body.dv_new button.dv_sec_arw svg{width:24px;height:24px;display:block} body.dv_new button.dv_sec_arw:hover{transform:scale(1.08)} body.dv_new button.dv_sec_arw:disabled{opacity:.32;cursor:default;transform:none;box-shadow:0 2px 8px rgba(0,0,0,0.10)} /* ---- 가로 나열 상자 ---- transform 으로 페이지를 밀지 않고 브라우저 가로 스크롤 + 스냅을 쓴다. 터치패드·휠로도 넘어가고, 계산이 어긋나 카드가 반쯤 걸치는 일이 없다. */ body.dv_new .dv_places{ display:flex;gap:28px;align-items:stretch; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none; /* 넘김은 < > 버튼으로 한다 */ padding-bottom:4px; } body.dv_new .dv_places::-webkit-scrollbar{width:0;height:0} body.dv_new .dv_places > .dv_place{scroll-snap-align:start} /* 한 곳뿐이면 넘길 것이 없다 — 가로 나열을 풀고 카드가 상자를 통째로 쓴다. .dv_place 의 max-width:1000px 가운데정렬도 여기서 푼다. 넘길 대상이 하나뿐인데 양옆에 140px 씩 비워 두면 사진만 작아지고 빈자리는 아무 일도 하지 않는다. (detailview.html 이 곳 수를 세어 dv_places--one 을 붙인다) */ body.dv_new .dv_places--one{display:block;overflow:visible} body.dv_new .dv_places--one > .dv_place{max-width:none;width:100%;margin:0} /* ---- 좁은 카드 (두 곳 이상) : 한 화면에 두 개 ---- */ body.dv_new .dv_place--compact{ flex:0 0 calc((100% - 28px) / 2);min-width:0; max-width:none;margin:0; /* 넓은 카드의 1000px 가운데정렬을 푼다 */ display:flex;flex-direction:column; } /* 가로로 놓이므로 카드 사이 가로줄(넓은 모드의 구분선)은 없앤다 */ body.dv_new .dv_place--compact + .dv_place--compact{margin-top:0;padding-top:0;border-top:0} body.dv_new .dv_place--compact .dv_place_body{display:block} body.dv_new .dv_place--compact .dv_place_hd{margin:0 0 12px} body.dv_new .dv_place--compact .dv_place_name{font-size:23px} /* 가로로 나란히 설 때는 이름이 길어도 줄을 넘기지 않는다. 윗줄·아랫줄 각각 한 줄로 고정해야 카드마다 사진 시작 높이가 정확히 맞는다. */ body.dv_new .dv_place--compact .dv_place_name_main, body.dv_new .dv_place--compact .dv_place_name_sub{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* 사진 — 카드 폭을 다 쓰고, 아래로 썸네일 한 줄 */ body.dv_new .dv_place--compact .dv_place_gal{ display:flex;flex-direction:column;gap:8px;height:auto;margin:0 0 18px; } /* flex:0 0 auto 로 되돌리는 것이 중요하다. 넓은 모드의 flex:7 1 0 이 그대로 남으면 세로 방향 flex 안에서는 basis 0 이 높이 0 으로 잡혀 사진이 아예 안 보인다. */ body.dv_new .dv_place--compact .dv_gal_main{flex:0 0 auto;width:100%;aspect-ratio:5/3} body.dv_new .dv_place--compact .dv_gal_strip{flex:0 0 auto;width:100%;flex-direction:row} /* 썸네일은 장수에 맞춰 폭을 나눠 갖는다 — 몇 장이든 한 줄에 다 들어온다 */ body.dv_new .dv_place--compact .dv_gal_track{display:flex;gap:6px;overflow:visible} body.dv_new .dv_place--compact button.dv_gal_th{flex:1 1 0;width:auto;min-width:0;border-width:2px;border-radius:6px} body.dv_new .dv_place--compact button.dv_gal_th img{border-radius:4px} /* 위·아래 화살표는 세로 줄일 때 쓰던 것이라 가로 한 줄에서는 필요 없다 */ body.dv_new .dv_place--compact button.dv_gal_nav{display:none} body.dv_new .dv_place--compact .dv_gal_zoom{left:10px;bottom:10px;padding:6px 11px;font-size:13px} body.dv_new .dv_place--compact .dv_gal_zoom svg{width:14px;height:14px} body.dv_new .dv_place--compact .dv_gal_count{right:10px;bottom:10px;padding:4px 10px;font-size:13px} body.dv_new .dv_place--compact .dv_gal_main a.dv_place_map{right:10px;top:10px;padding:3px 10px;font-size:14px} body.dv_new .dv_place--compact .dv_gal_main a.dv_place_map svg{width:16px;height:16px} body.dv_new .dv_place--compact .dv_place_logo{left:10px;top:10px;width:38px;height:38px} /* 정보 — 카드 폭이 620px 쯤 되어 짧은 항목은 두 열로 둘 수 있다. 한 열로 세우면 다섯 줄이 되어 카드가 그만큼 길어진다. */ body.dv_new .dv_place--compact .dv_place_info{ margin:0 0 18px;border-top-width:1px;border-top-color:#e5e8ec; } body.dv_new .dv_place--compact .dv_pi{padding:11px 2px 12px} body.dv_new .dv_place--compact .dv_pi dt{font-size:15px;margin-bottom:3px} body.dv_new .dv_place--compact .dv_pi dd{font-size:17px;line-height:1.5} /* 좁은 카드는 열 폭이 310px 남짓이라 30px 여백은 과하다. 밑줄은 넓은 카드와 같은 이유로 틈 없이 이어 붙인 채 안쪽 여백만 줄인다. */ body.dv_new .dv_place--compact .dv_pi dt, body.dv_new .dv_place--compact .dv_pi dd{padding-right:20px} body.dv_new .dv_place--compact .pop_cts{margin:0;font-size:17px;line-height:1.75} /* --------------------------------------------------------------- * 12. 여행 일정표 (.tbl_schedule) * * [왜 손대나] * plan_type 이 A~O 16종이고 렌더러도 inc_days_a~o.php 로 16개인데, * 마크업은 전부 똑같다 — 4칸 표(지역 / 교통 / 시각 / 내용)에 * 일차 구분은 colspan=4 짜리 th.dat_t 한 줄. * 그래서 여기 CSS 한 겹이면 16종이 한꺼번에 바뀐다. PHP 는 건드리지 않는다. * * [무엇이 복잡해 보였나] * layout.css 가 th·td 모두에 border-left/right/bottom 을 넣어 칸마다 사방이 * 막혀 있었다. 게다가 교통·시각 칸이 각 10% 로 좁은데 회색 배경까지 깔려 * 있어서, 정작 읽어야 할 "내용"보다 격자가 먼저 눈에 들어왔다. * * [어떻게 바꾸나] * 세로 줄과 칸 배경을 걷어내고 가로 줄만 남긴다. 시각은 왼쪽에 굵게 세워 * 시간 순서로 읽히게 하고, 교통편은 작은 회색 글씨로 물린다. * 일차 머리는 표 한 줄이 아니라 띠로 만들어 일차끼리 확실히 끊는다. * --------------------------------------------------------------- */ /* [2026-09] 표를 감싸던 바깥선과 위쪽 굵은 검은 선을 걷었다. 일차 머리를 저마다 떨어진 덩어리로 세우기로 했는데, 그것들을 한 상자가 다시 묶어 버리면 "떨어져 있다"가 안 보인다. 일차 사이 간격은 아래 th.dat_t 의 흰 border-top 이 낸다. */ body.dv_new .tbl_schedule{ width:100%;float:none;table-layout:fixed; border:0; border-collapse:separate;border-spacing:0; } body.dv_new .tbl_schedule caption{display:none} /* 칸 폭은 마크업의 (15% / 10% / 10% / *)에 잡혀 있다. table-layout:fixed 에서는 colgroup 이 셀에 준 width 를 이기므로 col 을 직접 잡는다. 시각은 "08:30" 다섯 글자면 되는데 10% 를 쓰고 있었다 — 줄여서 내용 칸에 준다. ※ 네 칸을 합해서 정확히 100% 가 되게 적는 것이 중요하다. 마지막 칸을 auto 로 두면 남는 폭이 "auto 칸" 이 아니라 폭을 지정한 칸들에 비례 배분돼, 정작 넓어야 할 내용 칸이 도리어 좁아진다(150/120/88 -> 473/379/278 로 부풀었다). */ body.dv_new .tbl_schedule col:nth-child(1){width:14%} /* 지역 */ body.dv_new .tbl_schedule col:nth-child(2){width:11%} /* 교통 */ body.dv_new .tbl_schedule col:nth-child(3){width:8%} /* 시각 */ body.dv_new .tbl_schedule col:nth-child(4){width:67%} /* 내용 */ /* ---- 일차 머리띠 : "3일차 (09/16) 화" ---- 표 안의 한 줄이지만 위쪽 굵은 선 + 옅은 배경으로 띠처럼 보이게 한다. 행에는 margin 을 못 주므로 간격은 padding 과 border-top 으로 낸다. */ /* 일차와 일차 사이를 12px 띄운다 — 행에는 margin 을 못 주므로 흰 테두리로 낸다. 첫 일차는 위가 표의 시작이라 띄우지 않는다. */ body.dv_new .tbl_schedule tbody tr th.dat_t{ padding:18px 20px;border:0;border-top:12px solid #fff; background:#f6fdfb; font-family:NotoKR-Bold;font-size:21px;line-height:1.4;color:#0b8f78; letter-spacing:-0.5px;text-align:left;vertical-align:middle; } body.dv_new .tbl_schedule tbody:first-child tr:first-child th.dat_t{border-top:0} /* ---- 두 칸으로 갈린 일차 머리 : [일차·날짜] [지역 / 골프장·관광지] ---- [data-deco] 가 붙은 뒤에만 적용한다. 이 모양은 detailview.html 의 decorate() 가 칸 안을 두 조각으로 다시 짜 넣어야 성립하는데, 스크립트가 못 돈 상태에서 먼저 flex 를 걸면 글자만 덩그러니 남아 오히려 종전보다 못해진다. 못 돌면 바로 위 종전 모양(옅은 청록 띠) 그대로 남는다. */ /* 칸(th)에 직접 display:flex 를 걸면 안 된다 — 칸이 표의 칸이기를 그만두면서 colspan="4" 가 무시돼 일차 머리가 첫 칸 폭(14%)으로 쪼그라든다. 칸은 칸으로 두고, 안에 줄 하나를 넣어 그 줄을 flex 로 편다. */ body.dv_new .tbl_schedule tbody tr th.dat_t[data-deco]{padding:0;background:none} body.dv_new .dv_day_row{display:flex;align-items:stretch;width:100%} /* 왼쪽 : 몇 일차인지. 짙은 색으로 채워 오른쪽 회색 줄과 확실히 갈라 놓는다 */ body.dv_new .dv_day_no{ flex:0 0 165px;box-sizing:border-box; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; padding:20px 12px;background:#4a5160;color:#fff;text-align:center; } body.dv_new .dv_day_no b{font-family:NotoKR-Bold;font-size:21px;line-height:1.25;letter-spacing:-0.5px} body.dv_new .dv_day_no i{font-style:normal;font-family:NotoKR-Medium;font-size:15px;line-height:1.25;color:#d5d9e0} /* 오른쪽 : 그날 어디를 도는지. 접혀 있어도 이것만 훑으면 일정이 잡힌다. 윗줄은 지역, 아랫줄은 골프장·관광지 — 둘 다 한 줄로 끊는다(...). 줄이 늘면 일차마다 머리 높이가 달라져 어느 날이 긴 날인지로 오해된다. 오른쪽 56px 은 화살표(:after) 자리다. */ body.dv_new .dv_day_sum{ flex:1 1 auto;min-width:0;box-sizing:border-box; display:flex;flex-direction:column;justify-content:center;gap:5px; padding:20px 56px 20px 24px;background:#f7f8fa;text-align:left; } body.dv_new .dv_day_sum b, body.dv_new .dv_day_sum i{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} body.dv_new .dv_day_sum b{font-family:NotoKR-Bold;font-size:19px;line-height:1.4;color:#111;letter-spacing:-0.5px} body.dv_new .dv_day_sum i{font-style:normal;font-family:NotoKR-Medium;font-size:16px;line-height:1.5;color:#8a929c} /* ---- 지역 이름 (rowspan 으로 여러 줄을 묶는 칸) ---- 배경으로 깔려 있던 핀 아이콘(bg_location.png)을 걷고 글자만 남긴다. 확대하면 뭉개지는 이미지라 본사 화면에서는 쓰지 않는다. 왼쪽 여백은 일차 머리띠(th.dat_t)의 20px 과 같은 값이다 — 4px 이던 때는 "오키나와" 같은 지역명이 표 바깥선에 바짝 붙어 글자가 선을 타는 것처럼 보였고, 바로 위 일차 머리띠와도 글자 시작점이 어긋나 한 칸씩 밀려 보였다. */ body.dv_new .tbl_schedule tbody tr th{ width:150px;padding:20px 12px; background:none;border:0;border-bottom:1px solid #eef0f3;border-right:1px solid #eef0f3; font-family:NotoKR-Bold;font-weight:normal;font-size:18px;line-height:1.5; color:#111;letter-spacing:-0.5px;text-align:center;vertical-align:middle; } /* ---- 내용 칸 ---- 오른쪽 바깥선과 맞닿는 칸이라 왼쪽(지역 칸)과 같은 20px 을 띄운다 */ body.dv_new .tbl_schedule tbody tr td{ padding:20px 20px 20px 16px;border:0;border-bottom:1px solid #eef0f3; font-family:NotoKR-Medium;font-size:18px;line-height:1.75;color:#333; text-align:left;vertical-align:top; } body.dv_new .tbl_schedule tbody tr td span{font-size:18px} /* ---- 시각 ---- */ /* [2026-09] 지역·교통·시각 세 칸은 값이 짧아(인천 / KE2147 / 09:20) 왼쪽 정렬로 두면 칸은 넓은데 글자만 왼쪽 끝에 몰려 칸이 비어 보였다. 칸 안에서 가로·세로 가운데로 맞추고, 칸 사이에 세로선을 그어 어디까지가 한 칸인지 보이게 한다. 내용 칸(마지막)에는 오른쪽 선을 긋지 않는다 — 표 바깥선이 아니다. */ body.dv_new .tbl_schedule tbody tr td.time{ width:96px;padding:20px 8px;background:none; text-align:center;vertical-align:middle;border-right:1px solid #eef0f3; font-family:NotoKR-Bold;font-size:18px;color:#111;white-space:nowrap; } /* ---- 교통편 : 보조 정보라 작고 흐리게 ---- */ body.dv_new .tbl_schedule tbody tr td.traffic{ width:130px;padding:20px 8px;background:none; text-align:center;vertical-align:middle;border-right:1px solid #eef0f3; font-family:NotoKR-Medium;font-size:16px;line-height:1.5;color:#6b7684; } /* 모바일용으로 내용 칸 안에 한 번 더 들어가는 시각 복제본 */ body.dv_new .tbl_schedule .time2{display:none} /* ---- 식사 아이콘 (조·중·석 GIF) ---- */ body.dv_new .tbl_schedule .meal_text{display:inline-block;margin-top:6px} /* 조·중·석 아이콘(GIF)과 그 뒤 글자의 높이를 서로 맞춘다. ico_meal()(renew/include/fun_tour.php)이 로 인라인 스타일을 박아 내보내기 때문에 스타일시트 규칙으로는 못 이긴다. 이 한 줄만 !important 를 쓴다 — 함수를 고치면 모바일(m2)·파트너 화면까지 같이 움직인다. */ body.dv_new .tbl_schedule .meal_text img{vertical-align:middle !important;margin-right:4px} /* --------------------------------------------------------------- * 13. 일정표 안 골프장 / 호텔 / 관광지 소개 블록 (inc_golf.php) * * [어디에 있나] * inc_golf.php 가

처럼 클래스 이름을 조립해서 낸다. * $cc 는 cc(골프장) / hotel(호텔) / tourism(관광지) 셋이고 마크업은 똑같다. * 그래서 "hotel_group" 으로 파일을 뒤져도 안 나온다 — 조립된 이름이라 그렇다. * * [무엇이 문제였나] * 이름 줄이 통째로 색 띠(골프 #42b299 / 호텔 #e5605a / 관광 #f3c114)라 화면에서 * 제일 먼저 눈에 들어오는 것이 정작 내용이 아니라 색이었다. 그 아래 본문 상자도 * 같은 색 테두리로 한 번 더 둘러싸여 일정표 한 칸이 색 덩어리로 보였다. * 사진은 180px 고정이라 카드가 넓어져도 왼쪽에 몰려 있었다. * * [어떻게 바꾸나] * 색 띠를 걷고 흰 카드로. 종류는 왼쪽 4px 세로 막대에만 남긴다(정보는 안 버린다). * 사진을 카드 폭에 맞춰 3등분해 나란히 놓고, 본문은 사진 아래로 내린다. * "자세히보기" GIF 버튼은 글자 링크로 바꾼다 — 확대하면 뭉개지는 이미지다. * --------------------------------------------------------------- */ body.dv_new .cc_group, body.dv_new .hotel_group, body.dv_new .tourism_group{ width:100%;float:none;margin:16px 0 4px;box-sizing:border-box; border:1px solid #e5e8ec;border-radius:12px; background:#fff;overflow:hidden; } /* ---- 이름 줄 ---- */ body.dv_new .cc_title, body.dv_new .hotel_title, body.dv_new .tourism_title{ width:100%;float:none;box-sizing:border-box; display:flex;align-items:center;gap:16px; padding:18px 22px 14px;background:none; } body.dv_new .cc_name, body.dv_new .hotel_name, body.dv_new .tourism_name{ flex:1 1 auto;min-width:0;width:auto;float:none; padding:0;background:none; /* 이름 앞 배경 GIF 제거 */ font-family:NotoKR-Bold;font-size:21px;line-height:1.4;color:#111;letter-spacing:-0.5px; word-break:keep-all; } /* "자세히보기" — GIF 버튼을 글자 링크로. 이미지를 감추고 글자를 붙인다. inc_golf.php 는 골프·호텔·관광지가 같이 쓰는 파일이라 PHP 를 건드리지 않는다. */ body.dv_new .cc_more, body.dv_new .hotel_more, body.dv_new .tourism_more{width:auto;flex:0 0 auto;float:none;text-align:right} body.dv_new .cc_more img, body.dv_new .hotel_more img, body.dv_new .tourism_more img{display:none} /* [상세보기] 글자색은 검정이다. 청록은 이 페이지에서 "누르면 뭔가 열린다" 는 뜻으로 여러 군데 쓰고 있어, 일정표 칸마다 이 링크가 붙으면 청록만 눈에 밟힌다. (세 줄은 골프장·호텔·관광지가 같은 마크업이라 한 규칙이다 — 하나만 검정으로 두면 같은 자리 같은 링크가 종류에 따라 다른 색이 된다) */ body.dv_new .cc_more a, body.dv_new .hotel_more a, body.dv_new .tourism_more a{ font-family:NotoKR-Medium;font-size:16px;color:#111;text-decoration:none;white-space:nowrap; } body.dv_new .cc_more a:after, body.dv_new .hotel_more a:after, body.dv_new .tourism_more a:after{content:"상세보기 \203A"} body.dv_new .cc_more a:hover, body.dv_new .hotel_more a:hover, body.dv_new .tourism_more a:hover{text-decoration:underline} /* ---- 내용 상자 : 사진이 위, 글이 아래 ---- 마크업은 글이 먼저라 order 로 자리를 바꾼다. 사진을 먼저 보고 글을 읽는 순서다. */ body.dv_new .cc_cts, body.dv_new .hotel_cts, body.dv_new .tourism_cts{ width:100%;float:none;box-sizing:border-box; display:flex;flex-direction:column; padding:0 22px 22px;border:0; } body.dv_new .cc_imggr, body.dv_new .hotel_imggr, body.dv_new .tourism_imggr{ order:1;width:100%;float:none;margin:0; display:flex;gap:8px; } body.dv_new .cc_thumb, body.dv_new .hotel_thumb, body.dv_new .tourism_thumb{ flex:1 1 0;width:auto;min-width:0;float:none;margin:0 !important; /* mgr10 무력화 */ border-radius:8px;overflow:hidden;background:#f4f5f7;line-height:0; } /* 사진에 width="180" height="135" 가 박혀 있어 CSS 로 덮는다 */ body.dv_new .cc_thumb img, body.dv_new .hotel_thumb img, body.dv_new .tourism_thumb img{ width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block; } /* 본문 — 65px 로 자르던 것을 세 줄로. 잘린 자리에 "..." 가 붙어 더 있다는 게 보인다 */ body.dv_new .golf_content_short{ order:2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; height:auto;overflow:hidden;margin:16px 0 0; font-size:17px;line-height:1.75;color:#333; } /* --------------------------------------------------------------- * 14. 일정표 — 일차 접기/펼치기 · 숙박/식사 표 · 문의바 닫기 * --------------------------------------------------------------- */ /* ---- 일차 머리를 누름 버튼으로 ---- 일차가 tbody 로 나뉘어 있지 않아 묶음은 JS 가 형제 을 훑어 잡는다. 여기서는 "누를 수 있는 줄" 로 보이게만 한다. */ body.dv_new .tbl_schedule th.dv_day_head{cursor:pointer;user-select:none;position:relative;padding-right:52px} body.dv_new .tbl_schedule th.dv_day_head:hover{background:#ecfbf7} body.dv_new .tbl_schedule th.dv_day_head[data-deco]:hover{background:none} body.dv_new .tbl_schedule th.dv_day_head[data-deco]:hover .dv_day_sum{background:#eef1f5} /* 오른쪽 끝 화살표 — 접혀 있으면 아래, 펴져 있으면 위. CSS 테두리 두 변을 돌려 만든 꺾쇠였는데, 같은 페이지의 다른 화살표 (.dv_sec_arw / .dv_gal_arw, 메인 ic_arrow_*.svg 와 같은 획)와 굵기도 크기도 길이도 달라 화면마다 화살표가 들쭉날쭉했다. 같은 SVG 획을 배경으로 깔아 24px 한 규격으로 맞춘다. 색은 검정. */ body.dv_new .tbl_schedule th.dv_day_head:after{ content:"";position:absolute;right:22px;top:50%; width:24px;height:24px;margin-top:-12px;border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10L12 15'/%3E%3Cpath d='M12 15L17 10'/%3E%3C/svg%3E") no-repeat center; background-size:24px 24px; transform:rotate(0deg);transition:transform .18s; } body.dv_new .tbl_schedule th.dv_day_head.on_open:after{transform:rotate(180deg)} /* 섹션 제목 옆 [전체 펼치기] (JS 가 만들어 붙인다) */ body.dv_new button.dv_day_all{ flex:0 0 auto;margin-bottom:3px; padding:9px 16px;border:1px solid #d8dde3;border-radius:4px;background:#fff; font-family:NotoKR-Medium;font-size:16px;color:#333;cursor:pointer;white-space:nowrap; } body.dv_new button.dv_day_all:hover{border-color:#0fb598;background:#f6fdfb;color:#0b8f78} /* ---- 숙박 / 식사 표 ---- 일정 칸에서 "여기서 잔다 / 여기서 먹는다" 는 다른 줄과 성격이 달라 앞에 작은 표를 달아 갈라 놓는다. 색은 서로 다르게 — 훑을 때 바로 구분된다. */ body.dv_new .dv_day_tag, body.dv_new .tbl_schedule .meal_text:before{ display:inline-block;vertical-align:middle; margin-right:8px;padding:3px 10px;border-radius:6px; font-family:NotoKR-Bold;font-size:14px;line-height:1.5;letter-spacing:-0.3px; } body.dv_new .dv_day_tag{background:#eef4ff;color:#3b6ea5} /* 숙박 */ body.dv_new .tbl_schedule .meal_text:before{content:"식사";background:#fff4e5;color:#a8681a} body.dv_new .dv_day_stay{margin-top:8px;line-height:1.7} body.dv_new .tbl_schedule .meal_text{display:inline-block;margin-top:6px} /* ---- 일차 끝 [숙박] / [식사] 줄 (detailview.html 의 foot() 이 만든다) ---- 라벨은 라 위 지역 칸 규격(가운데 정렬 + 세로선)을 그대로 받는다. 지역 이름과 헷갈리지 않게 색만 한 단계 흐리게 둔다. */ body.dv_new .tbl_schedule tr.dv_day_foot th{ font-family:NotoKR-Medium;color:#6b7684; } body.dv_new .tbl_schedule tr.dv_day_foot td{padding:18px 20px 18px 16px} /* 줄 앞에 달려 있던 표는 라벨 칸이 대신하므로 여기서는 여백만 정리한다 */ body.dv_new .dv_day_foot .dv_day_stay{margin:0;line-height:1.7} body.dv_new .dv_day_foot .dv_day_stay + .dv_day_stay{margin-top:8px} /* 아이콘과 글자를 서로 정확히 가운데에 맞춘다. vertical-align:middle 은 글자 상자의 한가운데가 아니라 "기준선 + x높이 절반" 에 맞추는 것이라 3px 쯤 어긋난다. 한 줄을 flex 로 펴고 가운데로 모으면 어긋남이 없다. gap 은 [아이콘][글자] 짝이 여러 개 들어 있을 때 짝 사이를 띄우는 값이다 — flex 에서는 글자 앞뒤 공백이 지워져 그냥 두면 짝끼리 달라붙는다. */ body.dv_new .dv_day_foot .meal_text{ margin:0;display:inline-flex;align-items:center;gap:4px;vertical-align:middle; } body.dv_new .dv_day_foot .meal_text:before{display:none} body.dv_new .dv_day_foot .meal_text + .meal_text{margin-left:16px} /* 호텔 카드(.hotel_group)를 이 칸으로 옮겨 온다 — 칸이 이미 [숙박] 로 이름표를 달고 있으니 카드 위아래 여백만 걷어 줄에 맞춘다 */ body.dv_new .dv_day_foot .hotel_group{margin:0} /* ---- 아래 바 닫기 ---- 옆 버튼들(.dv_fixbar_in a — 전화 / 카카오톡 / 여행 문의하기)과 같은 부품으로 보이게 맞춘다. 테두리 없는 동그란 유령 버튼이라 혼자 다른 물건처럼 떠 있었다. 58px 은 옆 버튼의 높이다 — 위아래 패딩 17px 씩 + 글자 한 줄(20px x 1.2) = 58. 모서리도 그쪽과 같은 10px, 바탕은 흰색에 회색 선 한 줄. */ body.dv_new button.dv_fixbar_close{ flex:0 0 auto;display:flex;align-items:center;justify-content:center; box-sizing:border-box;width:58px;height:58px;padding:0;margin:0; border:1px solid #dfe3e8;border-radius:10px;background:#fff;color:#8a929c;cursor:pointer; } body.dv_new button.dv_fixbar_close svg{width:20px;height:20px} body.dv_new button.dv_fixbar_close:hover{border-color:#c4cbd3;background:#f7f8fa;color:#333} body.dv_new .dv_fixbar[hidden]{display:none} /* ---- 소개글 : 세 줄까지만 (inc_dv_place_card.php) ---- 카드가 가로로 나란히 설 때 소개글 길이가 제각각이면 카드 높이가 어긋난다. 세 줄로 자르고, 실제로 넘칠 때만 [더보기]가 나온다(JS 가 재서 켠다). .pop_cts 는 일정표 안 팝업에서도 쓰는 클래스라 소개 카드 안으로 한정한다. */ body.dv_new .dv_place_desc{margin:0} body.dv_new .dv_place_desc .pop_cts.dv_clamp{ display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } body.dv_new button.dv_more{ margin:8px 0 0;padding:0;border:0;background:none;cursor:pointer; font-family:NotoKR-Medium;font-size:16px;color:#0b8f78;text-decoration:underline; } body.dv_new button.dv_more[hidden]{display:none} /* --------------------------------------------------------------- * 15. 일정표 안 [상세보기] 팝업 (inc_golf.php 의 .pop_sub / #pop_wrap) * * [무엇이 문제였나] * 종전 팝업은 960px 고정에 float:left 로 짜여 있고, 위에 종류별 색 띠 * (골프 초록 / 호텔 빨강 / 관광 노랑)가 통째로 깔린 헤더가 붙었다. * 본문은 [글] - [사진 916px 세로로 쌓기] - [글] 순서라, 사진이 네 장이면 * 팝업 안에서 한참을 내려야 두 번째 글이 나왔다. * 자리도 문서 흐름 기준(position:absolute)이라 어디서 열었느냐에 따라 * 화면 밖에 뜨기도 했다. left:50%; margin-left:-370px 도 960px 폭과 안 맞는다. * * [어떻게 바꾸나] * 화면 한가운데 뜨는 보통의 모달로 만든다. 뒤는 어둡게 깔고, 안쪽은 두 칸 — * 왼쪽은 사진 한 장씩 좌우로 넘기는 슬라이드, 오른쪽은 글. * 화살표와 장수 표시는 골프장 카드에서 쓰던 부품(.dv_gal_arw / .dv_gal_count)을 * 그대로 쓴다. 같은 페이지 안에서 화살표가 또 다르게 생기면 안 된다. * * [마크업은 못 건드린다] * inc_golf.php 는 골프장·호텔·관광지가 같이 쓰고 파트너 화면도 같은 파일을 탄다. * 그래서 id 가 종류별로 갈리는 것(#pop_header / 02 / 03)은 앞자리 선택자로 받는다. * --------------------------------------------------------------- */ /* 바탕 — show_detail() 이 jQuery .show() 로 display:block 을 박으므로 flex 로 가운데 정렬하면 안 된다. 안쪽 상자를 inline-block 으로 가운데 세운다. top 은 show_detail() 이 인라인으로 건드리므로 !important 로 눌러 둔다. */ body.dv_new .pop_sub{ position:fixed;left:0 !important;top:0 !important;right:0;bottom:0; width:auto;margin:0 !important;z-index:99999999; background:rgba(0,0,0,.55); overflow-y:auto;padding:40px 20px;box-sizing:border-box;text-align:center; } body.dv_new .pop_sub #pop_wrap{ width:100%;max-width:1000px;float:none;display:inline-block;vertical-align:middle;text-align:left; background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3); } /* 머리 — 종류별 색 띠를 걷고 이름만 남긴다 */ /* 종류별 색 띠는 layout.css 가 id(#pop_header03 …)로 칠한다. 앞자리 선택자 [id^="pop_header"] 는 클래스라 id 를 못 이긴다 — 세 id 를 그대로 적어 덮는다. */ body.dv_new .pop_sub #pop_header, body.dv_new .pop_sub #pop_header02, body.dv_new .pop_sub #pop_header03{ width:auto;height:auto;float:none;background:#fff;border-bottom:1px solid #e5e8ec; } body.dv_new .pop_sub [class^="pop_title"]{ width:auto;float:none;margin:0;padding:24px 68px 24px 28px;background:none;position:relative; font-family:NotoKR-Bold;font-size:24px;line-height:1.35;color:#111;letter-spacing:-0.8px; } /* 닫기 — PNG 를 감추고 선 두 개로 X 를 그린다(확대해도 안 뭉개진다) */ body.dv_new .pop_sub .pop_close{width:44px;height:44px;position:absolute;top:50%;right:14px;margin-top:-22px} body.dv_new .pop_sub .pop_close img{display:none} body.dv_new .pop_sub .pop_close a{display:block;width:44px;height:44px;position:relative} body.dv_new .pop_sub .pop_close a:before, body.dv_new .pop_sub .pop_close a:after{ content:"";position:absolute;left:11px;top:21px;width:22px;height:2px;background:#111;border-radius:1px; } body.dv_new .pop_sub .pop_close a:before{transform:rotate(45deg)} body.dv_new .pop_sub .pop_close a:after{transform:rotate(-45deg)} /* 한 칸으로 쌓는다 — 위에 사진 배너, 아래에 글. 마크업 순서가 [글][사진][글] 이라 order 로 사진만 맨 위로 올린다. (좌우 두 칸으로도 해 봤는데, 글이 절반 폭으로 눌려 한 줄에 스무 자쯤밖에 안 들어가 소개글이 자꾸 끊겼다. 폭을 다 쓰는 편이 읽기 낫다) */ body.dv_new .pop_sub #pop_contents{ width:auto;float:none;padding:28px;border:0;background:#fff;box-sizing:border-box; display:flex;flex-direction:column; } body.dv_new .pop_sub .pop_img{ order:1;position:relative; width:auto;float:none;margin:0 0 24px;text-align:left; } body.dv_new .pop_sub .pop_cts{ order:2;width:auto;float:none;border:0;padding:0;margin:0 0 14px; font-size:17px;line-height:1.8;color:#333; } body.dv_new .pop_sub .pop_cts img{max-width:100%;height:auto} /* 본문 맨 끝에 하나 더 있던 닫기 GIF — 머리의 X 하나면 된다 */ body.dv_new .pop_sub #pop_contents > a{display:none} /* 사진 — 세로로 쌓지 않고 한 장씩 좌우로 넘긴다(.dv_gal_slides 와 같은 방식) */ body.dv_new .pop_sub .cc_imggr{ display:flex;width:100%;margin:0; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none; } body.dv_new .pop_sub .cc_imggr::-webkit-scrollbar{width:0;height:0} /* 폭을 다 쓰는 배너라 원본 비율(3:2)대로 두면 사진만 630px 높이가 되어 팝업을 열자마자 글이 화면 밖으로 밀린다. 가로로 긴 16:9 로 잡는다. ※ 위아래 잘림이 거슬리면 이 비율 하나만 고치면 된다. */ body.dv_new .pop_sub .cc_imggr > div{ flex:0 0 100%;scroll-snap-align:start;margin:0; aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#f4f5f7; } body.dv_new .pop_sub .cc_imggr img{width:100%;height:100%;object-fit:cover;display:block} /* 팝업 안에서는 가 폭을 잡지 못하게 둔다 */ body.dv_new .pop_sub .pop_img center{display:block;width:100%} /* --------------------------------------------------------------- * 16. 국외여행 표준약관 본문 (inc_dv_terms.php) * * 조문이 열여덟 개에 항·호가 세 겹까지 들어가는 긴 글이다. 통짜로 흘리면 * 어디가 조 제목이고 어디가 그 아래 항인지 글자 크기만으로는 안 잡힌다. * 조 번호를 앞에 칩으로 세우고, 항·호는 마커를 왼쪽에 고정해 글이 그 아래로 * 말려 들어가지 않게(행잉 인덴트) 한다. * --------------------------------------------------------------- */ body.dv_new .dv_terms{font-size:17px;line-height:1.8;color:#333} body.dv_new .dv_terms_art + .dv_terms_art{margin-top:26px} /* 조 제목 — [제1조] 칩 + 제목. 칩이 있어 목록을 훑을 때 조 번호가 먼저 잡힌다 */ body.dv_new .dv_terms_h{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; margin:20px 0 10px;padding:0; font-family:NotoKR-Bold;font-size:19px;line-height:1.5;color:#111;letter-spacing:-0.5px; } body.dv_new .dv_terms_no{ flex:0 0 auto;padding:3px 10px;border-radius:6px; background:#eafaf6;color:#0b8f78; font-family:NotoKR-Bold;font-size:15px;line-height:1.4;letter-spacing:0; } body.dv_new .dv_terms_p{margin:0 0 8px;padding:0} body.dv_new .dv_terms_p:last-child{margin-bottom:0} /* 항·호 — 마커를 왼쪽에 고정하고 글은 그 오른쪽에서만 흐른다 */ body.dv_new .dv_terms_list{margin:0;padding:0;list-style:none} body.dv_new .dv_terms_list li{ display:flex;align-items:flex-start;gap:8px; margin:0;padding:0;float:none;list-style:none; } body.dv_new .dv_terms_list li + li{margin-top:8px} body.dv_new .dv_terms_mk{ flex:0 0 auto;min-width:22px; font-family:NotoKR-Bold;color:#6b7684; } body.dv_new .dv_terms_txt{flex:1 1 auto;min-width:0} /* 하위 목록 — 한 겹 들어갈 때마다 왼쪽으로 물리고 글자를 한 단계 줄인다 */ body.dv_new .dv_terms_list--sub{margin-top:8px;padding-left:2px;font-size:16px} body.dv_new .dv_terms_list--sub .dv_terms_mk{color:#8a929c} /* 상담에서 가장 많이 나오는 두 가지(예약취소·환불)는 상자로 세운다 */ body.dv_new .dv_terms_box{ margin:26px 0 0;padding:22px 24px; border:1px solid #e8ebee;border-radius:12px;background:#f7f8fa; } body.dv_new .dv_terms_boxh{ display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:0; font-family:NotoKR-Bold;font-size:19px;line-height:1.4;color:#111;letter-spacing:-0.5px; } body.dv_new .dv_terms_ico{flex:0 0 auto;display:block;line-height:0;color:#0fb598} body.dv_new .dv_terms_ico svg{width:24px;height:24px;display:block} /* 처리되지 않는다는 안내 — 이것만 색을 쓴다. 다 강조하면 아무것도 강조가 아니다 */ body.dv_new .dv_terms_warn{ margin:10px 0 0;padding:0; font-family:NotoKR-Bold;color:#d94a44; } body.dv_new .dv_terms_sub_h{ margin:18px 0 10px;padding:0; font-family:NotoKR-Bold;font-size:17px;line-height:1.5;color:#111; } /* 환불 기준 — 원문은 "- 시점 : 배상" 줄이 여섯 개씩 두 벌이다. 시점과 배상액을 두 칸으로 갈라 놓으면 내 경우가 어디인지 세로로 훑어 찾는다. */ body.dv_new .dv_terms_tbl{ width:100%;border-collapse:collapse;border-top:1px solid #d8dde3;background:#fff; } body.dv_new .dv_terms_tbl th, body.dv_new .dv_terms_tbl td{ padding:12px 16px;border-bottom:1px solid #e8ebee; font-size:16px;line-height:1.5;vertical-align:middle; } body.dv_new .dv_terms_tbl th{ text-align:left;font-family:NotoKR-Medium;color:#333;border-right:1px solid #e8ebee; } body.dv_new .dv_terms_tbl td{font-family:NotoKR-Bold;color:#111}