/* ============================================================
   ibm.components.css — 일본만 자사몰 공용 컴포넌트 (2026-10-24)
   디자인 시스템 '일본만 ilbonman' (artifact 7HBtcKzYpabWUdy4cxEUUq) 의 components/bundle.css 이식본.
   - 색·간격·모서리는 ibm.tokens.css 의 --ibm-* 를 쓴다 (tokens.css 를 먼저 로드할 것)
   - 모든 클래스는 ibm- 접두사. 기존 common.css 클래스와 겹치지 않는다
   - 영업팀 의견 반영 컴포넌트: ibm-svc(서비스 탭), ibm-pt(가격), ibm-benefit(혜택 배너),
     ibm-cs(고객센터 푸터), ibm-badge--sale/instant/wait, ibm-btn--sea(대기접수)
   ============================================================ */
/* ---- 2026-10-26 기존 base.css 전역 리셋 무력화 ----
   base.css 의 `* {font-family:'Paperlogy'; font-size:14px; font-weight:400; line-height:1.5; appearance:none}` 가
   모든 요소에 직접 걸려 새 화면의 <b>/<span>/<em> 이 부모 글꼴·크기를 물려받지 못하고, 체크박스도 사라졌다.
   클래스에 ibm- 가 들어간 요소(=새 컴포넌트·새 화면 래퍼) 안에서는 시안대로 Pretendard + 상속으로 되돌린다.
   새로 만드는 화면 래퍼에는 class="ibm-page" 를 붙이면 같은 효과. (특이도 0,1,0 — 컴포넌트 규칙이 뒤에서 이긴다) */
[class*="ibm-"],[class*="ibm-"] :where(*){font-family:var(--ibm-font-body);}
[class*="ibm-"] :where(*:not([class])),[class*="ibm-"] :where(a,span,b,strong,em,small,i,label,p,li,dt,dd){font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;}
[class*="ibm-"] :where(b,strong):not([class]){font-weight:800;}
[class*="ibm-"] :where(input[type="checkbox"]){-webkit-appearance:checkbox;appearance:auto;}
[class*="ibm-"] :where(input[type="radio"]){-webkit-appearance:radio;appearance:auto;}
.ibm-page{font-family:var(--ibm-font-body);color:var(--ibm-ink);letter-spacing:-.3px;font-size:15px;line-height:1.5;}
.ibm-scope{font-family:var(--ibm-font-body);color:var(--ibm-ink);letter-spacing:-.3px;}
.ibm-hero{font-family:var(--ibm-font-display);font-size:28px;line-height:1.35;font-weight:800;letter-spacing:-.5px;margin:0}
.ibm-page-title{font-size:22px;line-height:1.35;font-weight:800;letter-spacing:-.3px;margin:0}
.ibm-section-title{font-size:18px;line-height:1.35;font-weight:700;letter-spacing:-.3px;margin:0}

.ibm-btn,.ibm-chip,.ibm-field,.ibm-search,.ibm-fare,.ibm-seg,.ibm-card{box-sizing:border-box;}
/* 2026-10-29 제목 줄바꿈: 한글 단어 중간 끊김·한 글자 고아줄 방지 */
[class*="ibm-"] :where(h1,h2,h3,h4),.ibm-page-title,.ibm-section-title,.ibm-hero{word-break:keep-all;text-wrap:balance;}
/* 2026-10-29 버튼 안 아이콘(svg) 정렬 */
.ibm-ft__btns a svg,.ibm-cs__team a svg{flex:none;vertical-align:-2px;}
/* 2026-10-29 사업자정보: 항목(번호) 중간에서 줄이 끊기지 않게 항목 단위로 줄바꿈 */
.ibm-ft__biz > span{white-space:nowrap;}

/* ---- Button ---- */
.ibm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--ibm-tap-min);padding:0 var(--ibm-sp-4);border:0;border-radius:var(--ibm-r-md);
  font:600 var(--ibm-fs-md)/1 var(--ibm-font-body);cursor:pointer;text-decoration:none;
  transition:transform var(--ibm-dur-fast) var(--ibm-ease), background-color var(--ibm-dur) var(--ibm-ease);}
.ibm-btn:active{transform:scale(.98);}
.ibm-btn--primary{background:var(--ibm-brand-strong);color:var(--ibm-white);}
.ibm-btn--dark{background:var(--ibm-ink);color:var(--ibm-white);}
.ibm-btn--ghost{background:var(--ibm-white);color:var(--ibm-gray-900);box-shadow:inset 0 0 0 1px var(--ibm-gray-300);}
.ibm-btn--block{display:flex;width:100%;min-height:52px;font-size:16px;border-radius:12px;}
.ibm-btn[disabled]{background:var(--ibm-gray-200);color:var(--ibm-gray-500);cursor:not-allowed;}

