*{box-sizing:border-box}body{margin:0;background:#f6f7f3;color:#33362f;font-family:var(--font);font-size:18px;line-height:1.5;word-break:keep-all}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #b78f00;outline-offset:3px}.wrap{max-width:1030px;margin:auto;padding:20px 24px 64px}.demo-notice{background:#fffbe6;border:1px solid #efdf9b;padding:12px 17px;border-radius:12px;font-size:15px;color:#5a5140}.intro{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:34px 0 26px}.eyebrow{color:#6a6e60;font-weight:700;margin:0 0 4px;font-size:16px}h1{font-size:clamp(32px,5vw,44px);letter-spacing:-.04em;line-height:1.2;margin:0}.subtitle{color:#5a5e55;margin:8px 0 0}.driver{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap;font-size:15px;color:#5a5e55}.driver strong{color:#33362f;font-size:21px}.driver b{font-size:15px;font-weight:700;background:#ffe100;border-radius:999px;padding:5px 10px;margin-left:4px}.tabs{display:flex;gap:7px;background:#e8eae3;border-radius:999px;padding:6px;margin-bottom:24px}.tab{flex:1;min-height:52px;border:0;border-radius:999px;background:transparent;color:#555950;font-weight:750}.tab.active{background:#33362f;color:white}.card{background:#fff;border:1px solid #e4e5df;border-radius:22px;padding:25px;margin-bottom:17px}.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.card-head h2{font-size:25px;letter-spacing:-.03em;margin:0}.card-head p{margin:4px 0 0;color:#62675c;font-size:16px}.badge{padding:6px 12px;border-radius:999px;background:#eef1e8;color:#4e5848;font-size:15px;font-weight:700;white-space:nowrap}.list{display:grid;gap:10px}.person{border:1px solid #e4e5df;border-radius:15px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:17px;background:#fff}.person-name{font-size:22px;font-weight:800}.person-note{font-size:15px;color:#5a5e55;margin:3px 0 0}.person-status{font-size:16px;font-weight:700;color:#356a4d;margin-top:5px}.person-status.pending{color:#6a6e60}.person-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.primary,.secondary,.quiet{min-height:50px;border-radius:12px;padding:10px 16px;font-weight:750}.primary{background:#ffe100;color:#33362f;border:1px solid #ffe100}.secondary{background:white;color:#33362f;border:1px solid #bbbfb1}.quiet{background:#f6f7f3;color:#555950;border:1px solid #e4e5df}.primary:hover{background:#fff078}.secondary:hover,.quiet:hover{background:#f0f1eb}.common{background:#fffbe6;border:1px solid #f0e5b5;border-radius:16px;padding:18px;display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:14px}.common strong{display:block;font-size:19px}.common span{font-size:15px;color:#5a5e55}.actions{display:flex;gap:8px;flex-wrap:wrap}.note-title{font-size:19px;margin:0 0 10px}.note-list{padding-left:22px;margin:0;color:#4f554a}.note-list li{margin:8px 0}.safety{font-size:15px;color:#5a5e55;text-align:center;margin:24px 0 0}.message{white-space:pre-line;line-height:1.85;background:#f6f7f3;padding:20px;border-radius:14px}.footer-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.hint{color:#62675c;font-size:15px;margin:10px 0 0}dialog{border:0;border-radius:20px;padding:24px;max-width:min(440px,calc(100% - 32px));width:100%;color:#33362f;box-shadow:0 20px 70px #0003}dialog::backdrop{background:#0008}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start}.dialog-head p{margin:0;color:#62675c;font-size:15px}.dialog-head h2{margin:3px 0 20px;font-size:25px}.close{border:0;background:none;font-size:32px;line-height:1;padding:0 5px}.dialog-head+label{display:block;font-weight:700;margin-bottom:8px}input[type=time]{width:100%;min-height:56px;border:1px solid #adb3a5;border-radius:10px;padding:10px;font-size:22px}.dialog-actions{display:flex;gap:10px;margin-top:20px}.dialog-actions button{flex:1}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#33362f;color:white;padding:12px 20px;border-radius:999px;display:none;z-index:10;white-space:nowrap;font-size:16px}.toast.show{display:block}@media(max-width:600px){body{font-size:17px}.wrap{padding:15px 14px 50px}.intro{margin:26px 0 20px;align-items:flex-start;flex-direction:column;gap:12px}.driver{align-items:flex-start;flex-direction:row;align-items:center;gap:8px}.tabs{margin-bottom:14px}.tab{font-size:16px;padding:8px 4px;min-height:50px}.card{padding:18px;border-radius:18px}.card-head h2{font-size:22px}.person{padding:14px;grid-template-columns:1fr}.person-actions{justify-content:flex-start}.person-actions button{flex:1}.common{align-items:flex-start;flex-direction:column}.actions{width:100%}.actions button{flex:1}.toast{max-width:90%;white-space:normal;text-align:center}}
select{font:inherit;width:100%;min-height:56px;border:1px solid #adb3a5;border-radius:10px;padding:10px;background:#fff;color:#33362f;font-size:20px}select:focus-visible{outline:3px solid #b78f00;outline-offset:3px}#add-form label{display:block;margin-bottom:8px;font-weight:700}
.tab-date{display:inline-block;font-size:13px;font-weight:700;line-height:1.3;color:#a3261c}.tab.active .tab-date{color:#ffb8b0}
[hidden]{display:none!important}.header-actions{display:flex;align-items:center;gap:10px}.login-screen{max-width:480px;margin:48px auto}.login-card{background:#fff;border:1px solid #e4e5df;border-radius:22px;padding:32px;box-shadow:0 18px 40px #33362f14}.login-kicker{margin:0 0 8px;font-weight:700;color:#64685e}.login-lead{margin:12px 0 24px;color:#5a5e55}.login-card label{display:block;font-size:17px;font-weight:750;margin:18px 0 8px}.login-card input{width:100%;min-height:56px;border:1px solid #b7bcb0;border-radius:12px;padding:12px 15px;font:inherit;background:#f6f7f3}.login-submit{width:100%;margin-top:8px}.login-error{color:#a3261c;min-height:24px;margin:8px 0 0;font-size:15px}.login-example{margin:24px 0 0;border-radius:12px;background:#fffbe6;padding:14px;font-size:15px;line-height:1.6;color:#514d3c}@media(max-width:600px){.login-screen{margin:24px auto}.login-card{padding:24px 20px}.header-actions{gap:5px}}
.distance-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;border-top:1px solid #e4e5df}.distance-row strong{display:block;font-size:18px}.distance-row small{display:block;font-size:14px;color:#62675c;margin-top:3px}.distance-control{display:flex;align-items:center;gap:6px;flex-shrink:0;font-weight:700}.distance-control input{width:105px;min-height:52px;border:1px solid #adb3a5;border-radius:10px;padding:8px;background:#fff;text-align:right;font-size:20px;color:#33362f}.distance-start{background:#fffbe6;border:0;border-radius:12px;padding:14px;margin-bottom:8px}@media(max-width:360px){.distance-row{align-items:flex-start;flex-direction:column}.distance-control input{width:120px}}
.distance-control select{width:90px;min-height:52px;font-size:20px;padding:8px}.distance-control select[data-distance=fraction]{width:65px}.initial-control{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0;font-size:16px;font-weight:700}.initial-control input{width:150px;min-height:52px;padding:8px;border:1px solid #adb3a5;border-radius:10px;background:white;font-size:20px}.distance-start button+button{margin-left:8px}.distance-confirmed{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#eef1e8;border-radius:12px;padding:10px 14px;font-size:15px;font-weight:700}
.demo-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:15px;color:#5a5e55}.demo-switch button{min-height:44px}.tomorrow-off{margin-top:10px;padding:25px 18px;border-radius:14px;background:#fffbe6;border:1px solid #f0e5b5;text-align:center}.tomorrow-off strong{display:block;font-size:22px;color:#33362f}.tomorrow-off p{margin:8px 0 0;font-size:16px;color:#5a5e55}
.odo-help{color:#5a5e55;font-size:16px;margin:0 0 12px}#odo-form label,#other-form label{display:block;font-weight:700;margin:12px 0 6px}.odo-input{width:100%;min-height:68px;border:1px solid #adb3a5;border-radius:12px;padding:10px;font-size:32px;font-weight:800;text-align:center;letter-spacing:.02em}.odo-field{width:100%;min-height:54px;border:1px solid #adb3a5;border-radius:10px;padding:10px;font-size:22px}.odo-steps{display:flex;gap:10px;margin-top:10px}.odo-steps button{flex:1;font-size:22px}.odo-warn{color:#9a3412;font-weight:700;font-size:16px;margin:10px 0 0;min-height:1em}.odo-edit{min-height:40px;padding:6px 12px;margin-left:6px;font-size:15px}details.distance-card summary{cursor:pointer;font-weight:750;color:#555950;min-height:32px}details.distance-card[open] summary{margin-bottom:14px}
/* 홈페이지 css/main.css 의 헤더·배너·푸터를 그대로 쓰고(휴가 사이트와 같은 방식) 오른쪽 로그아웃만 더한다 */
.tr-body{background:#fff}.tr-body .wrap{padding-top:28px}.tr-body .login-submit{border-radius:999px}
.tr-hd-r{margin-left:auto;display:flex;align-items:center;gap:14px}
.tr-hd-btn{height:44px;padding:0 20px;border-radius:999px;background:var(--brand);color:var(--ink);font-size:15px;font-weight:700;white-space:nowrap}
.tr-hd-btn:hover{background:var(--brand-soft)}
.tr-sv{height:200px}.tr-sv .hb-sv-t{font-size:clamp(28px,3.4vw,42px)}
.tr-ft{padding:30px 0}.tr-ft p{font-size:14.5px}
.login-title{font-size:clamp(28px,4vw,36px);margin:0}.intro-date{font-size:clamp(22px,3vw,28px);letter-spacing:-.03em}
.card h2{margin:0 0 12px}.card p{margin:6px 0}
@media(max-width:1080px){.tr-body .hb-brand{position:static;transform:none}.tr-body .hb-hd-in{padding:0 8px 0 16px}}
@media(max-width:760px){.tr-sv{height:140px}.tr-hd-btn{height:40px;padding:0 16px;font-size:14px}.tr-body .hb-brand img{width:48px;max-width:none}.tr-body .hb-brand-text{font-size:15px}}

/* 로그인 화면은 스크롤 없이 한 화면에 — 노트북(1366×768) 브라우저와 작은 휴대폰(360×740) 기준.
   로그인 화면일 때만 배너·여백·하단을 낮춘다(로그인 뒤 화면은 그대로). */
.tr-body:has(#login:not([hidden])) .tr-sv { height: 68px; }
.tr-body:has(#login:not([hidden])) .tr-sv .hb-sv-in { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; }
.tr-body:has(#login:not([hidden])) .tr-sv .hb-sv-g { font-size: 15px; }
.tr-body:has(#login:not([hidden])) .tr-sv .hb-sv-t { margin-top: 0; font-size: clamp(24px, 2.4vw, 30px); }
.tr-body:has(#login:not([hidden])) .wrap { padding-top: 16px; padding-bottom: 18px; }
.tr-body:has(#login:not([hidden])) .tr-ft { padding: 12px 0; }
.tr-body .login-screen { margin: 0 auto; }
.tr-body .login-card { padding: 20px 30px 16px; }
.tr-body .login-title { font-size: 24px; text-align: center; }
.tr-body .login-lead { margin: 4px 0 6px; text-align: center; font-size: 15.5px; line-height: 1.55; }
.tr-body .login-card label { margin: 10px 0 6px; font-size: 15.5px; }
.tr-body .login-card input { min-height: 48px; padding: 9px 15px; }
.tr-body .login-error { min-height: 22px; margin: 6px 0 0; }
.tr-body .login-submit { margin-top: 4px; }
@media (max-width: 760px) {
  .tr-body:has(#login:not([hidden])) .tr-sv { height: auto; padding: 18px 0 14px; }
  .tr-body:has(#login:not([hidden])) .tr-sv .hb-sv-t { font-size: 24px; }
  .tr-body:has(#login:not([hidden])) .wrap { padding-top: 12px; padding-bottom: 16px; }
  .tr-body .login-card { padding: 18px 16px 14px; }
}