.cflow { list-style: none; display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; margin: 0 0 22px; padding: 0; color: var(--muted); font-size: 14px; }
.cflow__step { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cflow__step + .cflow__step::before { content: ""; flex: 0 0 auto; width: 36px; height: 2px; margin: 0 2px 0 10px; border-radius: 1px; background: var(--line-strong); }
.cflow__step.is-done + .cflow__step::before { background: var(--indigo); }
.cflow__dot { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--muted); font-family: var(--f-brand); font-size: 13px; font-weight: 600; line-height: 1; }
.cflow__step.is-done { color: var(--indigo-ink); }
.cflow__step.is-done .cflow__dot { border-color: var(--indigo-line); background: var(--indigo-soft); color: var(--indigo-ink); }
.cflow__step.is-now { color: var(--ink); font-weight: 700; }
.cflow__step.is-now .cflow__dot { border-color: var(--ball); background: var(--ball); color: #fff; box-shadow: 0 0 0 5px var(--ball-glow); }
.cflow--center { justify-content: center; }

.cnote { padding: 14px 16px; border-left: 3px solid var(--indigo); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--indigo-softer); }
.cnote__t { color: var(--indigo-ink); font-size: 15px; font-weight: 700; line-height: 1.6; }
.cnote__text { margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.8; }
.cagree { display: flex; align-items: flex-start; gap: 8px 10px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: #fff; color: var(--ink); font-size: 15px; cursor: pointer; }
.cagree input { flex: 0 0 auto; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--indigo); }
.cagree > span { flex: 1 1 auto; min-width: 0; line-height: 1.7; }
.cagree a { font-weight: 500; }
.cagree em { padding: 1px 7px; border-radius: var(--r-sm); background: var(--indigo-soft); color: var(--indigo-ink); font-size: 11.5px; font-style: normal; font-weight: 500; }
.cagree:has(input:checked) { border-color: var(--indigo); background: var(--indigo-softer); }
.cagree small { display: inline-block; margin-left: 2px; color: var(--muted); font-size: 12px; }
.chp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

[data-sample][hidden] { display: none !important; }
.calert { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border: 1.5px solid var(--navy); border-radius: var(--r-lg); background: #fff; color: var(--navy); }
.calert:focus { outline: 3px solid var(--ring); outline-offset: 2px; }
.calert::before, .cerr::before { content: "!"; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--f-brand); font-weight: 700; line-height: 1; }
.calert::before { width: 24px; height: 24px; margin-top: 1px; font-size: 14px; }
.calert__t { font-size: 15px; font-weight: 700; line-height: 1.6; }
.calert__list { margin: 4px 0 0; padding-left: 1.2em; list-style: disc; font-size: 14px; line-height: 1.85; }
.calert__list a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cerr { display: flex; align-items: flex-start; gap: 8px; color: var(--navy); font-size: 13.5px; font-weight: 700; line-height: 1.7; overflow-wrap: anywhere; }
.cerr::before { width: 18px; height: 18px; margin-top: 2px; font-size: 12px; }
.form input[aria-invalid="true"]:not([type=checkbox]):not([type=radio]), .form select[aria-invalid="true"], .form textarea[aria-invalid="true"],
.ccode__box[aria-invalid="true"], .cagree:has(input[aria-invalid="true"]) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.cagree-box > .cerr { margin-top: 10px; }
.form__row2 > .form__row { align-content: start; }
.cturn { line-height: 0; }
.cturn.is-shown { margin-top: 16px; }
.cturn__mock { display: flex; align-items: center; gap: 12px; height: 65px; padding: 0 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--sky); color: var(--muted); font-size: 13px; line-height: 1.5; }
.cturn__mock i { flex: none; width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: 4px; background: #fff; }
@media (max-width: 389px) {
  .cturn__mock { flex-direction: column; justify-content: center; width: 150px; height: 140px; padding: 0 12px; text-align: center; }
}

.cstep { max-width: 720px; }
.ccode { display: grid; gap: 20px; padding: 30px 32px; border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-1); }
.ccode__field { min-width: 0; margin: 0; padding: 0; border: 0; }
.ccode__label { padding: 0; font-size: 16px; font-weight: 700; }
.ccode__label em { margin-left: 8px; padding: 1px 7px; border-radius: var(--r-sm); background: var(--indigo-soft); color: var(--indigo-ink); font-size: 11.5px; font-style: normal; font-weight: 500; vertical-align: 2px; }
.ccode__field .form__hint { margin-top: 4px; }
.ccode__boxes { display: flex; gap: 12px; margin-top: 16px; }
.ccode__box { width: 60px; height: 72px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: var(--r-lg); background: #fff; color: var(--ink); font-family: var(--f-brand); font-size: 30px; font-weight: 500; text-align: center; caret-color: var(--indigo); }
.ccode__box:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--ring); }
.ccode__err { margin-top: 12px; }
.ccode__limit { margin-top: 14px; color: var(--ink-2); font-size: 14px; }
.ccode__submit { justify-self: start; }
.ccode__help { margin-top: 18px; }
.ccode__help .checks { font-size: 14.5px; }
.ccode__resend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.ccode__say { margin-top: 10px; color: var(--indigo-ink); font-size: 14px; font-weight: 500; }
.ccode__say:empty { display: none; }