/* ---- Card ---- */
.ibm-card{background:var(--ibm-white);border:1px solid var(--ibm-gray-200);border-radius:var(--ibm-r-lg);overflow:hidden;
  transition:box-shadow var(--ibm-dur) var(--ibm-ease), transform var(--ibm-dur) var(--ibm-ease);}
@media (hover:hover){ .ibm-card:hover{box-shadow:var(--ibm-shadow-2);transform:translateY(-2px);} }

/* ---- Badge ---- */
.ibm-badge{display:inline-block;padding:3px 8px;border-radius:var(--ibm-r-sm);
  font-size:11px;font-weight:700;line-height:1.4;background:var(--ibm-sea-soft);color:var(--ibm-sea);}
.ibm-badge--brand{background:var(--ibm-brand-soft);color:var(--ibm-brand-strong);}

/* ---- SectionHead ---- */
.ibm-section{margin:0 0 var(--ibm-section-gap);}
.ibm-section__head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px;}
.ibm-section__head h2{font:700 var(--ibm-fs-lg)/var(--ibm-lh-tight) var(--ibm-font-body);color:var(--ibm-gray-900);letter-spacing:-.3px;margin:0;}
.ibm-section__head .more{font-size:var(--ibm-fs-sm);color:var(--ibm-gray-500);text-decoration:none;}

/* ---- Price ---- */
.ibm-price{font-weight:800;color:var(--ibm-gray-900);letter-spacing:-.3px;}
.ibm-price small{font-weight:500;color:var(--ibm-gray-500);font-size:var(--ibm-fs-xs);margin-left:2px;}
.ibm-price--sale{color:var(--ibm-brand-strong);}

/* ---- Skeleton ---- */
.ibm-skeleton{background:linear-gradient(90deg,#f1f1f1 25%,#e7e7e7 37%,#f1f1f1 63%);background-size:400% 100%;
  animation:ibm-shimmer 1.2s ease infinite;border-radius:var(--ibm-r-md);}
@keyframes ibm-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ===== 추가 컴포넌트 (2026-10-19 시안에서 정리) ===== */

/* ---- Chip ---- */
.ibm-chip{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 14px;border-radius:var(--ibm-r-pill);
  border:1px solid var(--ibm-gray-300);background:var(--ibm-white);color:var(--ibm-gray-900);
  font:500 var(--ibm-fs-sm)/1 var(--ibm-font-body);cursor:pointer;white-space:nowrap;
  transition:background-color var(--ibm-dur) var(--ibm-ease), color var(--ibm-dur) var(--ibm-ease);}
.ibm-chip[aria-pressed="true"],.ibm-chip.is-on{background:var(--ibm-ink);border-color:var(--ibm-ink);color:var(--ibm-white);font-weight:700;}
.ibm-chip--soft[aria-pressed="true"],.ibm-chip--soft.is-on{background:var(--ibm-sea-soft);border-color:var(--ibm-sea);color:var(--ibm-sea);}

/* ---- Segment (왕복/편도) ---- */
.ibm-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:12px;background:var(--ibm-gray-100);}
.ibm-seg button{min-height:40px;border:0;border-radius:var(--ibm-r-md);background:transparent;color:var(--ibm-gray-700);
  font:600 var(--ibm-fs-sm)/1 var(--ibm-font-body);cursor:pointer;transition:background-color var(--ibm-dur) var(--ibm-ease);}
.ibm-seg button[aria-pressed="true"]{background:var(--ibm-white);color:var(--ibm-ink);font-weight:800;box-shadow:var(--ibm-shadow-1);}

/* ---- Field (검색 카드 안 입력칸) ---- */
.ibm-field{display:flex;flex-direction:column;gap:2px;min-height:56px;padding:9px 12px;border-radius:12px;background:var(--ibm-gray-100);
  border:1px solid transparent;text-align:left;cursor:pointer;font-family:var(--ibm-font-body);}
.ibm-field__label{font-size:11px;color:var(--ibm-gray-700);}
.ibm-field__value{font-size:var(--ibm-fs-md);font-weight:700;color:var(--ibm-ink);}
.ibm-field__value.is-empty{color:var(--ibm-gray-500);font-weight:500;}
.ibm-field.is-error{border-color:var(--ibm-danger);background:var(--ibm-white);}

/* ---- SearchCard ---- */
.ibm-search{display:flex;flex-direction:column;gap:var(--ibm-sp-2);padding:var(--ibm-sp-4);background:var(--ibm-white);
  border-radius:var(--ibm-r-lg);box-shadow:var(--ibm-shadow-2);}
