/* koreadesk-4 r4 — 참가 신청 페이지(신청·마감). tokens.css(--ds-*) 다음에 읽는다.
   r3 구조 그대로(상단 단계 탭 + 한 번에 한 단계 카드). r4에서 바꾼 것: 남색 행사 제목 띠 → 클라이언트 배너만(제목은 sr-only), 탭 7칸, 안내문 상자(.guide),
   동의 항목 카드(.consent-item), 단어 수(.count), 한 줄 체크(.check), 업로드 미리보기(.file__thumb). 항공편 구간(.leg*)은 뺐다 */
:root{color-scheme:light}
[hidden]{display:none !important}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ds-bg);color:var(--ds-text);font-family:var(--ds-font-family-base);font-size:var(--ds-font-size-md);line-height:var(--ds-font-line-height-body);-webkit-text-size-adjust:100%}
a{color:var(--ds-link)}
:focus-visible{outline:var(--ds-focus-width) solid var(--ds-accent);outline-offset:var(--ds-focus-offset)}

/* 배너 — 클라이언트 그림(행사명·날짜·장소·REGISTRATION FORM 포함). PC 1920×480 cover(가운데 1200×360 안전 영역), 모바일 750×500 원본 비율 */
.banner{background:var(--ds-accent)}
.banner img{display:block;width:100%;height:clamp(280px,25vw,480px);object-fit:cover;object-position:center}
@media (max-width:767px){.banner img{height:auto;aspect-ratio:750/500}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 단계 탭 — 화면 위에 붙는 가로 띠 */
.tabs{position:sticky;top:0;z-index:10;background:var(--ds-surface);border-bottom:1px solid var(--ds-line);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.tabs__inner{max-width:960px;margin:0 auto;padding:0 var(--ds-space-4)}
.tabs__now{display:none}
.tabs ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.tabs a{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--ds-space-2);height:60px;padding:0 var(--ds-space-2);color:var(--ds-text-muted);text-decoration:none;font-size:var(--ds-font-size-sm);font-weight:var(--ds-font-weight-medium);white-space:nowrap}
.tabs a:hover{color:var(--ds-text)}
.tabs__no{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border:1.5px solid var(--ds-line-strong);border-radius:50%;font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-bold)}
.tabs a[aria-current="step"]{color:var(--ds-accent);font-weight:var(--ds-font-weight-semibold)}
.tabs a[aria-current="step"]::after{content:"";position:absolute;left:var(--ds-space-2);right:var(--ds-space-2);bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--ds-accent)}
.tabs a[aria-current="step"] .tabs__no{border-color:var(--ds-accent);background:var(--ds-accent);color:var(--ds-on-accent)}
.tabs a.is-done .tabs__no{border-color:var(--ds-tone-ok-fg);color:var(--ds-tone-ok-fg)}
.tabs__done{color:var(--ds-tone-ok-fg);font-weight:var(--ds-font-weight-bold)}
.tabs__err{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ds-tone-fail-fg);color:#fff;font-size:12px;font-weight:var(--ds-font-weight-bold)}

/* 본문 */
.wrap{max-width:960px;margin:0 auto;padding:var(--ds-space-5) var(--ds-space-4) var(--ds-space-7)}
.legend-note{margin:0 0 var(--ds-space-4);font-size:var(--ds-font-size-sm);color:var(--ds-text-muted)}

