/* customer.css — 고객 포털 꼴 · 시안 `_설계\06_MON\목업\고객용\MON_고객용_디자인시안_V1.html` 그대로
 * 색 · 둥근 모서리 · 글자는 ces-theme.css(:root) 에서만 읽습니다 — 색을 글자로 박지 않습니다.
 * ★휴대폰 우선(390) : 폭이 좁으면 한 칸으로 · 단추 높이 48 이상 · 글자 17 이상
 */
@import url('ces-theme.css');

:root { --teal: #00838f; }
* { box-sizing: border-box }
html, body { margin: 0 }
body {
  font-family: var(--font); background: var(--bg); color: var(--ink);
  font-size: 18px; -webkit-font-smoothing: antialiased;
}

/* ── 머리줄 ───────────────────────────────────────── */
.top { background: linear-gradient(120deg, var(--navy), #123a52); color: #fff; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 12px #0006 }
.top .in { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 12px 20px; flex-wrap: wrap }
.logo { display: flex; align-items: center; gap: 12px }
.logo .mk { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #26c6da, var(--teal)); display: grid; place-items: center; font-weight: 900; color: #fff }
.logo b { font-size: 20px } .logo small { display: block; font-size: 13px; opacity: .78 }
.nav { display: flex; gap: 4px; flex-wrap: wrap; width: 100% }
.nav button { all: unset; cursor: pointer; padding: 11px 14px; border-radius: 12px; font-size: 16px; font-weight: 700; color: #c9e3ea; min-height: 44px; box-sizing: border-box }
.nav button.on { background: #ffffff1f; color: #fff }
.nav button:focus-visible { outline: 3px solid #80deea; outline-offset: 2px }
.nav .cnt { background: var(--wait); color: #fff; border-radius: var(--pillr); font-size: 12px; padding: 1px 7px; margin-left: 4px }
.who { margin-left: auto; text-align: right; font-size: 14px; opacity: .92 } .who b { display: block; font-size: 15px }
.who button { all: unset; cursor: pointer; font-size: 13px; text-decoration: underline; color: #c9e3ea; margin-top: 2px; min-height: 32px }
@media (min-width: 861px) { .nav { width: auto; margin-left: 10px } }

/* ★가로 넘침 막기 : 그리드 · 플렉스 칸은 기본 min-width:auto 라 속 내용(단계 띠 · 표)이 칸을 밀어냅니다 */
.grid > *, .two > *, .site > *, .hero > *, .rep > *, .card > *, .top .in > * { min-width: 0 }
.stp, .gates, .cal, .photos, .rep .bd, .doc > * { min-width: 0 }
.site .nm, .card h2, .doc b, .hero h1 { overflow-wrap: anywhere }
html { overflow-x: hidden }

main { max-width: 1280px; margin: 0 auto; padding: 20px 16px 72px }
.crumb { font-size: 16px; color: var(--sub); margin: 0 0 14px }
.crumb a { color: var(--run); font-weight: 700; cursor: pointer }
.grid { display: grid; gap: 18px }
.two { grid-template-columns: 1fr }
@media (min-width: 861px) { .two { grid-template-columns: 1.1fr 1fr } main { padding: 22px 26px 60px } }

.card { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); padding: 20px 18px }
@media (min-width: 861px) { .card { padding: 22px 24px } }
.card h2 { margin: 0; font-size: 21px; font-weight: 800; display: flex; align-items: center; gap: 10px }
.hint { font-size: 15px; color: var(--sub); margin: 4px 0 14px }
.clk { cursor: pointer; transition: transform .14s, box-shadow .14s }
.clk:hover { transform: translateY(-3px); box-shadow: var(--sh2) }
.clk:focus-visible { outline: 3px solid var(--run); outline-offset: 3px }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 800; padding: 4px 11px; border-radius: var(--pillr) }
.p-ok { background: var(--okb); color: var(--ok) } .p-run { background: var(--runb); color: var(--run) } .p-wait { background: var(--waitb); color: var(--wait-t) }

.hero { background: radial-gradient(900px 260px at 90% -40%, #26c6da44, transparent), linear-gradient(120deg, var(--navy), #134b5f); color: #fff; border-radius: 24px; padding: 22px 20px; display: grid; gap: 20px; box-shadow: var(--sh) }
@media (min-width: 861px) { .hero { grid-template-columns: 1.3fr 1fr; padding: 28px 32px } }
.hero h1 { margin: 6px 0 10px; font-size: 26px; letter-spacing: -.5px; line-height: 1.32 }
@media (min-width: 861px) { .hero h1 { font-size: 32px } }
.hero p { margin: 0; color: #c9e3ea; line-height: 1.6 }
.ask { background: #fff; color: var(--ink); border-radius: var(--r); padding: 16px 18px; box-shadow: 0 10px 24px #0004 }
.ask .t { font-weight: 900; color: var(--wait-t); font-size: 16px }
.ask .b { font-size: 19px; font-weight: 900; margin: 6px 0 12px }

.btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 16px; border-radius: var(--r2); padding: 0 18px; min-height: var(--btn-h); background: var(--run); color: #fff; box-shadow: 0 4px 12px #1565c040 }
.btn.o { background: #fff; color: var(--run); border: 2px solid #bcd3f3; box-shadow: none }
.btn.t { background: var(--teal); box-shadow: 0 4px 12px #00838f40 }
.btn.off { background: var(--off); box-shadow: none; cursor: default }
.btn:focus-visible { outline: 3px solid var(--run); outline-offset: 3px }

.stp { display: flex; gap: 4px; margin-top: 6px; overflow-x: auto }
.stp div { flex: 1; min-width: 64px; text-align: center }
.stp .b { height: 12px; border-radius: 6px; background: var(--gray) }
.stp .d .b { background: var(--ok) }
.stp .c .b { background: linear-gradient(90deg, var(--run) 60%, var(--gray) 60%) }
.stp .l { font-size: 13px; font-weight: 700; color: var(--sub); margin-top: 8px }
.stp .c .l { color: var(--run); font-weight: 900 } .stp .d .l { color: var(--ok) }

.site { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center }
@media (min-width: 861px) { .site { grid-template-columns: 150px 1fr 220px; gap: 22px } }
.site .nm { font-size: 21px; font-weight: 900 }
@media (min-width: 861px) { .site .nm { font-size: 24px } }
.site .rt { font-size: 15px; color: var(--sub); line-height: 1.8 }
@media (min-width: 861px) { .site .rt { text-align: right } }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px }
.cal div { aspect-ratio: 1.1; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; cursor: pointer; border: 2px solid transparent }
.cal .h { aspect-ratio: auto; font-size: 13px; color: var(--sub); cursor: default }
.cal .r { background: var(--okb); color: var(--ok) }
.cal .u { background: var(--waitb); color: var(--wait-t) }
.cal .n { background: var(--soft); color: #b0bac8; cursor: default }
.cal .sel { border-color: var(--run) }
.cal small { font-size: 11px; font-weight: 700 }

.rep { border: 2px solid var(--line0); border-radius: var(--r); overflow: hidden; background: var(--card) }
.rep .hd { background: var(--soft); padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--line0); flex-wrap: wrap }
.rep .bd { padding: 16px }
.rep .row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line0); font-size: 17px }
@media (min-width: 861px) { .rep .row { grid-template-columns: 150px 1fr; gap: 14px } }
.rep .row b { color: var(--sub); font-size: 15px }

.photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
@media (min-width: 861px) { .photos { grid-template-columns: repeat(4, 1fr) } }
.photos div { aspect-ratio: 4/3; border-radius: 12px; background: linear-gradient(135deg, #78909c, #455a64); position: relative }
.photos div span { position: absolute; left: 8px; bottom: 6px; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #0008 }

.doc { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--line0) }
@media (min-width: 861px) { .doc { grid-template-columns: 52px 1fr 150px 140px } }
.doc .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 13px; background: var(--blk) }
.doc .sub { color: var(--sub); font-size: 15px }

.gates { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 10px 0 }
.gate { min-width: 185px; border-radius: 16px; padding: 14px; background: var(--okb); border: 2px solid var(--ok) }
.gate.todo { background: var(--soft); border-color: var(--gray) }
.gate .g1 { font-weight: 900 } .gate .g2 { font-size: 20px; font-weight: 900; color: var(--ok); margin: 4px 0 }
.gate.todo .g2 { color: #8a96a8 } .gate .g3 { font-size: 14px; color: var(--sub) }
.glink { width: 36px; height: 4px; background: var(--ok); flex: none } .glink.todo { background: var(--gray) }

.safe { background: #eef7f8; border: 1px dashed #80cbc4; border-radius: var(--r3); padding: 12px 14px; font-size: 14px; color: #00695c; margin-top: 16px }
.leg { font-size: 15px; display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px }
.leg i, .cg-leg i { display: inline-block; width: 13px; height: 13px; border-radius: 4px; margin-right: 7px; vertical-align: -1px }
.cg-leg { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 15px }
.cg-clk { cursor: default }
svg text { font-family: var(--font) }

/* 알림 */
#cust-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r2); font-weight: 700; z-index: 50; transition: transform .25s; max-width: 92vw }
#cust-toast.show { transform: translate(-50%, 0) }
#cust-toast.bad { background: var(--blk) }

/* 로그인 화면 */
.lg { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(900px 400px at 50% -10%, #26c6da33, transparent), var(--bg) }
.lgbox { width: 100%; max-width: 430px; background: var(--card); border-radius: 22px; box-shadow: var(--sh); padding: 26px 22px }
.lgbox h1 { font-size: 24px; margin: 14px 0 4px } .lgbox .sub { color: var(--sub); font-size: 15px; margin: 0 0 20px }
.f { display: block; font-size: 15px; font-weight: 700; color: var(--sub); margin: 14px 0 6px }
.i { width: 100%; min-height: var(--btn-h); border: 2px solid var(--line0); border-radius: var(--r2); padding: 0 14px; font-size: 17px; font-family: var(--font) }
.i:focus { outline: 3px solid var(--run); outline-offset: 1px; border-color: var(--run) }
.err { background: var(--blkb); color: var(--blk); border-radius: var(--r2); padding: 12px 14px; font-size: 15px; font-weight: 700; margin-top: 14px }
.note { background: var(--waitb); border-left: 6px solid var(--wait); border-radius: 10px; padding: 12px 14px; font-size: 15px; margin-top: 18px; color: var(--ink) }
.w100 { width: 100%; margin-top: 18px }

@media print {
  .top, .nav, .btn, #cust-toast, .crumb { display: none !important }
  body { background: #fff; font-size: 14px } .card, .rep { box-shadow: none; border-color: #999 }
}