.ibm-search__row{display:grid;gap:var(--ibm-sp-2);}
.ibm-search__row--2{grid-template-columns:1fr 1fr;}
.ibm-search__row--3{grid-template-columns:1fr 1fr .8fr;}

/* ---- FareDateStrip (날짜별 최저가 띠) ---- */
.ibm-fares{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
.ibm-fares::-webkit-scrollbar{display:none;}
.ibm-fare{flex:0 0 72px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:12px;
  border:1px solid var(--ibm-gray-200);background:var(--ibm-white);font-family:var(--ibm-font-body);cursor:pointer;}
.ibm-fare__day{font-size:12px;color:var(--ibm-gray-700);}
.ibm-fare__price{font-size:13px;font-weight:800;color:var(--ibm-gray-900);}
.ibm-fare.is-low .ibm-fare__price{color:var(--ibm-brand-strong);}
.ibm-fare[aria-pressed="true"]{border:2px solid var(--ibm-brand-strong);background:var(--ibm-brand-soft);}
.ibm-fare.is-off .ibm-fare__price{color:var(--ibm-gray-500);font-weight:500;}

/* ---- StatusDot (운항 상태) ---- */
.ibm-status{display:inline-flex;align-items:center;gap:6px;font-size:var(--ibm-fs-sm);font-weight:700;color:var(--ibm-gray-900);}
.ibm-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ibm-ok);}
.ibm-status--warn::before{background:var(--ibm-warn);}
.ibm-status--danger::before{background:var(--ibm-danger);}
.ibm-status--danger{color:var(--ibm-danger);}

/* ===== 2026-10-23 영업팀 의견 반영 추가 ===== */

/* ---- ServiceTabs (선박 · 호텔 · 여행상품 아이콘 탭) ---- */
.ibm-svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px 16px 14px;background:var(--ibm-white);}
.ibm-svc a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ibm-gray-700);font-size:13px;font-weight:600;}
.ibm-svc i{width:50px;height:50px;border-radius:16px;background:var(--ibm-gray-100);display:flex;align-items:center;justify-content:center;border:2px solid transparent;color:var(--ibm-gray-700);}
.ibm-svc a[aria-current="page"]{color:var(--ibm-brand-strong);font-weight:800;}
.ibm-svc a[aria-current="page"] i{border-color:var(--ibm-brand-strong);background:var(--ibm-white);color:var(--ibm-brand-strong);}

/* ---- Sale badges: 판매 방식 · 특가 ---- */
.ibm-badge--sale{background:var(--ibm-brand-strong);color:var(--ibm-white);}
.ibm-badge--instant{background:var(--ibm-white);color:var(--ibm-brand-strong);box-shadow:inset 0 0 0 1px var(--ibm-brand-strong);}
.ibm-badge--wait{background:var(--ibm-sea-soft);color:var(--ibm-sea);}
.ibm-badge--plain{background:var(--ibm-gray-100);color:var(--ibm-gray-700);}

/* ---- PriceTag: 정상가(취소선) · 할인율 · 할인가 ---- */
.ibm-pt{display:flex;flex-direction:column;align-items:flex-end;gap:1px;}
.ibm-pt__was{font-size:12px;color:var(--ibm-gray-500);text-decoration:line-through;}
.ibm-pt__now{display:flex;align-items:baseline;gap:5px;}
.ibm-pt__rate{font-size:15px;font-weight:800;color:var(--ibm-brand-strong);}
.ibm-pt__val{font-size:18px;font-weight:800;color:var(--ibm-gray-900);letter-spacing:-.3px;}
.ibm-pt__unit{font-size:11px;color:var(--ibm-gray-500);}
.ibm-pt--left{align-items:flex-start;}

/* ---- BenefitBanner: 비회원 가입 혜택 / 회원 등급 ---- */
.ibm-benefit{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:8px 8px 8px 14px;border-radius:14px;border:1.5px solid transparent;
  background:linear-gradient(var(--ibm-white),var(--ibm-white)) padding-box,linear-gradient(90deg,var(--ibm-brand),var(--ibm-sea)) border-box;
  font-size:13px;font-weight:800;color:var(--ibm-ink);text-decoration:none;box-sizing:border-box;}
.ibm-benefit i{font-style:normal;flex:none;background:var(--ibm-sea-soft);color:var(--ibm-sea);border-radius:9px;padding:7px 12px;font-size:12px;font-weight:800;}

