/* 승인 JPG의 분할 셸. 루트 확대는 16 → 19px, 사용자 상태는 user.js가 소유한다. */

/* 글꼴: WOFF2 우선, Gmarket Sans TTF 대체 유지 */
@font-face {
  font-family:Pretendard;
  src:url('/assets/fonts/user-redesign/Pretendard-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Pretendard;
  src:url('/assets/fonts/user-redesign/Pretendard-Medium.woff2') format('woff2');
  font-weight:500;
  font-display:swap
}

@font-face {
  font-family:Pretendard;
  src:url('/assets/fonts/user-redesign/Pretendard-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-display:swap
}

@font-face {
  font-family:Pretendard;
  src:url('/assets/fonts/user-redesign/Pretendard-Bold.woff2') format('woff2');
  font-weight:700;
  font-display:swap
}

@font-face {
  font-family:'Gmarket Sans';
  src:url('/assets/fonts/user-redesign/GmarketSansTTFMedium.woff2') format('woff2'),url('/assets/fonts/user-redesign/GmarketSansTTFMedium.ttf') format('truetype');
  font-weight:500;
  font-display:swap
}

@font-face {
  font-family:'Gmarket Sans';
  src:url('/assets/fonts/user-redesign/GmarketSansTTFBold.woff2') format('woff2'),url('/assets/fonts/user-redesign/GmarketSansTTFBold.ttf') format('truetype');
  font-weight:700;
  font-display:swap
}

/* 공통 색상 토큰과 글자 확대 */
:root {
  --blue:#3a66b0;
  --blue-dark:#2d5290;
  --blue-soft:#e6f0fa;
  --ink:#2f3540;
  --ink-3:#606872;
  --line:#d9e0e7;
  --line-blue:#aec4dd;
  --yellow:#f6c744;
  --red:#c53029;
  --red-soft:#fff0ee;
  --warn-bg:#fff9df;
  font-size:16px
}

html.is-big {
  font-size:19px
}

/* 기본 요소와 접근성 */
* {
  box-sizing:border-box
}

html,body {
  margin:0
}
html { scrollbar-gutter:stable; }

body {
  font-family:Pretendard,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.55;
  word-break:keep-all;
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased
}

button,input {
  font:inherit
}

button,a,input {
  touch-action:manipulation
}

a {
  color:var(--blue)
}

a:hover {
  color:var(--blue-dark)
}

button {
  cursor:pointer
}

button:disabled {
  cursor:not-allowed
}

button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #a36500;
  outline-offset:4px
}

h1:focus,#main:focus {
  outline:none
}

[hidden] {
  display:none!important
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  clip:rect(0,0,0,0);
  overflow:hidden;
  white-space:nowrap
}

.u-skip {
  position:fixed;
  left:1rem;
  top:-5rem;
  padding:1rem;
  background:#fff;
  z-index:20
}

.u-skip:focus {
  top:1rem
}

/* 분할 셸과 브랜드 */
.u-shell {
  min-height:100dvh
}

.u-app {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  width:100%;
  margin:auto;
  min-height:100dvh
}

.u-app.is-intro {
  grid-template-columns:minmax(0,2fr) minmax(0,3fr)
}

.u-panel {
  position:sticky;
  top:0;
  height:100dvh;
  min-height:700px;
  background:#cfe8f8 url('/assets/user-redesign/panel-sky.png') center bottom/cover no-repeat;
  padding:36px 40px;
  overflow:hidden
}

.u-brand {
  display:inline-flex;
  align-items:center;
  gap:1rem;
  max-width:100%;
  padding:1rem 1.25rem;
  border-radius:1rem;
  background:#fff;
  text-decoration:none;
  box-shadow:0 6px 20px #37688812;
  color:var(--blue)
}

.u-brand img {
  flex:none;
  width:8rem;
  height:auto;
  display:block
}

.u-brand strong {
  border-left:1px solid var(--line);
  padding-left:1rem;
  font-family:'Gmarket Sans',Pretendard,sans-serif;
  font-size:1rem;
  font-weight:700;
  min-width:0;
  white-space:normal
}

[data-intro-text] {
  white-space:pre-line
}

/* 현재·완료·대기 단계 표시 */
.u-panel-progress {
  margin-top:36px;
  background:#fffffff5;
  border-radius:1.4rem;
  padding:1.75rem 2rem 2rem
}

.u-panel-progress>p {
  font-weight:700;
  color:var(--blue);
  margin:0 0 1.75rem
}

.u-panel-progress>p:before,.u-stage-label:before,.u-intro-flow h2:before,.u-schedule h2:before {
  content:'';
  display:block;
  width:2rem;
  height:3px;
  background:var(--blue);
  margin-bottom:.6rem
}

.u-steps {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column
}

.u-step {
  display:flex;
  align-items:center;
  gap:1.25rem;
  color:var(--ink-3);
  position:relative;
  min-width:0
}

.u-panel-progress .u-step {
  align-items:flex-start;
  padding-bottom:2.75rem;
  min-height:6rem
}

.u-panel-progress .u-step:last-child {
  padding-bottom:0;
  min-height:3rem
}

.u-panel-progress .u-step:not(:last-child):after {
  content:'';
  position:absolute;
  top:3rem;
  bottom:.25rem;
  left:calc(1.375rem - 1px);
  width:2px;
  background:var(--line)
}

.u-step-num {
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  flex:none;
  border-radius:50%;
  border:2px solid var(--line);
  background:#fff;
  font-size:1.125rem;
  font-weight:700
}

.u-step-text {
  display:flex;
  flex-direction:column;
  min-width:0
}

.u-step-text strong {
  font-size:1.25rem
}

.u-step-text small {
  font-size:.9375rem;
  margin-top:.15rem
}

.u-step.is-current {
  color:var(--ink)
}

.u-step.is-current .u-step-num {
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  box-shadow:0 0 0 6px var(--blue-soft)
}

.u-step.is-done .u-step-num {
  background:var(--blue-soft);
  border-color:var(--blue-soft);
  color:var(--blue)
}

.u-step.is-done .u-step-text {
  color:var(--ink-3)
}