.creview { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; }
.creview summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; font-size: 15.5px; font-weight: 700; cursor: pointer; list-style: none; }
.creview summary::-webkit-details-marker { display: none; }
.creview__open { display: inline-flex; align-items: center; gap: 6px; color: var(--indigo-ink); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.creview__open::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.creview[open] .creview__open::after { transform: translateY(2px) rotate(-135deg); }
.creview__dl { margin: 0; padding: 0 20px; border-top: 1px solid var(--line-soft); }
.creview__dl div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.creview__dl dt { color: var(--muted); font-size: 13.5px; }
.creview__dl dd { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.75; overflow-wrap: anywhere; }
.creview__back { padding: 14px 20px 18px; }

.cdone { display: grid; justify-items: center; gap: 10px; padding: 34px 28px 30px; border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-1); text-align: center; }
.cdone__mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--indigo-soft); color: var(--indigo-ink); box-shadow: 0 0 0 8px var(--indigo-softer); }
.cdone__mark svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cdone__t { margin-top: 4px; font-family: var(--f-head); font-size: 22px; font-weight: 700; }
.cdone__text { max-width: 34em; color: var(--ink-2); font-size: 15.5px; line-height: 1.85; }
.cnext__head { margin-top: 44px; }
.cnext { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0 0; padding: 0; }
.cnext a { display: grid; gap: 4px; height: 100%; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.cnext a:hover { border-color: var(--indigo-line); box-shadow: var(--sh-1); }
.cnext__k { color: var(--indigo-ink); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; }
.cnext__t { font-size: 16px; font-weight: 700; }
.cnext__d { color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.cdone__try { margin-top: 18px; }
.cdone__back { margin-top: 26px; text-align: center; }

[data-variant][hidden], [data-if-ask][hidden] { display: none !important; }
.cdocs__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.cdoc { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-1); }
.cdoc__cover { display: block; width: 100%; height: auto; aspect-ratio: 297 / 210; object-fit: cover; border-bottom: 1px solid var(--line); background: var(--sky); }
.cdoc__body { display: grid; align-content: start; gap: 4px; padding: 18px 20px 20px; }
.cdoc__k { color: var(--indigo-ink); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; }
.cdoc__t { font-family: var(--f-head); font-size: 19px; font-weight: 700; }
.cdoc__d { color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.cdoc__meta { margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.cdoc__btn { justify-self: start; margin-top: 10px; }
.cdoc__ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cdocs__mail { margin-top: 16px; color: var(--ink-2); font-size: 14.5px; line-height: 1.8; }
.cdocs__ask { margin-top: 8px; padding: 12px 14px; border-left: 3px solid var(--indigo); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--indigo-softer); color: var(--ink); font-size: 14.5px; line-height: 1.8; }
@media (max-width: 640px) {
  .cdocs__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .ccode { padding: 22px 18px; }
  .ccode__submit { width: 100%; justify-content: center; }
  .creview__dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cnext { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .cflow { font-size: 13px; }
  .cflow__step { gap: 6px; }
  .cflow__step + .cflow__step::before { width: 14px; margin: 0 0 0 6px; }
  .ccode__boxes { gap: 10px; }
  .ccode__box { width: 54px; height: 64px; font-size: 27px; }
}