/* ---- CsFooter: 고객센터 · 사업자 정보 ---- */
.ibm-cs{background:var(--ibm-gray-100);padding:24px 16px 32px;display:flex;flex-direction:column;gap:12px;font-family:var(--ibm-font-body);}
.ibm-cs__links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.ibm-cs__links a{min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--ibm-white);font-size:13px;font-weight:700;color:var(--ibm-ink);text-decoration:none;}
.ibm-cs__team{display:grid;grid-template-columns:52px 1fr 1fr;gap:6px;align-items:center;font-size:13px;font-weight:800;}
.ibm-cs__team a{min-height:44px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:10px;border:1px solid var(--ibm-gray-300);background:var(--ibm-white);font-size:12px;font-weight:700;color:var(--ibm-ink);text-decoration:none;}
.ibm-cs__biz{font-size:12px;line-height:1.65;color:var(--ibm-gray-700);}
.ibm-btn--sea{background:var(--ibm-sea);color:var(--ibm-white);}

/* ---- 바텀시트 ---- */
.ibm-sheet-dim{position:fixed;inset:0;background:rgba(17,17,17,.45);z-index:900;opacity:0;pointer-events:none;transition:opacity var(--ibm-dur-slow) var(--ibm-ease);}
.ibm-sheet{position:fixed;left:50%;bottom:0;width:100%;max-width:480px;max-height:92vh;transform:translate(-50%,100%);z-index:901;
  background:var(--ibm-white);border-radius:var(--ibm-r-lg) var(--ibm-r-lg) 0 0;box-shadow:var(--ibm-shadow-2);display:flex;flex-direction:column;
  transition:transform var(--ibm-dur-slow) var(--ibm-ease);box-sizing:border-box;}
.ibm-sheet.is-open{transform:translate(-50%,0);}
.ibm-sheet.is-open + .ibm-sheet-dim,.ibm-sheet-dim.is-open{opacity:1;pointer-events:auto;}
.ibm-sheet__grab{align-self:center;width:40px;height:4px;border-radius:2px;background:var(--ibm-gray-300);margin:10px 0 6px;}
.ibm-sheet__head{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 4px 16px;}
.ibm-sheet__head h2{margin:0;font-size:18px;font-weight:700;}
.ibm-sheet__close{width:44px;height:44px;border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--ibm-ink);}
.ibm-sheet__body{flex:1;overflow-y:auto;padding:0 16px 16px;}
.ibm-sheet__foot{padding:12px 16px 20px;border-top:1px solid var(--ibm-gray-200);display:flex;gap:8px;}

/* ---- 스테퍼 ---- */
.ibm-stp{display:flex;align-items:center;justify-content:space-between;min-height:64px;border-bottom:1px solid var(--ibm-gray-200);}
.ibm-stp__lbl b{font-size:15px}.ibm-stp__lbl small{display:block;font-size:12px;color:var(--ibm-gray-500)}
.ibm-stp__ctl{display:flex;align-items:center;gap:6px}
.ibm-stp__ctl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--ibm-gray-300);background:var(--ibm-white);color:var(--ibm-ink);font-size:20px;cursor:pointer;}
.ibm-stp__ctl button[disabled]{color:var(--ibm-gray-300);cursor:not-allowed}
.ibm-stp__ctl output{min-width:36px;text-align:center;font-size:17px;font-weight:800}