/* 단계 카드 — 지금 단계만 보인다(.is-off 는 숨김. [hidden] 이 아니라 검사 대상에는 남는다) */
.panel{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);box-shadow:0 1px 2px rgba(16,24,40,.04)}
/* 배너 색 띠 — 빨강 → 자주 → 남청(배너 그라데이션). 꾸밈 전용: 빨강은 글자·상태에 쓰지 않는다(오류 빨강과 겹치지 않게) */
.section.panel,.state.panel{border-top:0;background-image:linear-gradient(90deg,var(--ds-brand-red),var(--ds-brand-violet) 45%,var(--ds-accent));background-size:100% 4px;background-repeat:no-repeat}
.section.is-off{display:none}
.panel__head{padding:var(--ds-space-5) var(--ds-space-6) var(--ds-space-4);border-bottom:1px solid var(--ds-line)}
.panel__step{margin:0;font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--ds-accent)}
.section__title{margin:var(--ds-space-1) 0 0;font-size:var(--ds-font-size-xl);line-height:var(--ds-font-line-height-tight);font-weight:var(--ds-font-weight-bold)}
.panel__desc{margin:var(--ds-space-1) 0 0;color:var(--ds-text-muted);font-size:var(--ds-font-size-sm)}
.panel__body{padding:var(--ds-space-2) var(--ds-space-6) var(--ds-space-5)}
.panel__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--ds-space-3);padding:var(--ds-space-4) var(--ds-space-6);border-top:1px solid var(--ds-line);background:var(--ds-surface-sunken);border-radius:0 0 var(--ds-radius-md) var(--ds-radius-md)}
.group{margin:var(--ds-space-6) 0 0;font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--ds-text-muted);display:flex;align-items:center;gap:var(--ds-space-3)}
.group::after{content:"";flex:1;height:1px;background:var(--ds-line)}

/* 안내문 */
.notice{margin:var(--ds-space-4) 0 0;padding:var(--ds-space-4) var(--ds-space-5);background:var(--ds-surface-sunken);border-left:3px solid var(--ds-line-strong);border-radius:0 var(--ds-radius-sm) var(--ds-radius-sm) 0;font-size:var(--ds-font-size-sm)}
.notice p{margin:0}.notice p+p,.notice ul+p,.notice p+ul{margin-top:var(--ds-space-2)}
.notice ul{margin:0;padding-left:1.2em}
.notice strong{font-weight:var(--ds-font-weight-semibold)}
.lead-accent{color:var(--ds-accent)}
.notice--info{background:var(--ds-tone-info-bg);border-left-color:var(--ds-tone-info-fg)}
.notice--flush{margin-top:0}
/* 안내문 상자 — 문단마다 아이콘 하나, 줄 간격 넉넉히(긴 기획 문구를 읽기 쉽게) */
.guide{display:grid;gap:var(--ds-space-3);margin:var(--ds-space-4) 0 0;padding:var(--ds-space-4) var(--ds-space-5);background:var(--ds-accent-soft);border-radius:var(--ds-radius-md)}
.guide__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--ds-space-3);align-items:start}
.guide__item+.guide__item{padding-top:var(--ds-space-3);border-top:1px solid var(--ds-accent-line)}
.guide__icon{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ds-surface);color:var(--ds-accent)}
.guide p{margin:0;font-size:var(--ds-font-size-sm);line-height:1.65;max-width:72ch}
.guide strong{font-weight:var(--ds-font-weight-semibold);color:var(--ds-accent)}
.hint{margin:var(--ds-space-1) 0 0;font-size:var(--ds-font-size-sm);color:var(--ds-text-muted)}
.hint--lead{margin:0 0 var(--ds-space-2)}
.hint-line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ds-space-3)}
.count{flex:none;margin:var(--ds-space-1) 0 0;font-size:var(--ds-font-size-sm);font-variant-numeric:tabular-nums;color:var(--ds-text-muted)}
.count.is-over{color:var(--ds-tone-fail-fg);font-weight:var(--ds-font-weight-semibold)}
.check{display:inline-flex;align-items:center;gap:var(--ds-space-2);margin-top:var(--ds-space-2);font-size:var(--ds-font-size-sm);cursor:pointer}
.check input{width:18px;height:18px;margin:0;accent-color:var(--ds-accent)}

/* 행 — 라벨 위, 입력 아래. .cols 로 여러 열 */
.row{padding:var(--ds-space-4) 0 0;min-width:0}
fieldset.row{margin:0;border:0;padding:var(--ds-space-4) 0 0;min-width:0}
.row__label,fieldset.row>legend{display:block;padding:0;margin-bottom:var(--ds-space-2);font-size:var(--ds-font-size-sm);font-weight:var(--ds-font-weight-semibold);line-height:var(--ds-font-line-height-tight)}
fieldset.row>legend{float:left;width:100%}  /* legend 가 테두리 자리에 붙지 않고 label 과 같은 위치에 오게 */
fieldset.row>legend+*{clear:both}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--ds-space-5)}
.cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.req{color:var(--ds-required);margin-left:2px}
.opt{font-weight:var(--ds-font-weight-regular);color:var(--ds-text-muted)}