/* 안내 포스터 */
.u-poster {
  margin:26px -4px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:calc(100% - 92px)
}

.u-poster img {
  min-height:0;
  max-width:100%;
  height:100%;
  object-fit:contain;
  border:7px solid #fff;
  border-radius:.8rem;
  box-shadow:0 10px 25px #35485830;
  align-self:center
}

/* 작업 영역과 상단 도구 */
.u-work {
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:36px clamp(32px,5.5556vw,100px) 30px;
  min-height:100dvh;
  background:#fff
}

.u-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  min-height:56px;
  margin-bottom:36px
}

.u-back {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
  padding:.5rem 0
}

.u-back span {
  font-size:1.5rem;
  font-weight:400
}

.u-big-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:1px solid #bac4cf;
  border-radius:2rem;
  background:#fff;
  color:var(--ink);
  padding:.5rem 1.35rem;
  min-height:44px;
  font-size:.9375rem;
  white-space:nowrap
}

.u-big-toggle-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:1.625em;
  height:1.625em;
  border:1px solid currentColor;
  border-radius:.2rem;
  font-size:1rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-.08em
}

.u-big-toggle[aria-pressed=true] {
  background:var(--blue-soft);
  border-color:var(--blue);
  color:var(--blue)
}

.u-mobile-progress {
  display:none
}

/* 제목과 본문 카드 */
.u-hero {
  margin-bottom:1.9rem;
  position:relative
}

.u-stage-label,.u-sub-step {
  font-size:.9375rem;
  font-weight:700;
  color:var(--blue)
}

.u-stage-label {
  margin-bottom:1.6rem
}

.u-hero-body {
  display:flex;
  flex-direction:column;
  gap:.9rem
}

.u-hero h1 {
  font-family:'Gmarket Sans',Pretendard,sans-serif;
  font-size:2.5rem;
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.055em;
  margin:0;
  text-wrap:pretty
}

.u-hero h1 em {
  font-style:normal;
  color:var(--blue)
}

.u-hero p {
  font-size:1rem;
  color:var(--ink-3);
  margin:0
}

.u-badge {
  align-self:flex-start;
  border-radius:2rem;
  background:var(--yellow);
  color:#493b14;
  padding:.45rem 1.35rem;
  font-weight:700;
  font-size:.9375rem;
  margin-bottom:.6rem
}

/* 메인 배지와 글자 크기 도구는 같은 정상 흐름의 상단 행을 공유한다. */
.is-intro .u-bar {
  align-items:center
}

.is-intro .u-bar .u-badge {
  align-self:center;
  margin:0;
  min-width:0
}

.u-main {
  display:flex;
  flex-direction:column;
  gap:1rem;
  flex:1;
  min-width:0
}

.u-card {
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  padding:0;
  min-width:0
}

.u-card h2 {
  font-size:1rem;
  margin:0;
  color:var(--blue)
}

.u-card-head {
  display:flex;
  align-items:center;
  gap:.6rem;
  color:var(--blue);
  font-weight:700;
  font-size:1rem
}

.u-card-head svg {
  flex:none
}

/* 사업 정보와 신청 흐름 */
.u-facts {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
  margin:1.6rem 0 .5rem
}

.u-fact {
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:1rem;
  padding:1.1rem 1.4rem;
  gap:.75rem;
  min-height:8rem
}

.u-fact-icon {
  display:none
}

.u-fact-label {
  font-size:.9375rem;
  color:var(--blue);
  font-weight:700
}

.u-fact-label:before {
  content:'';
  display:block;
  width:2rem;
  height:3px;
  margin-bottom:.5rem;
  background:currentColor
}

.u-fact-value {
  display:flex;
  flex-direction:column;
  font-size:1.05rem;
  font-weight:700
}

.u-fact-value strong {
  font-size:1.8rem;
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.4
}

.u-fact.is-alert .u-fact-label,.u-fact.is-alert .u-fact-value {
  color:var(--red)
}

.u-fact-value .is-plain {
  color:var(--ink)
}

.u-flow {
  display:grid;
  grid-template-columns:2rem minmax(0,1fr) 2rem minmax(0,1fr) 2rem minmax(0,1fr);
  gap:.5rem;
  padding:1rem 0
}

.u-flow-dot b {
  width:1.75rem;
  height:1.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:700
}

.u-flow-dot:first-child b {
  background:var(--blue);
  color:#fff
}

.u-flow-text {
  display:flex;
  flex-direction:column;
  gap:.3rem
}

.u-flow-text strong {
  font-size:1rem
}

.u-flow-text span {
  font-size:.875rem;
  color:var(--ink-3)
}

/* 안내 문구와 상담 전화 */
.u-note {
  display:flex;
  align-items:center;
  gap:.875rem;
  border:1px solid #efdfa0;
  background:var(--warn-bg);
  border-radius:1rem;
  padding:.9rem 1.2rem
}

.u-note-dot {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  background:var(--yellow);
  color:#493b14;
  width:1.75rem;
  height:1.75rem;
  border-radius:50%;
  font-weight:700
}

.u-note p {
  margin:0;
  font-size:.9375rem;
  color:#54451f
}

.u-note.is-red {
  background:var(--red-soft);
  border-color:#e5b6b1
}

.u-note.is-red p {
  color:#87221c
}

.u-note.is-red .u-note-dot {
  background:var(--red);
  color:#fff
}

.u-call {
  display:flex;
  align-items:center;
  gap:.8rem;
  text-decoration:none;
  color:var(--ink);
  padding:1rem 0 0;
  min-height:60px
}

.u-call:hover {
  color:var(--ink)
}

.u-call-icon {
  width:2.5rem;
  height:2.5rem;
  flex:none;
  border-radius:50%;
  background:var(--blue-soft);
  display:flex;
  align-items:center;
  justify-content:center
}

.u-call-icon svg {
  width:1.2rem;
  height:1.2rem
}

.u-call-text {
  display:flex;
  align-items:baseline;
  gap:.5rem;
  flex-wrap:wrap;
  min-width:0
}

.u-call-text small {
  font-size:.8125rem;
  color:var(--ink-3)
}

.u-call-text .u-call-hours {
  flex-basis:100%;
  line-height:1.6
}