/* ---- 안내 박스 ---- */
.ibm-note{padding:10px 12px;border-radius:10px;background:var(--ibm-sea-soft);font-size:12.5px;line-height:1.6;color:var(--ibm-gray-900);}
.ibm-note--warn{background:#fff8e6;color:#5a3d00;}
.ibm-note--sea{color:var(--ibm-sea);}

/* ---- 취소 조건 텍스트 ---- */
.ibm-cancel-ok{color:var(--ibm-ok);font-weight:700}
.ibm-cancel-no{color:var(--ibm-danger);font-weight:700}
.ibm-hl{color:var(--ibm-brand-strong);font-weight:800}

/* ---- 기존 레이아웃 연결 (layout.css .head-gray 안의 서비스 탭) ---- */
.wrapper-box .wrapper-right .right-head .head-gray > .ibm-svc{width:calc(100% + 30px);margin:14px -15px -15px;background:var(--ibm-white);box-sizing:border-box;}
.wrapper-box .wrapper-right .right-head .head-gray > .ibm-svc a{text-decoration:none;}
.footer-box .ibm-cs{margin:16px -24px 0;}
@media (max-width:991px){.footer-box .ibm-cs{margin:16px -15px 0;}}


/* ============================================================
   2026-10-26 2차 수정
   ============================================================ */

/* ---- 링크 버튼 글자색 고정 ----
   base.css 의 a:link / a:visited {color:inherit} 는 특이도(0,1,1)가 .ibm-btn--dark(0,1,0)보다 높아
   <a class="ibm-btn ibm-btn--dark"> 글자가 검정으로 덮였다(FAQ 카톡상담 버튼 등). 링크 상태까지 지정한다. */
a.ibm-btn--primary,a.ibm-btn--primary:link,a.ibm-btn--primary:visited,
a.ibm-btn--dark,a.ibm-btn--dark:link,a.ibm-btn--dark:visited,
a.ibm-btn--sea,a.ibm-btn--sea:link,a.ibm-btn--sea:visited{color:var(--ibm-white);}
a.ibm-btn--ghost,a.ibm-btn--ghost:link,a.ibm-btn--ghost:visited{color:var(--ibm-gray-900);}
a.ibm-badge--sale:link,a.ibm-badge--sale:visited{color:var(--ibm-white);}

/* ---- 공통 푸터 (호텔 영업팀 시안 F) ---- */
.footer-box.ibm-ft{margin:40px -24px 0;}
@media (max-width:991px){.footer-box.ibm-ft{margin:40px -15px -40px;}}
.ibm-ft{background:var(--ibm-gray-100);padding:22px 20px 28px;font-family:var(--ibm-font-body);font-size:12px;color:var(--ibm-gray-700);letter-spacing:-.3px;box-sizing:border-box;}
.ibm-ft *{box-sizing:border-box;}
.ibm-ft p,.ibm-ft ul{margin:0;padding:0;list-style:none;}
.ibm-ft__head{display:flex;align-items:center;gap:6px;margin:0 0 6px;}
.ibm-ft__head b{font-size:15px;font-weight:800;color:var(--ibm-ink);}
.ibm-ft__live{font-size:11px;font-weight:700;color:var(--ibm-ok);background:#e8f5ee;border-radius:999px;padding:2px 8px;}
.ibm-ft__live.is-off{color:var(--ibm-gray-700);background:var(--ibm-gray-200);}
.ibm-ft__hours{font-size:12.5px;}
.ibm-ft__cc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 4px;}
.ibm-ft__cc a,.ibm-ft__cc a:link,.ibm-ft__cc a:visited{display:flex;align-items:center;justify-content:center;min-height:44px;background:var(--ibm-white);border:1px solid var(--ibm-gray-300);border-radius:10px;font-size:12.5px;font-weight:700;color:var(--ibm-ink);text-decoration:none;}
.ibm-ft__team{font-size:12px;font-weight:800;color:var(--ibm-ink);margin:10px 0 5px !important;}
.ibm-ft__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ibm-ft__btns a,.ibm-ft__btns a:link,.ibm-ft__btns a:visited{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;border:1px solid var(--ibm-gray-300);background:var(--ibm-white);border-radius:10px;font-size:12.5px;font-weight:800;color:var(--ibm-ink);text-decoration:none;}
.ibm-ft__btns a.k,.ibm-ft__btns a.k:link,.ibm-ft__btns a.k:visited{background:var(--ibm-ink);border-color:var(--ibm-ink);color:var(--ibm-white);}
.ibm-ft__biz{line-height:1.7;margin-top:14px !important;font-size:12px;color:var(--ibm-gray-500);}
.ibm-ft__biz a,.ibm-ft__biz a:link,.ibm-ft__biz a:visited{color:inherit;}
.ibm-ft__links{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;margin:16px 0 4px !important;}
.ibm-ft__links a,.ibm-ft__links a:link,.ibm-ft__links a:visited{font-size:12.5px;color:var(--ibm-gray-900);text-decoration:none;}
.ibm-ft__links li.b a{font-weight:800;}
.ibm-ft__sns{display:flex;gap:10px;margin:12px 0 10px !important;}
.ibm-ft__sns a{display:block;width:32px;height:32px;border-radius:50%;background:center/cover no-repeat;}
.ibm-ft__sns a.n{background-image:url('../images/icon_left_naver.png');}
.ibm-ft__sns a.b{background-image:url('../images/icon_left_blog.png');}
.ibm-ft__sns a.i{background-image:url('../images/icon_left_instagram.png');}
.ibm-ft__copy{font-size:11px;color:var(--ibm-gray-500);}
/* PC 왼쪽 패널 고객센터 */
.ibm-ft--left{background:transparent;padding:0;margin:20px 0 18px;max-width:360px;}
.ibm-ft--left .ibm-ft__btns a{min-height:40px;}

/* ---- 전화상담 : PC 는 번호 안내 레이어 + 복사 (ibm.ui.js) ---- */
.ibm-tel-layer{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1001;width:300px;max-width:calc(100vw - 32px);background:var(--ibm-white);border-radius:var(--ibm-r-lg);box-shadow:var(--ibm-shadow-2);padding:22px 20px 18px;font-family:var(--ibm-font-body);text-align:center;box-sizing:border-box;}
.ibm-tel-layer b{display:block;font-size:14px;color:var(--ibm-gray-700);font-weight:700;}
.ibm-tel-layer strong{display:block;margin:6px 0 4px;font-size:24px;font-weight:800;color:var(--ibm-ink);letter-spacing:-.5px;}
.ibm-tel-layer p{margin:0 0 14px;font-size:12px;color:var(--ibm-gray-500);}
.ibm-tel-layer .row{display:flex;gap:8px;}
.ibm-tel-layer .row button{flex:1;min-height:44px;border-radius:10px;border:1px solid var(--ibm-gray-300);background:var(--ibm-white);font:700 14px var(--ibm-font-body);cursor:pointer;color:var(--ibm-ink);}
.ibm-tel-layer .row button.copy{background:var(--ibm-ink);border-color:var(--ibm-ink);color:var(--ibm-white);}
.ibm-tel-dim{position:fixed;inset:0;background:rgba(17,17,17,.4);z-index:1000;}

/* ---- iframe 오버레이용 바텀시트 (.ibm-frame-sheet) ----
   사용법:
     <div class="ibm-frame-sheet" id="xxSheet" aria-hidden="true">
       <div class="ibm-frame-sheet__dim" data-frame-sheet-close="xxSheet"></div>
       <div class="ibm-frame-sheet__panel" role="dialog" aria-modal="true" aria-label="일정 선택">
         <div class="ibm-frame-sheet__head"><span class="ibm-frame-sheet__grab"></span><b class="ibm-frame-sheet__ttl">일정 선택</b>
           <button type="button" class="ibm-frame-sheet__close" data-frame-sheet-close="xxSheet" aria-label="닫기">×</button></div>
         <iframe class="ibm-frame-sheet__frame" src="about:blank" title="일정 선택"></iframe>
       </div>
     </div>
   JS: IBMUI.frameSheet.open("xxSheet", "/hotel/search_2?...", "일정 선택") / IBMUI.frameSheet.close("xxSheet")
   - .wrapper-right 안에 두면 PC 에서도 오른쪽 열 너비로 아래→위로 올라온다(열 밖이면 body 기준 max-width 480px 가운데).
   - 높이 90%, 상단 라운드 + 그랩바, 딤 클릭/ESC/× 로 닫힘. 닫히면 body 스크롤 복구. */
.ibm-frame-sheet{position:fixed;left:0;right:0;top:0;bottom:0;z-index:950;visibility:hidden;pointer-events:none;}
/* PC(>=992px): .wrapper-box 에 transform 이 있어 fixed 가 화면 기준이 아니다 → 오른쪽 열(.wrapper-right, position:relative) 기준 absolute.
   IBMUI.frameSheet / IBMUI.sheet 가 열 때 시트를 .wrapper-right 안으로 옮겨 준다. 모바일(<=991px)은 fixed 그대로. */
@media (min-width:992px){
  .wrapper-right > .ibm-frame-sheet{position:absolute;}
  .wrapper-right > .ibm-frame-sheet .ibm-frame-sheet__panel{max-width:none;}
  .wrapper-right > .ibm-sheet{position:absolute;max-width:none;}
  .wrapper-right > .ibm-sheet-dim{position:absolute;}
}
.ibm-frame-sheet.is-open{visibility:visible;pointer-events:auto;}
.ibm-frame-sheet__dim{position:absolute;inset:0;background:rgba(17,17,17,.45);opacity:0;transition:opacity var(--ibm-dur-slow) var(--ibm-ease);}
.ibm-frame-sheet.is-open .ibm-frame-sheet__dim{opacity:1;}
.ibm-frame-sheet__panel{position:absolute;left:0;right:0;bottom:0;height:90%;margin:0 auto;max-width:480px;background:var(--ibm-white);border-radius:var(--ibm-r-lg) var(--ibm-r-lg) 0 0;box-shadow:var(--ibm-shadow-2);display:flex;flex-direction:column;overflow:hidden;transform:translateY(100%);transition:transform var(--ibm-dur-slow) var(--ibm-ease);}
.ibm-frame-sheet.is-open .ibm-frame-sheet__panel{transform:translateY(0);}
.ibm-frame-sheet__head{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 48px 6px;border-bottom:1px solid var(--ibm-gray-200);flex:0 0 auto;}
.ibm-frame-sheet__grab{position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--ibm-gray-300);}
.ibm-frame-sheet__ttl{font:800 16px var(--ibm-font-body);color:var(--ibm-ink);}
.ibm-frame-sheet__close{position:absolute;right:4px;top:4px;width:44px;height:44px;border:0;background:transparent;font-size:24px;line-height:1;color:var(--ibm-ink);cursor:pointer;}
.ibm-frame-sheet__frame{flex:1;width:100%;border:0;display:block;background:var(--ibm-white);}

