.converter-page .converter-section,
.converter-page .converter-table-section { background: var(--soft-gray); }
.converter-page .converter-intro { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 32px; text-align: center; }
.converter-page .converter-intro > div { width: 100%; max-width: 866px; }
.converter-page .converter-intro h1 { font-size: 48px; line-height: 1.15; text-wrap: balance; }
.converter-page .converter-intro p { margin-top: 24px; }
.converter-page .converter-intro p:not(.converter-subtitle) { max-width: 644px; margin-inline: auto; }
.converter-page .converter-intro .converter-subtitle { color: var(--navy); font-size: 24px; font-weight: 600; }
.converter-page .converter-icon { width: min(300px, 100%); height: auto; margin-inline: auto; filter: drop-shadow(18px 46px 12px rgb(0 0 0 / 6.5%)) drop-shadow(5px 5px 12px rgb(0 0 0 / 6.4%)); }
.converter-page .converter-card { max-width: 866px; margin: 48px auto 0; padding: 48px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.converter-page .converter-card h2 { font-size: 30px; text-align: left; }
.converter-page .converter-explanation { margin-top: 24px; }
.converter-page #time-converter { margin-top: 32px; }
.converter-page .converter-modes { min-width: 0; margin: 0; padding: 0; border: 0; }
.converter-page .converter-modes legend,
.converter-page .converter-field > label { margin-bottom: 12px; padding: 0; font-size: 16px; font-weight: 600; }
.converter-page .converter-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; border-radius: 16px; background: var(--soft-gray); }
.converter-page .converter-mode-options label { position: relative; display: block; cursor: pointer; }
.converter-page .converter-mode-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.converter-page .converter-mode-options input + span { display: flex; min-height: 88px; height: 100%; flex-direction: column; justify-content: center; gap: 4px; padding: 16px; border: 1px solid transparent; border-radius: 12px; font-size: 16px; }
.converter-page .converter-mode-options input:checked + span { border-color: var(--blue); background: var(--button-blue); }
.converter-page .converter-mode-options input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
.converter-page .converter-field { display: flex; flex-direction: column; margin-block: 32px 24px; }
.converter-page .converter-field input { width: 100%; min-width: 0; min-height: 72px; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--text) 30%, var(--white)); border-radius: 12px; color: var(--navy); background: var(--white); font: inherit; font-size: 30px; font-variant-numeric: tabular-nums; }
.converter-page .converter-field input::placeholder { color: var(--text); opacity: 1; }
.converter-page #converter-hint { margin-top: 12px; font-size: 14px; }
.converter-page #converter-error { color: #9b3344; font-size: 16px; }
.converter-page #converter-error:not(:empty) { margin-top: 12px; }
.converter-page .converter-field input[aria-invalid="true"] { border-color: #9b3344; }
.converter-page .converter-result { margin-top: 32px; padding: 24px; border-radius: 16px; background: var(--pale-blue); }
.converter-page .converter-result > span { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.converter-page .converter-result output { display: block; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.converter-page .converter-result.has-result output { font-size: 30px; line-height: 1.3; font-weight: 700; }
.converter-page .converter-noscript { margin-top: 24px; }
.converter-page .converter-table-intro { max-width: 644px; margin: 24px auto 0; text-align: center; }
.converter-page .converter-table-card { max-width: 644px; margin: 40px auto 0; overflow: hidden; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.converter-page .converter-table-card table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; text-align: left; }
.converter-page .converter-table-card :is(th, td) { padding: 12px 24px; }
.converter-page .converter-table-card thead { background: var(--button-blue); }
.converter-page .converter-table-card tbody th { font-weight: 500; }
.converter-page .converter-table-card tbody tr + tr { border-top: 1px solid var(--soft-gray); }
.converter-page .converter-table-card tbody tr:nth-child(even) { background: color-mix(in srgb, var(--soft-gray) 50%, var(--white)); }
.converter-page .converter-tip { display: flex; align-items: flex-start; gap: 32px; padding: 40px; border-radius: var(--radius); background: var(--pale-blue); }
.converter-page .converter-tip > img { flex: none; width: 80px; height: auto; }
.converter-page .converter-tip h2 { text-align: left; }
.converter-page .converter-tip p { margin-top: 24px; }
.converter-page .converter-tip a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.converter-page .converter-review { width: min(644px, calc(100% - 2 * var(--gutter))); max-height: calc(100dvh - 48px); padding: 56px 40px 40px; border: 0; border-radius: var(--radius); color: var(--navy); background: var(--white); box-shadow: var(--shadow); text-align: center; }
.converter-page .converter-review::backdrop { background: color-mix(in srgb, var(--navy) 45%, transparent); }
.converter-page:has(.converter-review[open]) { overflow: hidden; }
.converter-page .converter-review h2 { font-size: 30px; }
.converter-page .converter-review p { margin-top: 24px; }
.converter-page .converter-review > img { margin: 32px auto; }
.converter-page .converter-review .button { display: flex; width: fit-content; min-width: 240px; max-width: 100%; margin-inline: auto; white-space: normal; }
.converter-page .converter-review .converter-review-close { margin-top: 16px; color: var(--blue); background: var(--white); box-shadow: inset 0 0 0 1px var(--blue); }
.converter-page .converter-review-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #b5b5b5; background: var(--soft-gray); font-size: 26px; line-height: 1; }

@media (hover: hover) {
  .converter-page .converter-mode-options label:hover input:not(:checked) + span { background: var(--white); }
}

@media (max-width: 767px) {
  .converter-page .converter-intro h1 { font-size: 36px; }
  .converter-page .converter-intro .converter-subtitle { font-size: 22px; }
  .converter-page .converter-card { margin-top: 32px; padding: 24px; }
  .converter-page .converter-card h2,
  .converter-page .converter-review h2 { font-size: 26px; }
  .converter-page .converter-result.has-result output { font-size: clamp(22px, 6vw, 26px); }
  .converter-page .converter-mode-options { grid-template-columns: minmax(0, 1fr); }
  .converter-page .converter-mode-options input + span { min-height: 80px; }
  .converter-page .converter-field input { font-size: 26px; }
  .converter-page #time-converter > .button { width: 100%; }
  .converter-page .converter-result { padding: 20px; }
  .converter-page .converter-table-card :is(th, td) { padding: 12px 16px; font-size: 16px; }
  .converter-page .converter-tip { flex-direction: column; gap: 24px; padding: 24px; }
  .converter-page .converter-tip > img { width: 64px; }
  .converter-page .converter-review { padding: 56px 24px 24px; }
  .converter-page .converter-review .button { width: 100%; min-width: 0; }
}