/* 입력 */
.input{display:block;width:100%;min-height:var(--ds-control-height);padding:9px var(--ds-space-3);border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-sm);background:var(--ds-surface);color:var(--ds-text);font:inherit;font-size:var(--ds-font-size-md)}
.input::placeholder{color:var(--ds-text-muted)}
.input:hover{border-color:var(--ds-text-muted)}
.input:focus-visible{outline-offset:0;border-color:var(--ds-accent)}
.input[readonly]{background:var(--ds-surface-sunken);color:var(--ds-text-muted);border-style:dashed}
textarea.input{resize:vertical}
select.input{appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--ds-text-muted) 50%),linear-gradient(135deg,var(--ds-text-muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.grid{display:grid;gap:var(--ds-space-3)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sub{display:block;margin-bottom:var(--ds-space-1);font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-medium);color:var(--ds-text-muted)}
.pair{display:flex;flex-wrap:wrap;gap:var(--ds-space-3) var(--ds-space-6)}

/* 선택지 — 이어 붙은 버튼(하나 고르기) / 타일(여럿 고르기) */
.choice{position:relative;cursor:pointer;user-select:none}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice>span{display:flex;align-items:center;justify-content:center;gap:var(--ds-space-2);min-height:var(--ds-control-height);padding:0 var(--ds-space-4);font-weight:var(--ds-font-weight-medium);text-align:center}
.choice input:focus-visible+span{outline:var(--ds-focus-width) solid var(--ds-accent);outline-offset:2px;position:relative;z-index:1}
.choices--seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-sm);overflow:hidden;background:var(--ds-surface)}
.choices--seg .choice+.choice{border-left:1px solid var(--ds-line-strong)}
.choices--seg .choice:hover>span{background:var(--ds-surface-sunken)}
.choices--seg .choice input:checked+span{background:var(--ds-accent);color:var(--ds-on-accent)}
.choices--tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--ds-space-2)}
.choices--one{grid-template-columns:minmax(0,1fr)}
.choices--tiles .choice>span{justify-content:flex-start;text-align:left;padding:0 var(--ds-space-4) 0 var(--ds-space-3);border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-sm);background:var(--ds-surface)}
.choices--tiles .choice>span::before{content:"";flex:none;width:18px;height:18px;border:1.5px solid var(--ds-line-strong);border-radius:4px;background:var(--ds-surface) no-repeat center/12px 12px}
.choices--tiles .choice:hover>span{border-color:var(--ds-text-muted)}
.choices--tiles .choice input:checked+span{border-color:var(--ds-accent);background:var(--ds-accent-soft);color:var(--ds-accent)}
.choices--tiles .choice input:checked+span::before{border-color:var(--ds-accent);background-color:var(--ds-accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.reveal{margin-top:var(--ds-space-3);padding:var(--ds-space-3);background:var(--ds-surface-sunken);border-radius:var(--ds-radius-sm)}

/* 업로드 — 점선 영역, 고른 뒤 파일 줄 */
.file{display:grid;gap:var(--ds-space-2)}
.file input{position:absolute;opacity:0;width:1px;height:1px}
.drop{display:grid;justify-items:center;gap:2px;padding:var(--ds-space-5) var(--ds-space-4);border:1.5px dashed var(--ds-line-strong);border-radius:var(--ds-radius-md);background:var(--ds-surface-sunken);color:var(--ds-text-muted);text-align:center;cursor:pointer}
.drop:hover{border-color:var(--ds-accent);color:var(--ds-accent)}
.file:has(input:focus-visible) .drop{outline:var(--ds-focus-width) solid var(--ds-accent);outline-offset:var(--ds-focus-offset)}
.drop__main{font-weight:var(--ds-font-weight-semibold);color:var(--ds-accent)}
.drop__sub{font-size:var(--ds-font-size-xs)}
.file__chip{display:flex;align-items:center;gap:var(--ds-space-2);padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-tone-ok-fg);border-radius:var(--ds-radius-sm);background:var(--ds-tone-ok-bg);color:var(--ds-tone-ok-fg);font-size:var(--ds-font-size-sm);font-weight:var(--ds-font-weight-medium)}
.file__thumb{flex:none;width:40px;height:40px;object-fit:cover;border-radius:4px;border:1px solid var(--ds-line)}
.file__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ds-text)}
.file__remove{border:0;background:none;color:var(--ds-link);font:inherit;font-size:var(--ds-font-size-sm);text-decoration:underline;cursor:pointer}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);min-height:var(--ds-control-height);padding:0 var(--ds-space-5);border:1px solid var(--ds-accent);border-radius:var(--ds-radius-sm);background:var(--ds-surface);color:var(--ds-accent);font:inherit;font-weight:var(--ds-font-weight-semibold);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--ds-accent-soft)}
.btn--ghost{border-color:transparent;background:none}
.btn--primary{background:var(--ds-accent);color:var(--ds-on-accent)}
.btn--primary:hover{background:var(--ds-accent-hover)}
.btn--lg{min-height:52px;padding:0 var(--ds-space-6);font-size:var(--ds-font-size-lg)}