.u-call-text strong {
  font-size:1rem
}

.u-call.is-disabled strong {
  color:var(--ink-3)
}

/* 입력과 본인 확인 상태 */
.u-field {
  display:flex;
  flex-direction:column;
  gap:.6rem;
  min-width:0
}

.u-field>span:first-child,.u-label {
  font-size:1rem;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  flex-wrap:wrap
}

.u-input {
  width:100%;
  min-width:0;
  min-height:4rem;
  border:1.5px solid #cfd8e1;
  border-radius:.9rem;
  background:#f5f8fa;
  padding:.8rem 1.25rem;
  font-size:1.125rem;
  color:var(--ink)
}

.u-input::placeholder {
  color:#727d88
}

.u-input[aria-invalid=true] {
  border-color:var(--red)
}

.u-input:focus {
  background:#fff
}

.u-input.is-code {
  letter-spacing:.4em;
  text-align:center;
  font-size:1.5rem
}

.u-help {
  font-size:.9375rem;
  color:var(--ink-3);
  margin:.2rem 0
}

.u-privacy {
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.9375rem;
  color:var(--ink-3);
  margin-top:1rem
}

.u-privacy svg {
  flex:none
}

#verify-form {
  gap:2rem;
  padding-top:1rem
}

.u-sent {
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line)
}

.u-sent-msg {
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  background:var(--blue-soft);
  padding:1rem;
  border-radius:.75rem;
  font-size:1rem
}

.u-sent-msg svg {
  flex:none
}

.u-timer {
  color:var(--red);
  font-size:.9375rem
}

.u-dev {
  display:flex;
  flex-direction:column;
  border:1px dashed #947828;
  background:#fffae4;
  padding:1rem;
  border-radius:.75rem;
  font-size:.9375rem
}

.u-dev code {
  font-size:1.5rem;
  letter-spacing:.25em;
  font-weight:700
}

.u-error {
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  border:1px solid #dfb2ae;
  background:var(--red-soft);
  border-radius:.75rem;
  padding:1rem;
  color:#8c231d;
  font-weight:600;
  font-size:1rem
}

.u-error b {
  flex:none
}

/* 버튼과 하단 행동 영역 */
.u-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  width:100%;
  min-height:4.25rem;
  padding:.8rem 1.25rem;
  border:0;
  border-radius:1rem;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  font-size:1.25rem;
  font-weight:700;
  box-shadow:0 8px 16px #344a6a22;
  transition:background .15s,transform .15s
}

.u-btn:hover {
  background:var(--blue-dark);
  color:#fff
}

.u-btn:active {
  transform:translateY(1px)
}

.u-btn:disabled,.u-search-btn:disabled {
  background:#717c89;
  box-shadow:none
}

.u-btn.is-line {
  background:var(--blue-soft);
  color:var(--blue);
  border:2px solid var(--blue);
  box-shadow:none
}

.u-btn.is-line:hover {
  background:#d8e7f7
}

.u-btn-sm {
  min-height:3.75rem;
  font-size:1.1rem
}

.u-link-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  min-height:44px;
  border:0;
  background:transparent;
  color:var(--blue);
  text-decoration:underline;
  font-size:1rem;
  padding:.5rem .75rem
}

.u-link-btn:disabled {
  color:var(--ink-3);
  text-decoration:none
}

.u-dock {
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding-top:1.5rem;
  margin-top:auto;
  background:#fff
}

/* 주소 확인과 선택 */
.u-address-card {
  border:2px solid var(--blue);
  border-radius:1rem;
  background:var(--blue-soft);
  padding:1.5rem 1.6rem;
  gap:1rem
}

.u-address {
  display:flex;
  flex-direction:column;
  gap:.4rem;
  background:var(--blue-soft);
  border-radius:1rem;
  padding:1.25rem 1.6rem
}

.u-address strong {
  font-size:1.4rem;
  line-height:1.5;
  font-weight:700
}

.u-address span {
  font-size:.9375rem;
  color:var(--ink-3)
}

.u-address-card .u-address {
  padding:0
}

.u-kv {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
  gap:.5rem 1rem;
  font-size:1rem;
  border-top:1px solid var(--line-blue);
  padding-top:1rem;
  margin:1rem 0 0
}

.u-kv dt {
  color:var(--ink-3)
}

.u-kv dd {
  margin:0;
  font-weight:700;
  min-width:0
}

.u-choices {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem
}

.u-choice {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem;
  width:100%;
  border:2px solid var(--blue);
  border-radius:1rem;
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  text-align:left;
  padding:1rem 1.3rem;
  min-height:7.5rem;
  font:inherit
}

.u-choice:hover {
  background:#f4f8fc;
  color:var(--ink)
}

.u-choice.is-primary {
  background:var(--blue);
  color:#fff;
  box-shadow:0 8px 16px #344a6a22
}

.u-choice.is-primary:hover {
  background:var(--blue-dark)
}

.u-choice:disabled {
  opacity:.6
}

.u-choice-icon {
  width:2.75rem;
  height:2.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  background:var(--blue-soft);
  border-radius:50%
}

.u-choice.is-primary .u-choice-icon {
  background:#ffffff25
}

.u-choice-text {
  display:flex;
  align-items:baseline;
  gap:.5rem;
  flex-wrap:wrap;
  min-width:0;
  flex:1 1 100%;
  order:2
}

.u-choice-text strong {
  font-size:1.15rem
}

.u-choice-text span {
  font-size:.875rem
}

.u-choice-arrow {
  margin-left:auto;
  font-size:1.5rem
}

body[data-page=address] .u-main>.u-note:last-of-type {
  background:#f0f4fa;
  border-color:var(--blue)
}

body[data-page=address] [data-user-logout] {
  margin-top:auto
}

/* 주소 검색과 변경 단계 */
.u-search {
  display:flex;
  gap:.5rem
}

.u-search .u-input {
  flex:1;
  min-width:0
}

.u-search-btn {
  flex:0 0 6.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:4rem;
  border:0;
  border-radius:.8rem;
  background:var(--blue);
  color:#fff;
  font-weight:700
}

.u-search-btn svg {
  display:none
}

.u-chips {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem
}

