/* KoreaGenie 리뉴얼 [P5] Agency 페이지 CSS.
   공통 chrome/버튼/.card/.field/.field-row/.chip/.stepper/.wrap/.state 및 --md-*/--r-* 토큰은
   md3-tokens.css + md3-components.css 를 재사용한다. 이 파일은 Agency 4화면 전용 스타일만 담는다. */

/* ===== page head / hero / breadcrumb ===== */
.page-head{padding:24px 0 8px}
.crumb{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--md-on-surface-variant);padding:20px 0 12px;flex-wrap:wrap}
.crumb a:hover{color:var(--md-primary)}
.crumb .material-symbols-rounded{font-size:16px}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--md-primary);background:var(--md-primary-container);padding:6px 12px;border-radius:var(--r-full);margin-bottom:14px}
.page-head h1,.hero h1{font-size:2rem;font-weight:700;letter-spacing:-.4px}
.page-head p,.hero p{color:var(--md-on-surface-variant);font-size:1rem;margin-top:6px;max-width:680px}
.hero{padding:32px 0 8px}

/* ===== info note ===== */
.note{display:flex;gap:10px;align-items:flex-start;background:var(--md-primary-container);color:var(--md-on-primary-container);border-radius:var(--r-md);padding:14px 16px;font-size:.88rem;margin-top:4px}
.note .material-symbols-rounded{font-size:20px;flex:none}

/* ===== reservation categories ===== */
.cat-note{font-size:.82rem;color:var(--md-on-surface-variant);margin:0 0 12px;display:flex;align-items:center;gap:6px}
.cat-note .material-symbols-rounded{font-size:16px;color:var(--md-tertiary)}
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:8px}
.cat{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;border:1px solid var(--md-outline-variant);border-radius:var(--r-md);background:var(--md-surface);cursor:pointer;transition:background .15s,border-color .15s;text-align:center}
.cat:hover,.cat.sel{background:var(--md-primary-container);border-color:transparent}
.cat .ic{width:46px;height:46px;border-radius:50%;background:var(--md-secondary-container);color:var(--md-on-secondary-container);display:flex;align-items:center;justify-content:center}
.cat.sel .ic{background:var(--md-primary);color:var(--md-on-primary)}
.cat .nm{font-size:.9rem;font-weight:600}
.cat .ko{font-size:.76rem;color:var(--md-on-surface-variant)}

/* ===== two-column form layout + sticky summary ===== */
.two-col{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start;padding-bottom:120px}
.col-left{display:flex;flex-direction:column;gap:18px}
.col-right{position:sticky;top:96px}
.summary-card{background:var(--md-surface-container-lowest);border:1px solid var(--md-outline-variant);border-radius:var(--r-md);padding:22px;box-shadow:var(--elev-1)}
.summary-card h2{font-size:1.1rem;font-weight:600;margin-bottom:14px}
.sum-row{display:flex;justify-content:space-between;font-size:.92rem;padding:6px 0;color:var(--md-on-surface-variant)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--md-outline-variant);margin-top:8px;padding-top:12px}
.sum-total .val{font-size:1.5rem;font-weight:700;color:var(--md-primary)}

/* ===== hub service tiles ===== */
.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:8px 0 40px}
.hub-card{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:280px;display:flex;align-items:flex-end;color:#fff;background:var(--md-on-primary-container)}
.hub-card.reservation{background:#344154}
.hub-card img{position:absolute;inset:0;width:100%;height:100%}
.hub-card .veil{position:absolute;inset:0;background:rgba(23,26,33,.68)}
.hub-card .hc-body{position:relative;padding:24px}
.hub-card h2{font-size:1.6rem;font-weight:700}
.hub-card .ko{font-size:1rem;opacity:.9}
.hub-card p{font-size:.9rem;opacity:.92;margin:6px 0 14px;max-width:90%}

/* ===== hub trust strip ("Why KoreaGenie Agency") ===== */
.agency-trust{margin-bottom:40px;background:var(--md-surface-container-lowest);border:1px solid var(--md-outline-variant)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{display:flex;flex-direction:column;gap:8px}
.step .num{width:36px;height:36px;border-radius:50%;background:var(--md-primary-container);color:var(--md-on-primary-container);display:flex;align-items:center;justify-content:center}
.step .num .material-symbols-rounded{font-size:18px}
.step h4{font-size:.95rem;font-weight:600}
.step p{font-size:.82rem;color:var(--md-on-surface-variant);margin:0}

/* ===== form/summary helpers (시안 인라인 추출) ===== */
.field-hint{font-size:.82rem;color:var(--md-on-surface-variant)}
.photo-attach{margin-top:10px}
.summary-submit{margin-top:14px}
.sum-note{font-size:.78rem;color:var(--md-on-surface-variant);margin-top:10px;display:flex;gap:6px;align-items:flex-start}
.sum-note .material-symbols-rounded{font-size:16px;color:var(--md-tertiary);flex:none}
.done-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}

/* ===== request complete ===== */
.done-wrap{max-width:560px;margin:0 auto;text-align:center;padding:30px 0 60px}
.done-ic{width:84px;height:84px;border-radius:50%;background:var(--md-primary-container);color:var(--md-on-primary-container);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.done-ic .material-symbols-rounded{font-size:46px;font-variation-settings:'FILL' 1}
.done-wrap h1{font-size:1.7rem;font-weight:700}
.done-wrap p{color:var(--md-on-surface-variant);margin-top:6px}
.ref-no{display:inline-flex;align-items:center;gap:8px;margin:18px 0;font-family:var(--md-font-mono,'Roboto Mono',monospace);font-size:1.1rem;font-weight:700;background:var(--md-secondary-container);color:var(--md-on-secondary-container);padding:10px 18px;border-radius:var(--r-sm)}
.timeline{text-align:left;margin:18px 0;display:flex;flex-direction:column;gap:0}
.tl{display:flex;gap:12px;padding:10px 0}
.tl .dot{width:14px;height:14px;border-radius:50%;background:var(--md-outline-variant);margin-top:4px;flex:none;position:relative}
.tl.done .dot{background:var(--md-primary)}
.tl .tx h4{font-size:.95rem;font-weight:600}
.tl .tx p{font-size:.82rem;color:var(--md-on-surface-variant);margin:0}

/* ===== responsive ===== */
@media(max-width:820px){
  .two-col{grid-template-columns:1fr}
  .col-right{position:static}
  .hub-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .page-head h1,.hero h1{font-size:1.6rem}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
}