/* 동의 — 머리 문단 + 항목 카드 5개(제목·필수/선택·본문·동의/비동의) */
.consent-lead{margin:var(--ds-space-4) 0 0;padding:var(--ds-space-4) var(--ds-space-5);background:var(--ds-surface-sunken);border-radius:var(--ds-radius-sm);font-size:var(--ds-font-size-sm);line-height:1.65}
fieldset.consent-item{margin-top:var(--ds-space-3);padding:var(--ds-space-4) var(--ds-space-5);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface)}
fieldset.consent-item>legend{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ds-space-2);font-size:var(--ds-font-size-md)}
.consent-item__no{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ds-accent-soft);color:var(--ds-accent);font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-bold)}
.badge{padding:1px var(--ds-space-2);border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-pill);font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-medium);color:var(--ds-text-muted)}
.badge--req{border-color:var(--ds-required);color:var(--ds-required)}
.consent-item__body{font-size:var(--ds-font-size-sm);color:var(--ds-text-muted);line-height:1.6}
.consent-item__body p{margin:0}.consent-item__body p+p{margin-top:var(--ds-space-1)}
.consent-item__body b{color:var(--ds-text);font-weight:var(--ds-font-weight-semibold)}
.choices--consent{margin-top:var(--ds-space-3)}
.consent-item>.notice{margin-top:var(--ds-space-3)}
fieldset.consent-item.is-declined[data-must-agree]{border-color:var(--ds-tone-fail-fg)}
.notice--fail{background:var(--ds-tone-fail-bg);border-left-color:var(--ds-tone-fail-fg);color:var(--ds-tone-fail-fg)}
.review{margin-top:var(--ds-space-5)}
.review h3{margin:0 0 var(--ds-space-2);font-size:var(--ds-font-size-sm)}
.review ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--ds-space-2)}
.review li{display:flex;align-items:center;gap:var(--ds-space-2);padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);font-size:var(--ds-font-size-sm)}
.review li b{width:20px;text-align:center}
.review .ok b{color:var(--ds-tone-ok-fg)}
.review .no b{color:var(--ds-tone-fail-fg)}
.review a{margin-left:auto;font-size:var(--ds-font-size-xs);white-space:nowrap}

/* 오류 */
.errors{margin-bottom:var(--ds-space-4);padding:var(--ds-space-4) var(--ds-space-5);background:var(--ds-tone-fail-bg);border:1px solid var(--ds-tone-fail-fg);border-radius:var(--ds-radius-md);color:var(--ds-tone-fail-fg)}
.errors h2{margin:0 0 var(--ds-space-2);font-size:var(--ds-font-size-lg)}
.errors ul{margin:0;padding-left:1.2em}
.errors a{color:inherit}
.err{margin:var(--ds-space-1) 0 0;font-size:var(--ds-font-size-sm);font-weight:var(--ds-font-weight-medium);color:var(--ds-tone-fail-fg)}
.is-invalid .input:invalid,.is-invalid .choices--seg,.is-invalid .choices--tiles .choice>span,.is-invalid .drop{border-color:var(--ds-tone-fail-fg)}

