/**
 * Mark Oversea Page Redesign - CSS
 * Scoped to .mark-redesign .mark-oversea-page to avoid conflicts
 * Includes responsive design for Desktop/Tablet/Mobile
 */

/* ========================================
   0. Channel Talk (채널톡) Fix
   ======================================== */

/* body와 html에 채널톡을 위한 공간 확보 */
body.mark-redesign,
html {
  position: relative !important;
}

/* 채널톡 버튼 z-index 최상위 유지 */
#ch-plugin {
  z-index: 999999 !important;
  position: fixed !important;
}

/* 채널톡 메신저 컨테이너 */
#ch-plugin-launcher,
#ch-plugin-core {
  z-index: 999999 !important;
}

/* 데스크톱 및 태블릿: 기본 채널톡 동작 유지 */
@media (min-width: 768px) {
  #ch-plugin iframe {
    /* 채널톡 기본 스타일 유지 */
  }
}

/* 모바일에서만 전체 화면 채팅창 */
@media (max-width: 767px) {
  #ch-plugin {
    right: 0 !important;
    bottom: 0 !important;
  }

  #ch-plugin iframe {
    max-width: 100vw !important;
  }

  /* 모바일에서 채팅창 전체 화면 사용 */
  #ch-plugin iframe[name="ch-plugin-messenger-frame"] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    position: fixed !important;
  }
}

/* ========================================
   1. Global Scoping & Reset
   ======================================== */

.mark-redesign .mark-oversea-page {
  font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
  color: #111827;
  background: #FFFFFF;
  line-height: 1.5;
}

.mark-redesign .mark-oversea-page * {
  box-sizing: border-box;
}

.mark-redesign .mark-oversea-page *::before,
.mark-redesign .mark-oversea-page *::after {
  box-sizing: border-box;
}

/* ========================================
   2. Container Layout
   ======================================== */

.mark-oversea-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 32px 64px; /* Small top padding for visual spacing on desktop */
}

/* ========================================
   3. Tabs Component
   ======================================== */

.oversea-tabs {
  display: flex;
  border-bottom: 1px solid #E5E7EB;
  margin-bottom: 48px;
  gap: 0;
}

.oversea-tab {
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 600;
  color: #6B7280;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.oversea-tab:hover {
  color: #9810FA;
}

.oversea-tab.active {
  color: #9810FA;
  border-bottom-color: #9810FA;
}

.oversea-tab-content {
  display: none;
}

.oversea-tab-content:first-of-type {
  display: block;
}

/* ========================================
   4. Page Header
   ======================================== */

.oversea-page-header {
  margin-bottom: 32px;
}

.oversea-page-title {
  font-size: 40px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.oversea-page-subtitle {
  font-size: 16px;
  color: #6B7280;
  margin: 0;
  line-height: 1.5;
  font-weight: 400;
}

/* ========================================
   5. Info Card
   ======================================== */

.oversea-info-card {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
}

.oversea-info-card p {
  font-size: 16px;
  line-height: 24px;
  color: #374151;
  margin: 0;
  font-weight: 400;
}

.oversea-info-card p + p {
  margin-top: 12px;
}

/* ========================================
   6. Country Selector
   ======================================== */

.oversea-country-selector {
  margin-bottom: 32px;
}

.oversea-country-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.oversea-country-select {
  width: 200px;
  height: 48px;
  padding: 12px 16px;
  padding-right: 40px;
  font-size: 16px;
  color: #111827;
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  font-weight: 500;
}

.oversea-country-select:hover {
  border-color: #9810FA;
}

.oversea-country-select:focus {
  outline: none;
  border-color: #9810FA;
  box-shadow: 0 0 0 3px rgba(152, 16, 250, 0.1);
}

/* Country sections */
.country-section {
  display: none;
}

/* ========================================
   7. Service Card
   ======================================== */

.oversea-service-card {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.oversea-service-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.oversea-service-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.oversea-pricing-table {
  width: 100%;
}

.oversea-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #F3F4F6;
}

.oversea-pricing-row:last-child {
  border-bottom: none;
}

.oversea-pricing-label {
  font-size: 16px;
  color: #374151;
  font-weight: 500;
}

.oversea-pricing-value {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

/* ========================================
   8. Note Card
   ======================================== */

.oversea-note-card {
  background: #F3F4F6;
  border-left: 4px solid #9810FA;
  border-radius: 8px;
  padding: 20px;
  margin-top: 24px;
}

.oversea-note-card p {
  font-size: 14px;
  line-height: 22px;
  color: #4B5563;
  margin: 0;
}

.oversea-note-card p + p {
  margin-top: 12px;
}

.oversea-note-card strong {
  font-weight: 600;
  color: #374151;
}

/* ========================================
   9. Madrid Section
   ======================================== */

.madrid-fee-section {
  margin-bottom: 32px;
}

.madrid-fee-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 16px 0;
}

.madrid-country-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.madrid-country-table th {
  text-align: left;
  padding: 12px;
  background: #F9FAFB;
  border-bottom: 2px solid #E5E7EB;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.madrid-country-table td {
  padding: 12px;
  border-bottom: 1px solid #F3F4F6;
  font-size: 14px;
  color: #111827;
}

.madrid-country-table tr:last-child td {
  border-bottom: none;
}

.madrid-country-table td:first-child {
  font-weight: 500;
}

.madrid-country-table td:last-child {
  font-weight: 600;
  color: #111827;
}

/* Madrid fee cards */
.oversea-service-card .madrid-fee-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.oversea-service-card .madrid-fee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #F3F4F6;
}