/* =========================================================
   2026-10-26 공통 알림·확인 대화상자 (master #modal-alert / #modal-confirm 및 .modal-box 공통)
   - 가운데 카드(라운드 16px) + 제목(첫 줄)·본문 + 버튼 2개(취소=회색, 확인=검정 / .active=빨강)
   - PC(>=992px): .wrapper-right 안에 있으면 오른쪽 열 기준으로 뜬다(.wrapper-box transform 때문에 fixed 대신 absolute).
     modalOpen() 으로 body 로 옮겨진 경우는 기존 --modal-left/--modal-width 계산을 그대로 쓴다.
   - 마크업·ID·onclick 변경 없음 (CSS 만)
   ========================================================= */
.modal-box[role="dialog"]{background:rgba(17,17,17,.45);}
@media (min-width:992px){
  .wrapper-right .modal-box[role="dialog"]{position:absolute;left:0 !important;right:0;width:100% !important;}
}
.modal-box[role="dialog"] .box,.modal-box[role="dialog"] .box :where(*){font-family:var(--ibm-font-body);}
.modal-box[role="dialog"] .box{border-radius:16px;box-shadow:0 12px 40px rgba(17,17,17,.18);font-family:var(--ibm-font-body);}
.modal-box[role="dialog"] .box:not(.basic):not(.bottom):not(.photo){width:calc(100% - 40px);max-width:360px;}
.modal-box[role="dialog"] .box:not(.basic):not(.bottom):not(.photo) .modal-body{padding:28px 22px 22px;}
.modal-box[role="dialog"] .modal-body > p{margin:0;font-family:var(--ibm-font-body);font-size:15px;font-weight:500;line-height:1.6;color:var(--ibm-gray-700);word-break:keep-all;letter-spacing:-.2px;}
.modal-box[role="dialog"] .modal-body > p:first-of-type{margin:0;}
#modal_alertMessage::first-line,#modal_confirmMessage::first-line{font-size:17px;font-weight:800;color:var(--ibm-ink);}
.modal-box[role="dialog"] .box.bottom{border-radius:16px 16px 0 0;bottom:0;}
.modal-box[role="dialog"] .box.bottom:before{content:"";display:block;width:40px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--ibm-gray-300);flex:0 0 auto;}
.modal-box[role="dialog"] .modal-foot .foot-button{display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px;padding:0 20px 20px;box-sizing:border-box;}
.modal-box[role="dialog"] .box.basic .modal-foot .foot-button{padding:0 10px 10px;}
.modal-box[role="dialog"] .modal-foot .foot-button > *{flex:1 1 0 !important;min-width:0;height:52px;padding:0 12px;border-radius:12px;border:0;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;font-family:var(--ibm-font-body);font-size:16px;font-weight:800;letter-spacing:-.2px;text-decoration:none;cursor:pointer;}
.modal-box[role="dialog"] .modal-foot .foot-button > .lightgray,.modal-box[role="dialog"] .modal-foot .foot-button > .cancel{background:var(--ibm-gray-100);color:var(--ibm-gray-900) !important;}
.modal-box[role="dialog"] .modal-foot .foot-button > .gray,.modal-box[role="dialog"] .modal-foot .foot-button > .lightgray:only-child{background:var(--ibm-ink);color:var(--ibm-white) !important;}
.modal-box[role="dialog"] .modal-foot .foot-button > .active{background:var(--ibm-brand-strong);color:var(--ibm-white) !important;}
.modal-box[role="dialog"] .modal-foot .foot-button > *:focus{outline:none;}
.modal-box[role="dialog"] .modal-foot .foot-button > *:focus-visible{outline:2px solid var(--ibm-ink);outline-offset:2px;}