/* 제출 팝업(목업) */
.sent{max-width:420px;border:0;border-radius:var(--ds-radius-md);padding:var(--ds-space-5);box-shadow:0 20px 50px rgba(0,0,0,.2)}
.sent::backdrop{background:rgba(16,24,40,.45)}
.sent h2{margin:0;font-size:var(--ds-font-size-xl)}
.sent p{margin:var(--ds-space-2) 0 var(--ds-space-4);color:var(--ds-text-muted)}

/* 마감 화면 — 같은 카드, 아이콘 왼쪽 */
.state{display:flex;gap:var(--ds-space-5);align-items:flex-start;padding:var(--ds-space-6)}
.state__icon{display:inline-grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--ds-accent-soft);color:var(--ds-accent)}
.state__title{margin:0;font-size:var(--ds-font-size-xl);font-weight:var(--ds-font-weight-bold)}
.state__text{margin:var(--ds-space-2) 0 0;color:var(--ds-text-muted)}
.state__box{margin:var(--ds-space-4) 0 0;padding:var(--ds-space-4) var(--ds-space-5);background:var(--ds-surface-sunken);border-left:3px solid var(--ds-line-strong);border-radius:0 var(--ds-radius-sm) var(--ds-radius-sm) 0;font-size:var(--ds-font-size-sm)}
.state__box p{margin:0}.state__box p+p{margin-top:var(--ds-space-2)}

.foot{padding:var(--ds-space-5) var(--ds-space-4);text-align:center;font-size:var(--ds-font-size-xs);color:var(--ds-text-muted)}

/* 태블릿: 탭 이름을 줄이고 번호만 크게 */
@media (max-width:860px){
  .tabs a{flex-direction:column;gap:2px;height:64px;font-size:var(--ds-font-size-xs)}
  .tabs__done,.tabs__err{position:absolute;top:8px;right:calc(50% - 22px);font-size:11px}
  .tabs__done{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--ds-tone-ok-fg);color:#fff}
  .cols--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 모바일: 위쪽 띠 = "2 / 6 지금 단계 이름" + 여섯 칸 진행 막대(눌러서 이동) */
@media (max-width:600px){
  .guide{padding:var(--ds-space-3) var(--ds-space-4)}
  .guide__icon{width:28px;height:28px}
  fieldset.consent-item{padding:var(--ds-space-3) var(--ds-space-4)}
  .hint-line{flex-direction:column;gap:0}
  .tabs__inner{padding:var(--ds-space-2) var(--ds-space-4) var(--ds-space-3)}
  .tabs__now{display:block;margin:0 0 var(--ds-space-2);font-size:var(--ds-font-size-sm);font-weight:var(--ds-font-weight-semibold);color:var(--ds-accent)}
  .tabs ol{gap:4px}
  .tabs a{height:24px;padding:0;align-items:stretch}
  .tabs a::before{content:"";display:block;width:100%;height:6px;margin-top:9px;border-radius:3px;background:var(--ds-line)}
  .tabs a.is-done::before{background:var(--ds-accent-line)}
  .tabs a[aria-current="step"]::before{background:var(--ds-accent)}
  .tabs a[aria-current="step"]::after{display:none}
  .tabs__no,.tabs__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabs__done{display:none !important}
  .tabs__err{top:-2px;right:calc(50% - 9px)}
  .wrap{padding:var(--ds-space-4) var(--ds-space-3) var(--ds-space-6)}
  .panel__head,.panel__body,.panel__foot{padding-left:var(--ds-space-4);padding-right:var(--ds-space-4)}
  .cols,.cols--3,.cols--4,.grid--3,.grid--2{grid-template-columns:minmax(0,1fr)}
  .choices--seg{display:flex}
  .choices--seg .choice{flex:1 1 auto}
  .panel__foot .btn{flex:1}
  .panel__foot>span{display:none}
  .state{flex-direction:column;padding:var(--ds-space-5) var(--ds-space-4)}
}
/* koreadesk: 폭 400px 이하에서 마지막 단계 버튼 두 개("← Program"·"Complete Registration")가 한 줄에 안 들어가 옆으로 넘치던 것 — 제출 버튼을 다음 줄 전체 폭으로 */
@media (max-width:400px){.panel__foot{flex-wrap:wrap}.panel__foot .btn--lg{flex-basis:100%}}