.u-chips>span {
  width:100%;
  font-size:.9375rem;
  color:var(--ink-3)
}

.u-chip {
  min-height:44px;
  border:0;
  background:var(--blue-soft);
  color:var(--blue);
  border-radius:2rem;
  padding:.5rem 1.3rem;
  font-weight:700
}

.u-results {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.75rem
}

.u-results>div {
  max-width:100%
}

.u-results iframe {
  max-width:100%
}

.u-results-head {
  font-weight:700;
  color:var(--blue);
  margin:0
}

.u-results>p {
  margin:0;
  font-size:.9375rem
}

.u-results>.u-link-btn {
  align-self:flex-end
}

.u-sub-step {
  display:flex;
  align-items:center;
  gap:.7rem
}

.u-sub-step:after {
  content:'';
  margin-left:auto;
  flex:0 0 6.75rem;
  height:5px;
  border-radius:3px;
  background:linear-gradient(to right,var(--blue) 30%,#dbe5ef 30%)
}

body[data-change-stage=detail] .u-sub-step:after {
  background:linear-gradient(to right,var(--blue) 65%,#dbe5ef 65%)
}

body[data-change-stage=confirm] .u-sub-step:after {
  background:var(--blue)
}

body[data-page=change] .u-stage-label {
  margin-bottom:.4rem
}

body[data-page=change] .u-hero {
  margin-bottom:2rem
}

#detail-form .u-link-btn {
  align-self:flex-start
}

#detail-form .u-address {
  margin-bottom:.5rem
}

/* 변경 주소 비교 */
.u-compare {
  display:grid;
  grid-template-columns:minmax(0,1fr) 2.75rem minmax(0,1.1fr);
  gap:.85rem;
  align-items:stretch
}

.u-compare-box {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  min-width:0;
  border:1px solid var(--line);
  border-radius:1rem;
  padding:1.4rem;
  min-height:9rem
}

.u-compare-box small {
  font-size:.875rem;
  color:var(--ink-3);
  font-weight:600
}

.u-compare-box strong {
  font-size:1rem;
  line-height:1.6;
  font-weight:500
}

.u-compare-box.is-new {
  background:var(--blue-soft);
  border:2px solid var(--blue)
}

.u-compare-box.is-new small {
  color:var(--blue);
  font-weight:700
}

.u-compare-box.is-new strong {
  font-weight:700;
  font-size:1.1rem
}

.u-compare-box span {
  font-size:.9375rem;
  color:var(--ink-3)
}

.u-compare-arrow {
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  transform:rotate(-90deg);
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  font-size:1.5rem
}

/* 완료 안내와 로딩 */
.u-done-art {
  position:absolute;
  right:0;
  top:-1rem;
  width:10.25rem;
  height:10.25rem;
  border-radius:50%;
  object-fit:cover
}

body[data-page=done] .u-hero-body {
  padding-right:11rem;
  min-height:7rem
}

.u-schedule {
  margin-top:1.3rem
}

.u-timeline {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  row-gap:.75rem;
  margin-top:.2rem
}

.u-tl-dot {
  height:1rem;
  position:relative;
  grid-row:1;
  border-top:2px solid var(--line);
  margin-top:.5rem
}

.u-tl-dot b {
  position:absolute;
  left:0;
  top:-.5rem;
  width:1rem;
  height:1rem;
  border:2px solid var(--blue);
  border-radius:50%;
  background:#fff
}

.u-tl-dot:first-child b {
  background:var(--red);
  border-color:var(--red)
}

.u-tl-text {
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding-right:.75rem;
  font-size:.9375rem
}

.u-tl-text strong {
  font-size:1rem
}

.u-tl-text:nth-child(2) strong {
  color:var(--red)
}

.u-tl-text span {
  color:var(--ink-3)
}

.u-closing {
  margin-top:1rem;
  text-align:center;
  color:var(--ink-3);
  font-size:1rem
}

.u-loading {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  min-height:6rem;
  font-size:1rem;
  color:var(--ink-3)
}

.u-spin {
  width:1.75rem;
  height:1.75rem;
  border:4px solid var(--line-blue);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:u-spin 1s linear infinite
}

@keyframes u-spin {
  to {
    transform:rotate(360deg)
  }

}

/* 넓은 PC 시작 화면 */
@media(min-width:1000px) {
  /* 전 단계의 도구 위치와 작업 폭을 동일하게 유지한다. 확대해도 760px 상한은 고정. */
  .u-work,.is-intro .u-work {
    padding-top:44px
  }

  .u-bar {
    align-items:flex-start
  }

  .u-work>* {
    width:100%;
    max-width:760px;
    margin-left:auto;
    margin-right:auto
  }

  .is-intro .u-work {
    padding-bottom:24px
  }

  .is-intro .u-bar {
    margin-bottom:clamp(16px,2.8vh,30px)
  }

  .is-intro .u-dock {
    padding-top:1rem
  }

  .is-intro .u-hero {
    margin-bottom:.75rem
  }

  .is-intro .u-intro-flow {
    gap:.5rem
  }

  .is-intro .u-fact {
    padding:1rem 1.4rem;
    gap:.5rem
  }

  .is-intro .u-fact-label {
    line-height:1.35
  }

  .is-intro .u-main {
    flex:0
  }

  .is-intro .u-dock {
    margin-top:0
  }

  .is-intro .u-work>.u-call {
    margin-top:auto
  }

  .is-intro .u-hero h1 {
    font-size:2.6rem
  }

  .is-intro .u-flow {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 1.2rem;
    padding:.5rem 0;
    counter-reset:flow
  }

  .is-intro .u-flow-dot {
    display:none
  }

  .is-intro .u-flow-text {
    border:1px solid var(--line);
    border-radius:.9rem;
    padding:1rem;
    min-height:6.5rem
  }

  .is-intro .u-flow-text:nth-child(2) {
    border-color:var(--blue);
    background:var(--blue-soft)
  }

  .is-intro .u-flow-text strong:before {
    counter-increment:flow;
    content:counter(flow);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.65rem;
    height:1.65rem;
    margin-right:.5rem;
    background:var(--blue-soft);
    color:var(--blue);
    border-radius:50%
  }

  .is-intro .u-flow-text:nth-child(2) strong:before {
    background:var(--blue);
    color:#fff
  }

}