/* ===== 2026-10-28 전화문의·카톡문의 버튼 색 통일 (전화 = 핑크 / 카톡 = 카카오 노랑) ===== */
.ibm-ft__btns a[href^="tel:"],
.ibm-ft__btns a[href^="tel:"]:link,
.ibm-ft__btns a[href^="tel:"]:visited,
.ibm-cs__team a[href^="tel:"],
.ibm-cs__team a[href^="tel:"]:link,
.ibm-cs__team a[href^="tel:"]:visited,
.co-card .row a[href^="tel:"],
.co-card .row a[href^="tel:"]:link,
.co-card .row a[href^="tel:"]:visited,
.r4-cs a[href^="tel:"],
.r4-cs a[href^="tel:"]:link,
.r4-cs a[href^="tel:"]:visited,
.bc-cs a[href^="tel:"],
.bc-cs a[href^="tel:"]:link,
.bc-cs a[href^="tel:"]:visited,
.ibm-rsv-hint--box a[href^="tel:"],
.ibm-rsv-hint--box a[href^="tel:"]:link,
.ibm-rsv-hint--box a[href^="tel:"]:visited,
.faq-cs a[href^="tel:"],
.faq-cs a[href^="tel:"]:link,
.faq-cs a[href^="tel:"]:visited,
a#faqCsTel,
a#faqCsTel:link,
a#faqCsTel:visited,
.ibm-btn.is-tel,
.ibm-btn.is-tel:link,
.ibm-btn.is-tel:visited{background:#f7677c!important;border-color:#f7677c!important;color:#111!important;font-weight:800} /* 2026-10-29 흰 글자 2.9:1 → 검은 글자 6.5:1 (핑크 배경 유지) */
.ibm-ft__btns a[href*="pf.kakao.com"],
.ibm-ft__btns a[href*="pf.kakao.com"]:link,
.ibm-ft__btns a[href*="pf.kakao.com"]:visited,
.ibm-cs__team a[href*="pf.kakao.com"],
.ibm-cs__team a[href*="pf.kakao.com"]:link,
.ibm-cs__team a[href*="pf.kakao.com"]:visited,
.co-card .row a[href*="pf.kakao.com"],
.co-card .row a[href*="pf.kakao.com"]:link,
.co-card .row a[href*="pf.kakao.com"]:visited,
.r4-cs a[href*="pf.kakao.com"],
.r4-cs a[href*="pf.kakao.com"]:link,
.r4-cs a[href*="pf.kakao.com"]:visited,
.bc-cs a[href*="pf.kakao.com"],
.bc-cs a[href*="pf.kakao.com"]:link,
.bc-cs a[href*="pf.kakao.com"]:visited,
.ibm-rsv-hint--box a[href*="pf.kakao.com"],
.ibm-rsv-hint--box a[href*="pf.kakao.com"]:link,
.ibm-rsv-hint--box a[href*="pf.kakao.com"]:visited,
.faq-cs a[href*="pf.kakao.com"],
.faq-cs a[href*="pf.kakao.com"]:link,
.faq-cs a[href*="pf.kakao.com"]:visited,
a#faqCsKakao,
a#faqCsKakao:link,
a#faqCsKakao:visited,
.ibm-btn.is-kakao,
.ibm-btn.is-kakao:link,
.ibm-btn.is-kakao:visited{background:#fee500!important;border-color:#fee500!important;color:#191919!important;font-weight:800}

/* 2026-10-30 안내 박스 문장 안 전화·카톡 링크 : 형광펜처럼 보이던 것 → 작은 알약 */
.ibm-rsv-hint--box a[href^="tel:"],.ibm-rsv-hint--box a[href*="pf.kakao.com"]{display:inline-block;padding:1px 8px;margin:0 1px;border-radius:999px;line-height:1.5;text-decoration:none;font-size:.95em;vertical-align:baseline}

/* 2026-10-30 가로 스크롤 칩 줄 화살표 (asset/js/ibm.extra.js 끝 : 줄 뒤 형제 .ibm-hsx 를 줄 위치에 띄움) */
.ibm-hsx{position:absolute;display:none;pointer-events:none;z-index:3}
.ibm-hsx.is-l,.ibm-hsx.is-r{display:block}
.ibm-hsx__arr{position:absolute;top:50%;display:none;align-items:center;justify-content:center;width:30px;height:30px;margin-top:-15px;padding:0 0 2px;border-radius:50%;border:1px solid #d4d4d4;background:rgba(255,255,255,.96);color:#111;font-size:20px;font-weight:700;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.14);cursor:pointer;font-family:inherit;pointer-events:auto}
.ibm-hsx__arr.l{left:-2px}
.ibm-hsx__arr.r{right:-2px}
.ibm-hsx.is-l .ibm-hsx__arr.l,.ibm-hsx.is-r .ibm-hsx__arr.r{display:inline-flex}
.ibm-hsx__arr:hover{border-color:#111}
.ibm-hsx-drag{cursor:grabbing;user-select:none}

/* 2026-10-30 입력 검증 알림 뒤 문제 칸 강조 (common.js IBMInvalid) */
.ibm-invalid-flash{outline:2px solid #e5484d !important;outline-offset:2px;box-shadow:0 0 0 4px rgba(229,72,77,.18) !important;animation:ibmInvalidPulse .5s ease 2}
@keyframes ibmInvalidPulse{0%,100%{outline-color:#e5484d}50%{outline-color:rgba(229,72,77,.35)}}
@media (prefers-reduced-motion:reduce){.ibm-invalid-flash{animation:none}}