/* ============================================================
   ibm.tokens.css — 일본만 자사몰 디자인 토큰 (2026-10-18 초안)
   ※ 아직 어떤 마스터에도 연결하지 않았다. 기존 화면 영향 0.
   적용 순서(권장):
     1) main/hotel/ship/tour.Master 에서 common.css 보다 "앞"에 링크
     2) 새로 만드는 화면·섹션부터 var(--ibm-*) 사용
     3) 기존 하드코딩 색(#f86e65/#fa6377/#e0473f/#f00 …)은 화면 단위로 치환
   ============================================================ */
:root{
  /* ---- 브랜드 ---- */
  --ibm-brand:        #f86e65;  /* 코랄: 배경·아이콘·장식용 (흰 글자 대비 2.8:1 → 작은 글자 버튼엔 쓰지 말 것) */
  --ibm-brand-strong: #d93b33;  /* 코랄 진하게: 흰 글자 버튼/가격 강조 (대비 4.5:1 통과) */
  --ibm-brand-soft:   #fff3f1;  /* 코랄 옅은 배경 */
  --ibm-brand-line:   #ffd6d3;
  --ibm-ink:          #111111;  /* 본문 제목/검정 버튼 */

  /* ---- 의미색 ---- */
  --ibm-sea:          #1a4d8f;  /* 선박·정보 (카테고리 배지 등) */
  --ibm-sea-soft:     #eef3fa;
  --ibm-ok:           #1e8e5a;  /* 운항 원활·예약가능 */
  --ibm-warn:         #b7791f;  /* 주의 */
  --ibm-danger:       #d32f2f;  /* 결항·취소수수료 (#f00, #e53935 통일) */

  /* ---- 회색 (10여 종 → 7단계) ---- */
  --ibm-gray-900: #1a1a1a;
  --ibm-gray-700: #555555;   /* 보조 본문 */
  --ibm-gray-500: #767676;   /* 흰 배경 위 최소 가독 회색 (4.5:1) — #999/#aaa 대체 */
  --ibm-gray-300: #d4d4d4;   /* 구분선·비활성 */
  --ibm-gray-200: #ececec;   /* 카드 테두리 */
  --ibm-gray-100: #f6f6f6;   /* 섹션 배경 */
  --ibm-white:    #ffffff;

  /* ---- 타이포 (Pretendard 본문 / Paperlogy 는 헤드라인 전용 권장) ---- */
  --ibm-font-body: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ibm-font-display: "Paperlogy", var(--ibm-font-body);
  --ibm-fs-xs: 12px;   /* 캡션·각주 (11px 이하 금지) */
  --ibm-fs-sm: 13px;
  --ibm-fs-md: 15px;   /* 기본 본문 */
  --ibm-fs-lg: 18px;   /* 섹션 제목 */
  --ibm-fs-xl: 22px;   /* 페이지 제목 */
  --ibm-fs-2xl: 28px;  /* 히어로 헤드라인 */
  --ibm-lh-tight: 1.35;
  --ibm-lh-body: 1.6;

  /* ---- 간격 (4px 배수) ---- */
  --ibm-sp-1: 4px;  --ibm-sp-2: 8px;  --ibm-sp-3: 12px; --ibm-sp-4: 16px;
  --ibm-sp-5: 20px; --ibm-sp-6: 24px; --ibm-sp-8: 32px; --ibm-sp-10: 40px;
  --ibm-gutter: 16px;          /* 화면 좌우 여백 */
  --ibm-section-gap: 40px;     /* 메인 섹션 사이 */

  /* ---- 모서리 (5/8/10/12/50px 혼재 → 4단계) ---- */
  --ibm-r-sm: 6px;   /* 배지·작은 버튼 */
  --ibm-r-md: 10px;  /* 버튼·입력 */
  --ibm-r-lg: 14px;  /* 카드 */
  --ibm-r-pill: 999px;

  /* ---- 그림자 ---- */
  --ibm-shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --ibm-shadow-2: 0 4px 16px rgba(0,0,0,.08);

  /* ---- 모션 ---- */
  --ibm-ease: cubic-bezier(.2,.7,.2,1);
  --ibm-dur-fast: 120ms;   /* 버튼 눌림 */
  --ibm-dur: 200ms;        /* 탭·토글·카드 hover */
  --ibm-dur-slow: 320ms;   /* 바텀시트·모달 */

  /* ---- 터치 ---- */
  --ibm-tap-min: 44px;
}

/* 접근성: 키보드 포커스 표시 (현재 outline:none) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--ibm-sea);
  outline-offset: 2px;
}

/* 모션 줄이기 설정 존중 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 공용 컴포넌트 (새 화면용, 접두사 ibm-) ---- */
.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;
  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:#fff;}
.ibm-btn--dark{background:var(--ibm-ink);color:#fff;}
.ibm-btn--ghost{background:#fff;color:var(--ibm-gray-900);box-shadow:inset 0 0 0 1px var(--ibm-gray-300);}

.ibm-card{background:#fff;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);} }

.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);}

.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;}

.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;}

/* 스켈레톤 (배너·카드 로딩 자리 — CLS 방지용) */
.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%}}