/* 중간 PC 폭 */
@media(max-width:1279px) and (min-width:1000px) {
  .u-work {
    padding-left:40px;
    padding-right:40px
  }

  .u-panel {
    padding:28px
  }

  .u-panel-progress {
    padding:1.5rem
  }

  .u-hero h1,.is-intro .u-hero h1 {
    font-size:2.15rem
  }

  .u-brand {
    padding:.9rem;
    gap:.65rem
  }

  .u-brand img {
    width:6.8rem
  }

  .u-brand strong {
    padding-left:.65rem;
    font-size:.875rem
  }

  .u-fact {
    padding:1rem
  }

  .u-fact-value strong {
    font-size:1.5rem
  }

}

/* 모바일 공통 */
@media(max-width:999px) {
  .u-app,.u-app.is-intro {
    display:flex;
    flex-direction:column;
    max-width:none
  }

  .u-panel {
    position:relative;
    height:210px;
    min-height:0;
    padding:20px;
    background-size:100% auto;
    background-position:center 70%;
    overflow:visible
  }

  .is-intro .u-panel {
    height:300px;
    background-position:center bottom
  }

  .u-panel-progress,.u-poster {
    display:none
  }

  .u-panel .u-brand {
    display:none
  }

  .is-intro .u-brand {
    display:inline-flex;
    position:relative;
    z-index:2;
    padding:.8rem .9rem;
    gap:.65rem
  }

  .is-intro .u-brand img {
    width:6.5rem
  }

  .is-intro .u-brand strong {
    font-size:.875rem;
    padding-left:.65rem
  }

  .u-work {
    position:relative;
    min-height:calc(100dvh - 180px);
    padding:1.8rem 24px 1.5rem;
    border-radius:2rem 2rem 0 0;
    margin-top:-30px;
    z-index:1
  }

  .is-intro .u-work {
    padding-top:1.75rem
  }

  .u-bar {
    position:absolute;
    top:-158px;
    left:20px;
    right:20px;
    margin:0;
    min-height:44px
  }

  .is-intro .u-bar {
    position:static;
    margin:0 0 1rem
  }

  .u-back {
    border-radius:2rem;
    background:#fff;
    padding:.5rem 1rem;
    min-height:44px
  }

  .u-big-toggle {
    padding:.5rem 1rem;
    font-weight:600
  }

  .u-mobile-progress {
    display:block;
    margin:0 0 1.8rem
  }

  .u-mobile-progress .u-steps {
    flex-direction:row;
    justify-content:space-between;
    gap:.75rem
  }

  .u-mobile-progress .u-step {
    gap:.5rem
  }

  .u-mobile-progress .u-step-num {
    width:2.6rem;
    height:2.6rem
  }

  .u-mobile-progress .u-step-text strong {
    font-size:1rem
  }

  .u-mobile-progress .u-step.is-current .u-step-num {
    box-shadow:none
  }

  .u-stage-label {
    margin-bottom:1.1rem
  }

  .u-stage-label:before {
    margin-bottom:.75rem
  }

  .u-hero {
    margin-bottom:1.6rem
  }

  .u-hero h1,.is-intro .u-hero h1 {
    font-size:2rem;
    letter-spacing:-.06em
  }

  .u-hero p {
    font-size:1.125rem
  }

  .u-hero-body {
    gap:.75rem
  }

  .u-badge {
    font-size:1rem
  }

  .u-main {
    gap:1.1rem
  }

  .u-facts {
    gap:.75rem;
    margin:.75rem 0
  }

  .u-fact {
    padding:1rem;
    gap:.65rem;
    min-height:8.5rem
  }

  .u-fact-value strong {
    font-size:1.4rem
  }

  .u-fact-label {
    font-size:1rem
  }

  .u-fact-value {
    font-size:1rem
  }

  .u-flow {
    grid-template-columns:2.25rem minmax(0,1fr);
    padding:1.5rem 1.1rem;
    border:1px solid var(--line);
    border-radius:1rem;
    gap:0 1rem
  }

  .u-flow-dot {
    display:flex;
    flex-direction:column;
    align-items:center
  }

  .u-flow-dot b {
    width:2.25rem;
    height:2.25rem;
    flex:none;
    font-size:1.125rem
  }

  .u-flow-dot i {
    width:2px;
    background:var(--line);
    flex:1;
    min-height:2.5rem
  }

  .u-flow-text {
    padding:0 0 1.75rem;
    gap:.2rem
  }

  .u-flow-text:last-child {
    padding-bottom:0
  }

  .u-flow-text strong {
    font-size:1.125rem
  }

  .u-flow-text span {
    font-size:1rem
  }

  .u-note {
    padding:1rem;
    gap:.75rem
  }

  .u-note p {
    font-size:1rem
  }

  .u-call {
    border:1px solid var(--line);
    border-radius:1rem;
    padding:1rem;
    margin-top:1.25rem;
    gap:.9rem
  }

  .u-call-icon {
    width:3rem;
    height:3rem
  }

  .u-call-icon svg {
    width:1.5rem;
    height:1.5rem
  }

  .u-call-text {
    flex-direction:column;
    align-items:flex-start;
    gap:.15rem
  }

  .u-call-text small {
    font-size:.9375rem
  }

  .u-call-text strong {
    font-size:1.125rem
  }

  .u-dock {
    padding-top:1.5rem;
    order:5;
    position:static;
    margin-top:0
  }

  .u-work>.u-call {
    order:4
  }

  .u-btn {
    min-height:3.75rem;
    font-size:1.25rem
  }

  .u-field>span:first-child {
    font-size:1.125rem
  }

  .u-input {
    min-height:3.5rem;
    font-size:1.125rem;
    padding:.8rem 1rem
  }

  .u-help,.u-privacy {
    font-size:1rem
  }

  #verify-form {
    gap:1.8rem;
    padding-top:.5rem
  }

  .u-privacy {
    margin-top:.6rem
  }

  .u-choices {
    grid-template-columns:1fr
  }

  .u-choice {
    min-height:5rem;
    flex-wrap:nowrap;
    padding:1rem
  }

  .u-choice-text {
    flex:1;
    order:0;
    flex-direction:column;
    gap:.15rem
  }

  .u-choice-text strong {
    font-size:1.2rem
  }

  .u-choice-text span {
    font-size:.9375rem
  }

  .u-address-card {
    padding:1.1rem;
    gap:.8rem
  }

  .u-address strong {
    font-size:1.25rem
  }

  .u-kv {
    grid-template-columns:auto minmax(0,1fr);
    gap:.4rem 1rem
  }

  .u-compare {
    grid-template-columns:minmax(0,1fr);
    gap:.65rem
  }

  .u-compare-box {
    padding:1.2rem;
    min-height:0
  }

  .u-compare-arrow {
    justify-self:center;
    transform:none
  }

  .u-done-art {
    width:5.5rem;
    height:5.5rem;
    top:0
  }

  body[data-page=done] .u-hero-body {
    padding-right:6rem;
    min-height:5.5rem
  }

  body[data-page=done] .u-hero h1 {
    font-size:1.8rem
  }

  .u-timeline {
    grid-template-columns:1.5rem minmax(0,1fr);
    gap:0 .75rem
  }

  .u-tl-dot {
    grid-row:auto;
    min-height:5rem;
    border-top:0;
    border-left:2px solid var(--line);
    margin:0 0 0 .5rem
  }

  .u-tl-dot b {
    top:.3rem;
    left:-.55rem
  }

  .u-tl-dot:nth-child(5) {
    border:0;
    min-height:2rem
  }

  .u-tl-text {
    padding-bottom:1rem
  }

  .u-search-btn {
    flex-basis:5rem
  }

  .u-sub-step:after {
    flex-basis:4.5rem
  }

  .u-results-head {
    font-size:1rem
  }

}