.oversea-service-card .madrid-fee-item:last-child {
  border-bottom: none;
}

.oversea-service-card .madrid-fee-label {
  font-size: 16px;
  color: #374151;
  font-weight: 500;
}

.oversea-service-card .madrid-fee-value {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  text-align: right;
}

/* ========================================
   10. Responsive - Tablet (768px ~ 1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .mark-oversea-container {
    max-width: 768px;
    padding: 24px 24px 48px; /* Small top padding for visual spacing on tablet */
  }

  .oversea-page-title {
    font-size: 32px;
  }

  .oversea-page-subtitle {
    font-size: 15px;
  }

  .oversea-service-card {
    padding: 24px;
  }

  .oversea-service-title {
    font-size: 20px;
  }

  .oversea-pricing-value {
    font-size: 18px;
  }

  .oversea-pricing-label {
    font-size: 15px;
  }
}

/* ========================================
   11. Responsive - Mobile (~ 767px)
   ======================================== */

@media (max-width: 767px) {
  .mark-oversea-container {
    padding: 0 16px 32px; /* Removed top padding: handled by .mark-redesign */
  }

  .oversea-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .oversea-tabs::-webkit-scrollbar {
    display: none;
  }

  .oversea-tab {
    font-size: 16px;
    padding: 12px 20px;
    white-space: nowrap;
  }

  .oversea-page-header {
    margin-bottom: 24px;
  }

  .oversea-page-title {
    font-size: 28px;
  }

  .oversea-page-subtitle {
    font-size: 14px;
  }

  .oversea-info-card {
    padding: 20px;
    margin-bottom: 24px;
  }

  .oversea-info-card p {
    font-size: 15px;
    line-height: 22px;
  }

  .oversea-country-selector {
    margin-bottom: 24px;
  }

  .oversea-country-select {
    width: 100%;
  }

  .oversea-service-card {
    padding: 20px;
    margin-bottom: 20px;
  }

  .oversea-service-title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .oversea-pricing-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0;
  }

  .oversea-pricing-label {
    font-size: 15px;
  }

  .oversea-pricing-value {
    font-size: 18px;
  }

  .oversea-note-card {
    padding: 16px;
    margin-top: 20px;
  }

  .oversea-note-card p {
    font-size: 13px;
    line-height: 20px;
  }

  .madrid-fee-title {
    font-size: 18px;
  }

  .madrid-country-table {
    font-size: 12px;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .madrid-country-table::-webkit-scrollbar {
    height: 6px;
  }

  .madrid-country-table::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3px;
  }

  .madrid-country-table thead {
    display: table-header-group;
  }

  .madrid-country-table tbody {
    display: table-row-group;
  }

  .madrid-country-table tr {
    display: table-row;
  }

  .madrid-country-table th,
  .madrid-country-table td {
    display: table-cell;
    padding: 8px;
    min-width: 100px;
  }

  .oversea-service-card .madrid-fee-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0;
  }

  .oversea-service-card .madrid-fee-label {
    font-size: 15px;
  }

  .oversea-service-card .madrid-fee-value {
    font-size: 18px;
    text-align: left;
  }
}