@charset "UTF-8";
* {
  font-family: 'Pretendard GOV', sans-serif;
  box-sizing: border-box;
  text-underline-offset: 1px;
  text-underline-position: under;
}
html { font-size: 62.5%; scroll-behavior: smooth; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.2; }
h1 { font-size: 2.5em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.9em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.3em; }
h6 { font-size: 1em; }
p { line-height: 1.4; }
strong { font-weight: 800; }
small { font-size: 0.8em; }
ol, ul, dl, dt, dd { margin: 0; padding: 0; list-style: none; line-height: 1.4; }
address { font-style: normal; }
img { display: block; block-size: auto; max-block-size: 100%; max-inline-size: 100%; }
table { border-collapse: collapse; }

body {
  display: grid;
  grid-template-columns: [full-container-start] 1fr [container-start] min(100% - 10px, 1000px) [container-end] 1fr [full-container-end];
  grid-template-rows: auto 1fr auto;
  justify-content: center;
  gap: 2em;

  padding-block: 3em;

  font-size: clamp(1.6rem, 1.45rem + 0.2dvw, 1.8rem);
  min-block-size: 100svh;
  line-height: 1;

  background-color: #ffffff;
  background-image:
    radial-gradient(ellipse 150% 25rem at 50% 100%, #6cbdeb 0%, #6cbdeb 49.8%, transparent 50%),
    linear-gradient(to bottom, #94e5ff 0%, #94e5ff 100%);
  background-repeat: no-repeat;
  background-size: 100% 45rem, 100% 45rem;
}
body > header { grid-column: container; display: grid; gap: 1.5em; text-align: center; }
body > main { grid-column: container; }
body > footer { grid-column: container; border-block-start: 1px solid #cccccc; margin-block-start: 3em; padding-block-start: 2em; }

header .logos { display: grid; gap: 0.8em; inline-size: 25rem; margin-inline: auto; }
header .maker { display: flex; justify-content: center; gap: 0.8em; block-size: 6rem; }
header .old-title { font-size: 1em; font-weight: 800; color: #666666;  }

header > nav { display: grid; place-items: center; }
header > nav > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em clamp(1rem, 3dvw, 3rem);
  font-size: clamp(1.5rem, 3dvw, 3rem);
  font-weight: 800;
}
header > nav > ul a { color: #666666; text-decoration: none; }
header > nav > ul a:where(:focus, :hover, :active) { color: #000000; }
header > nav > ul a.active { color: #000000; text-decoration: underline; }

.temp-notice {
  margin-inline: auto;
  padding: 1em;
  font-weight: 600;
  inline-size: min(100%, 60rem);
  border: 0.5rem solid #59a2cc;
}
.temp-notice-title { color: #b52a2d; margin-block-end: 0.5em; font-weight: 800; font-size: 1.2em; }
.temp-notice-title ~ p { text-wrap: balance; word-break: break-word; overflow-wrap: break-word; margin-block-end: 1em;  }
.temp-notice-contact { display: inline-grid; gap: 0.3em; text-align: start; font-size: 0.9em; margin-inline: auto; font-weight: 400; }

.rate-box {
  margin-inline: auto;
  padding: 1em;
  inline-size: min(100%, 60rem);
  background-color: #f2f2f2;
  border-radius: 1em;
  box-shadow: 0 .3rem .1rem -0.2rem hsl(0 0% 0% / 20%), 0 .2rem .2rem 0 hsl(0 0% 0% / 14%), 0 .1rem .5rem 0 hsl(0 0% 0% / 12%);
}
.rate { text-align: center; }
.rate-title { font-weight: 600; font-size: 1em; text-align: center; margin-block-end: 0.5em; }
.rate-value { font-size: 2em; }
.rate-none { font-size: 1.5em; font-weight: 300; }
.rate-desc { font-weight: 200; font-size: 0.9em; }
.rate-info { font-weight: 200; font-size: 0.75em; text-align: center; }

main > section { display: grid; gap: 1.5em; place-items: center; }

.promo { display: grid; gap: 0.5em; }

.section-title { font-size: 2em; font-weight: 800; }
.subsection-title { margin-block-end: -0.5em; text-wrap: balance; text-align: center; }

.car-image { inline-size: min(100%, 40rem); block-size: 20rem; overflow: hidden; }
.car-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 80%;
}

.underline { text-decoration: underline; }

table {
  width: auto;
  min-width: 100%;
  border-block-start: 0.3rem solid #cccccc;
  border-block-end: 0.3rem solid #cccccc;
  font-size: 0.9em;
  line-height: 1.4;
}
table caption { font-weight: 800; font-size: 1.2em; margin-block-end: 0.5em; }
table th, table td {
  padding: clamp(.8rem,.7rem + .2dvw,1.2rem);
  padding-block-end: calc(clamp(0.8rem, 0.7rem + 0.2dvw, 1.2rem) - .1rem);
  border: 0.1rem solid #cccccc;
}
table th {
  font-weight: 600;
  background-color: hsl(0deg 0% 0% / 5%);
  text-align: start;
  white-space: nowrap;
}
table tfoot { border-block-start: 0.3rem solid #cccccc;}
table .fit { inline-size: 1%; }
table .end { text-align: end; }
table [title] { text-decoration: underline dashed; text-underline-offset: 0; }
table.small { font-size: 0.8em; }

.table-container { inline-size: min(100%, 80rem); overflow-x: auto; }

.country { inline-size: 100%; display: grid; gap: 1em; }
.country-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .3em;
}
.country-title::before, .country-title::after {
  content: '';
  block-size: .1rem;
  background-color: #cccccc;
}

.center { padding-inline: 0.5em; }
.center summary { font-weight: 600; text-decoration: underline; cursor: pointer; }
.center dl {
  margin-block: 1em 0.5em;
  padding-inline-start: 1em;
  display: grid;
  grid-template-columns: minmax(auto, max-content) auto;
  gap: 0.5em 1em;
  font-size: 0.9em;
}
.center dt { font-weight: 200; white-space: nowrap; }

.process {
  margin-block-start: 1em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: 1em;
}
.process h6 { margin-block-end: 0.5em; }

.proc {
  margin-block-start: 1em;
  font-size: 0.85em;
  list-style-type: decimal;
  padding-inline-start: 1.2em;
  display: grid;
  gap: 0.5em;
}
.proc ul, .box ul { list-style-type: square; padding-inline-start: 1.2em; }

.emergency { border: 0.1rem solid red; padding: 1em; }
.step { margin-block: 1em; list-style-type: decimal; padding-inline-start: 1.2em; }

.box { border: 0.1rem solid #dddddd; padding: 1em; inline-size: 100%; }
.box-title { margin-block-end: 0.5em; }
.box-title:not(:first-of-type) { margin-block-start: 1em; }

.note { border: 0.1rem solid #dddddd; padding: 1em; inline-size: 100%; border-radius: 1em; }

hr { margin-block: 3em; block-size: 1px; background-color: #dddddd; border: 0; width: 100%; }

footer {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.7em;
  color: #a6a6a6;
  font-size: 0.8em;
}
footer > ul { display: flex; flex-flow: wrap; gap: .3em 1em; justify-content: center; }


.form-group { margin-block-end: 1.5em; display: grid; gap: 0.5em; }
.form-group label { font-weight: 600; font-size: 0.9em; }
.form-group select, .form-group input {
  padding: 0.8em;
  border: 0.1rem solid #cccccc;
  border-radius: 0.5em;
  font-size: 1em;
  inline-size: 100%;
}
.form-group select:disabled, .form-group input:disabled { background-color: #f2f2f2; cursor: not-allowed; }

/* --- 반응형 폼 그리드 (미디어 쿼리 불필요) --- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1em;
}

/* --- 견적 결과 리스트 스타일 --- */
#car-list { display: grid; gap: 1em; }
.quote-item {
  display: flex; align-items: center; padding: 1.5em; border: 0.1rem solid #eeeeee;
  border-radius: 0.8em; background-color: #ffffff; gap: 1.5em;
}
.quote-item img { inline-size: 150px; aspect-ratio: 16/9; object-fit: cover; scale: 1.3 }
.quote-item .car-info { flex: 1; }
.quote-item .car-name { font-size: 1.2em; font-weight: 800; margin-block-end: 0.3em; }
.quote-item .car-spec { color: #666666; font-size: 0.9em; }
.quote-item .car-price-zone { text-align: center; display: flex; flex-direction: column; gap: 0.3em; min-inline-size: 18rem;}
.quote-item .price-before { font-size: 0.9em; }
.quote-item .price-old { text-decoration: line-through; color: #999999; }
.quote-item .stock-status { font-size: 0.85em; font-weight: 700; margin-block-end: 2px; }
.quote-item .btn-reserve {
  padding: 0.8em 1.2em; border: none; border-radius: 0.5em; font-size: 1.2em; inline-size: 100%;
  background-color: #6cbdeb; color: #ffffff; font-weight: 800; cursor: pointer; text-align: center;
}
.quote-item .btn-reserve:disabled { background-color: #cccccc; cursor: not-allowed; }
.quote-item .btn-warning { background-color: #f39c12; color: #ffffff; } /* ask 상태 컬러 */

/* 모바일 대응 */
@media ( max-width: 768px ) {
  .quote-item { flex-direction: column; text-align: center; }
  .quote-item .car-price-zone { text-align: center; align-items: center; }
}


/* --- 예약 폼 추가 요소 및 옵션 선택 --- */
.form-group textarea, .form-group input[type='file'] {
  padding: 0.8em;
  border: 0.1rem solid #cccccc;
  border-radius: 0.5em;
  font-size: 1em;
  inline-size: 100%;
  font-family: inherit;
  background-color: #ffffff;
}
.option-item {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1.2em;
  border: 0.1rem solid #eeeeee;
  border-radius: 0.5em;
  margin-block-end: 0.8em;
  background-color: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.option-item:hover { border-color: #6cbdeb; }
.option-item input[type='checkbox'] { inline-size: 1.5em; block-size: 1.5em; cursor: pointer; }
.option-item .opt-info { flex: 1; }
.option-item .opt-price { font-weight: 800; color: #b52a2d; font-size: 1.1em; }

.selected-summary {
  margin-block-end: 2.5em;
  padding: clamp(10px, 2dvw, 30px);
  font-size: clamp(0.9em, 0.8em + 0.2dvw, 1.1em);
  background-color: #f8f9fa;
  border-radius: 0.8em;
  border: 0.1rem solid #dddddd;
}

.booking-notice {
  margin-block-start: 1.5em; padding: 1.2em; background-color: #eef7fc; border-radius: 0.5em; font-size: 0.9em; color: #333333; line-height: 1.5; font-size: 1.2em; text-wrap: balance; word-break: break-word; overflow-wrap: break-word; font-weight: 600; text-align: center;
}

.insurance-countries { display: flex; flex-wrap: wrap; gap: 0.3em 0.5em; }
.insurance-countries-note { list-style-type: decimal; padding-inline-start: 1.4em; line-height: 1.5; font-size: 0.9em; margin-block-start: 0.8em; }
.insurance-countries-note > li { margin-block-end: 0.3em; }

#guide { display: flex; flex-direction: column; gap: 2.5em; }
#guide > section { inline-size: 100%; }
#guide > section h4 { margin-block-end: 0.5em; }
#guide > section h4 + p { font-size: 1.1em; margin-block-end: 0.5em; }

#guide > section ul { list-style-type: disc; padding-inline-start: 1.4em; }
#guide > section ol { list-style-type: decimal; padding-inline-start: 1.4em; }
#guide > section :where(ul, ol) > li:not(:last-child) { margin-block-end: 0.3em; }
#guide > section blockquote {
  font-size: 0.9em; color: #555555; border-left: 0.3em solid #cccccc; padding-left: 1em; margin: 1.5em 0 0 0;
}
#guide > section blockquote > h6 { margin-block-end: 0.5em; font-size: 1em }

:where(th, td).plan {
  color: #2364ad;
  background-color: hsla(199, 100%, 50%, 0.1);
  font-weight: 700;
}

.guide-table-container {
  display: block;
  inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}