/* 버튼에서 바로 공식 검색창을 연다. 바깥 검색어 입력은 필요하지 않다. */
#search-form .u-search-btn {
  flex-basis:auto;
  min-width:10rem;
  padding:0 1.5rem
}

/* 태블릿 폭 */
@media(min-width:600px) and (max-width:999px) {
  .u-work {
    padding-left:48px;
    padding-right:48px
  }

  .u-panel {
    height:240px;
    background-position:center 47%
  }

  .u-bar {
    top:-215px;
    left:48px;
    right:48px
  }

  .is-intro .u-panel {
    height:350px;
    background-position:center 65%
  }

  .is-intro .u-brand img {
    width:8rem
  }

  .u-choices {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .u-choice {
    flex-wrap:wrap
  }

  .u-choice-text {
    flex:1 1 100%;
    order:2
  }

  .u-mobile-progress .u-steps {
    justify-content:flex-start;
    gap:2rem
  }

  .u-hero h1,.is-intro .u-hero h1 {
    font-size:2.4rem
  }

}

/* 좁은 모바일 폭 */
@media(max-width:400px) {
  .u-work {
    padding-left:20px;
    padding-right:20px
  }

  .u-panel {
    padding-left:16px;
    padding-right:16px
  }

  .is-intro .u-brand {
    gap:.5rem;
    padding:.75rem
  }

  .is-intro .u-brand img {
    width:5.6rem
  }

  .is-intro .u-brand strong {
    font-size:.78rem;
    padding-left:.5rem
  }

  .u-big-toggle {
    padding:.5rem .8rem;
    font-size:.875rem
  }

  .u-mobile-progress .u-step {
    gap:.4rem
  }

  .u-mobile-progress .u-step-num {
    width:2.3rem;
    height:2.3rem
  }

  .u-mobile-progress .u-step-text strong {
    font-size:.9375rem
  }

  .u-fact {
    padding:.9rem
  }

  .u-fact-value strong {
    font-size:1.3rem
  }

}

/* 확대 글자 모드 */
html.is-big .u-panel .u-brand {
  gap:.6rem
}

html.is-big .u-panel .u-brand img {
  width:6rem
}

html.is-big .u-panel .u-brand strong {
  font-size:.85rem;
  padding-left:.6rem
}

@media(max-width:999px) {
  html.is-big .u-mobile-progress .u-step {
    flex-direction:column;
    align-items:flex-start
  }

  html.is-big .u-mobile-progress .u-step-text strong {
    font-size:1rem
  }

  html.is-big .u-hero h1 {
    font-size:1.9rem
  }

  html.is-big .u-facts {
    grid-template-columns:1fr
  }

  html.is-big .is-intro .u-brand img {
    width:4.7rem
  }

  html.is-big .is-intro .u-brand strong {
    font-size:.72rem
  }

  html.is-big .u-sub-step {
    flex-wrap:wrap
  }

  html.is-big .u-sub-step:after {
    display:none
  }

}

/* 2026-10-28 수정 시안: 안내 일정 한 묶음과 최종 주소 비교만 한정한다. */
body[data-page=change] #search-form .u-search-btn {
  width:100%; min-height:5rem; justify-content:flex-start; padding:1rem 1.4rem;
  border:2px solid var(--line-blue); background:#fff; color:var(--ink-3); text-align:left;
  gap:1rem; border-radius:1rem;
}
body[data-page=change] #search-form .u-search-btn:hover { border-color:var(--blue); background:#f5f8fc; }
body[data-page=change] #search-form .u-search-btn svg { display:block; color:var(--blue); flex:none; }
body[data-page=change] #search-form .u-search-btn span { flex:1; min-width:0; font-weight:500; }
body[data-page=change] #search-form .u-search-btn b { font-size:1rem; color:var(--blue); }
@media (min-width:1000px) and (max-height:1000px) {
  html:not(.is-big) body[data-page=verify] .u-work,
  html:not(.is-big) body[data-page=address] .u-work,
  html:not(.is-big) body[data-page=done] .u-work { padding-bottom:20px; }
  html:not(.is-big) body[data-page=verify] .u-bar,
  html:not(.is-big) body[data-page=address] .u-bar,
  html:not(.is-big) body[data-page=done] .u-bar { margin-bottom:20px; }
  html:not(.is-big) body[data-page=verify] .u-hero,
  html:not(.is-big) body[data-page=address] .u-hero,
  html:not(.is-big) body[data-page=done] .u-hero { margin-bottom:20px; }
  html:not(.is-big) body[data-page=verify][data-otp-sent] #verify-form { gap:.5rem; padding-top:0; }
  html:not(.is-big) body[data-page=verify][data-otp-sent] .u-bar { margin-bottom:12px; }
  html:not(.is-big) body[data-page=verify][data-otp-sent] .u-hero { margin-bottom:12px; }
  html:not(.is-big) body[data-page=verify][data-otp-sent] .u-main { gap:.75rem; }
  html:not(.is-big) body[data-page=verify][data-otp-sent] .u-stage-label { margin-bottom:.75rem; }
  html:not(.is-big) body[data-page=verify][data-otp-sent] .u-input { min-height:3.5rem; padding-top:.65rem; padding-bottom:.65rem; }
  html:not(.is-big) body[data-page=verify][data-otp-sent] .u-sent-msg { padding:.65rem 1rem; }
  html:not(.is-big) body[data-page=verify][data-otp-sent] .u-dev { flex-direction:row; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem 1rem; }
  html:not(.is-big) body[data-page=verify][data-otp-sent] .u-sent { gap:.5rem; padding-top:.5rem; margin-top:0; }
  html:not(.is-big) body[data-page=verify][data-otp-sent] .u-field { gap:.4rem; }
  html:not(.is-big) body[data-page=verify][data-otp-sent] .u-privacy { margin-top:0; }
  html:not(.is-big) body[data-page=verify][data-otp-sent] .u-dock { padding-top:1rem; }
  html:not(.is-big) body[data-page=done] .u-main { gap:.75rem; }
  html:not(.is-big) body[data-page=done] .u-schedule { margin-top:.5rem; }
  html:not(.is-big) body[data-page=done] .u-closing { margin-top:.25rem; }
}
@media (max-width:599px) {
  body[data-page=change] #search-form .u-search-btn { padding:1rem; gap:.75rem; flex-wrap:wrap; }
  body[data-page=change] #search-form .u-search-btn b { margin-left:auto; }
}
body[data-page=intro] .u-facts {
  gap:0; border:1px solid var(--line); border-radius:1.25rem;
  box-shadow:0 6px 20px #344a6a0c; padding:1.4rem; margin:1rem 0 0;
}
body[data-page=intro] .u-fact {
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto 1fr;
  gap:.35rem 1.2rem; padding:0 1.4rem; border:0; border-radius:0; background:none;
  min-height:0; align-items:center;
}
body[data-page=intro] .u-fact:first-child { padding-left:0; border-right:1px solid var(--line); }
body[data-page=intro] .u-fact:last-child { padding-right:0; }
body[data-page=intro] .u-fact-label { align-self:end; font-size:.9375rem; }
body[data-page=intro] .u-fact-value { align-self:start; gap:.15rem; }
body[data-page=intro] .u-fact-value strong { font-size:1.5rem; line-height:1.4; }
body[data-page=intro] .u-fact-value>span { font-size:.9375rem; }
.u-calendar { grid-row:1/3; width:5.25rem; text-align:center; border:1px solid var(--line-blue); border-radius:.85rem; overflow:hidden; color:var(--blue); font-variant-numeric:tabular-nums; }
.u-calendar>span { display:block; background:var(--blue); color:#fff; font-size:.8rem; font-weight:700; padding:.2rem; }
.u-calendar b { display:block; font-size:2.5rem; line-height:1.2; padding-top:.35rem; }
.u-calendar small { display:block; color:var(--ink-3); font-size:.75rem; padding-bottom:.2rem; }
.is-alert .u-calendar { color:var(--red); border-color:#ecc9c6; }
.is-alert .u-calendar>span { background:var(--red); }
body[data-page=intro] .u-intro-flow { gap:.5rem; }
.u-intro-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:1rem .75rem; background:var(--blue-soft); border-radius:1.25rem; }
.u-intro-steps li { position:relative; display:flex; flex-direction:column; align-items:center; gap:.45rem; min-width:0; text-align:center; padding:0 .5rem; }
.u-intro-steps li:not(:last-child):after { content:''; position:absolute; top:1.75rem; left:calc(50% + 2.2rem); width:calc(100% - 4.4rem); border-top:2px dashed #9bb5d4; }
.u-intro-icon { display:flex; align-items:center; justify-content:center; width:3.5rem; height:3.5rem; border-radius:50%; background:#fff; color:var(--blue); margin-bottom:.5rem; }
.u-intro-steps li:first-child .u-intro-icon { background:var(--blue); color:#fff; box-shadow:0 0 0 5px #d1e1f5; }
.u-intro-icon svg { width:1.5rem; height:1.5rem; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.u-intro-steps strong { font-size:1rem; }
.u-intro-steps li>span:last-child { color:var(--ink-3); font-size:.875rem; }
body[data-page=change] .u-change-confirm { gap:0; }
body[data-page=change] .u-compare { display:flex; flex-direction:column; gap:0; border:2px solid var(--blue); border-radius:1.25rem; overflow:hidden; }
body[data-page=change] .u-compare-box { border:0; border-radius:0; min-height:0; padding:1.4rem 1.6rem; gap:.7rem; }
body[data-page=change] .u-compare-box:not(.is-new) { color:var(--ink-3); padding-bottom:1rem; }
body[data-page=change] .u-compare-box small { align-self:flex-start; background:#eef1f5; border-radius:2rem; padding:.25rem 1rem; font-size:.8125rem; }
body[data-page=change] .u-compare-box strong { overflow-wrap:anywhere; }
body[data-page=change] .u-compare-box.is-new { border:0; background:var(--blue-soft); }
body[data-page=change] .u-compare-box.is-new small { background:var(--blue); color:#fff; }
body[data-page=change] .u-compare-box.is-new strong { font-size:1.5rem; line-height:1.5; }
body[data-page=change] [data-new-postal] { align-self:flex-start; border-radius:.5rem; padding:.2rem 1rem; background:#fff; color:var(--blue); font-size:.875rem; }
.u-compare-divider { display:flex; align-items:center; gap:.65rem; padding:0 1.6rem .5rem; color:var(--blue); font-size:.875rem; font-weight:700; }
.u-compare-divider:after { content:''; flex:1; min-width:0; border-top:2px dashed var(--line-blue); }
body[data-page=change] .u-compare-arrow { transform:none; width:2.5rem; height:2.5rem; flex:none; }
.u-change-confirm .u-unchanged-heading { margin:.75rem 0 .35rem; color:var(--ink-3); font-size:.875rem; font-weight:600; }
.u-unchanged { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin:0; }
.u-unchanged>div { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .65rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:.9rem; background:#f5f8fb; min-width:0; }
.u-unchanged dt { color:var(--ink-3); font-size:.875rem; display:flex; align-items:center; gap:.5rem; }
.u-unchanged dt svg { width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.5; }
.u-unchanged dd { margin:0; font-weight:700; font-size:1.125rem; overflow-wrap:anywhere; }
.u-unchanged .u-unchanged-state { font-size:.75rem; font-weight:400; color:var(--ink-3); margin-left:auto; }
.u-unchanged-help { margin:.65rem 0 1rem; }
.u-change-deadline { margin:18px 0 0; }
/* 최종 확인은 안내 다음에 버튼을 잇고, 내용이 길면 문서 흐름대로 스크롤한다. */
body[data-page=change][data-change-stage=confirm] .u-main { flex:0; }
body[data-page=change][data-change-stage=confirm] .u-dock { margin-top:0; }
.u-current-address-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem; min-width:0; }
.u-current-address-line strong { flex:1 1 20rem; min-width:0; }
.u-current-address-line [data-current-postal] { flex:0 1 auto; margin-left:auto; }
@media (max-width:599px) {
  .u-current-address-line [data-current-postal] { flex-basis:100%; margin-left:0; }
}
@media (min-width:1000px) and (max-width:1500px) {
  body[data-page=intro] .u-facts { padding:1rem; }
  body[data-page=intro] .u-fact { gap:.3rem .75rem; padding:0 1rem; }
  body[data-page=intro] .u-fact-value strong { font-size:1.25rem; }
  .u-calendar { width:4.5rem; }
}
@media (max-width:599px) {
  body[data-page=intro] .u-facts { grid-template-columns:1fr; padding:1rem; }
  body[data-page=intro] .u-fact,body[data-page=intro] .u-fact:last-child { padding:1rem 0 0; gap:.3rem 1rem; }
  body[data-page=intro] .u-fact:first-child { border-right:0; border-bottom:1px solid var(--line); padding:0 0 1rem; }
  .u-intro-steps { grid-template-columns:1fr; gap:1.4rem; padding:1.25rem; }
  .u-intro-steps li { display:grid; grid-template-columns:3.5rem minmax(0,1fr); gap:.15rem 1rem; text-align:left; padding:0; }
  .u-intro-icon { grid-row:1/3; margin:0; }
  .u-intro-steps li:not(:last-child):after { top:calc(100% + .25rem); left:1.75rem; width:0; height:.9rem; border-top:0; border-left:2px dashed #9bb5d4; }
  .u-intro-steps li>span:last-child { font-size:1rem; }
  .u-unchanged { grid-template-columns:1fr; }
  body[data-page=change] .u-compare-box { padding:1rem; }
  .u-compare-divider { padding-left:1rem; padding-right:1rem; }
  body[data-page=change] .u-compare-box.is-new strong { font-size:1.25rem; }
}
/* 움직임 줄이기 설정 */
/* 기본 글자 PC 첫 화면의 낮은 높이에서 간격만 줄인다. 확대·모바일·후속 단계는 제외한다. */
@media (min-width:1000px) and (min-height:900px) and (max-height:1000px) {
  html:not(.is-big) .is-intro .u-work { padding-bottom:16px; }
  html:not(.is-big) .is-intro .u-bar { margin-bottom:12px; }
  html:not(.is-big) .is-intro .u-hero { margin-bottom:8px; }
  html:not(.is-big) .is-intro .u-hero-body { gap:8px; }
  html:not(.is-big) .is-intro .u-main { gap:12px; }
  html:not(.is-big) .is-intro .u-facts { margin-top:8px; margin-bottom:0; }
  html:not(.is-big) .is-intro .u-fact { padding-top:12px; padding-bottom:12px; }
  html:not(.is-big) .is-intro .u-flow-text { padding:12px; min-height:0; }
  html:not(.is-big) .is-intro .u-flow { padding-top:0; padding-bottom:0; }
  html:not(.is-big) .is-intro .u-dock { padding-top:12px; }
  html:not(.is-big) .is-intro .u-work>.u-call { padding-top:12px; }
}

/* 주소 충돌 후 최신 주소를 읽는 위치. 움직임·깜빡임 없이 초점 동안만 강조한다. */
.u-refresh-notice { color:var(--blue-dark); font-size:1rem; line-height:1.6; margin:.75rem 0 0; }
.u-address-card.is-refreshed,.u-compare-box.is-refreshed { outline:3px solid var(--line-blue); outline-offset:-3px; }
.u-address-card,.u-compare-box { scroll-margin-top:1rem; }

/* 낮은 PC: 본문 글자는 그대로 두고 정상 흐름의 여백만 줄인다. */
@media (min-width:1000px) and (max-height:899px) {
  .is-intro .u-panel { min-height:0; padding-top:24px; padding-bottom:24px; }
  .is-intro .u-poster { margin-top:16px; height:calc(100% - 92px); }
  .is-intro .u-work { padding-top:24px; padding-bottom:20px; }
  .is-intro .u-bar { margin-bottom:12px; }
  .is-intro .u-hero { margin-bottom:8px; }
  .is-intro .u-hero-body { gap:8px; }
  .is-intro .u-main { gap:12px; }
  body[data-page=intro] .u-facts { margin-top:4px; }
  .is-intro .u-intro-flow { padding-top:0; padding-bottom:0; }
  .is-intro .u-dock { padding-top:12px; }
}

@media(prefers-reduced-motion:reduce) {
  .u-spin {
    animation:none
  }

  .u-btn {
    transition:none
  }

}