:root{
  --line: #06C755;
  --line-dark: #04a847;
  --bg: #F7F8FA;
  --card: #ffffff;
  --text: #1f2328;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2563eb;
  --warn: #f59e0b;
  --danger: #ef4444;
  --ok: #16a34a;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  --r: 12px;
  --tabbar-h: 60px;
  --appbar-h: 52px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font-family:inherit;font-size:inherit;cursor:pointer}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}

#app{
  max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg);
  position: relative; padding-bottom: var(--tabbar-h);
}

.appbar{
  position: sticky; top: 0; z-index: 50; height: var(--appbar-h);
  background: var(--line); color: #fff; display: flex; align-items: center; padding: 0 8px;
}
.appbar h1{flex:1;font-size:17px;font-weight:600;text-align:center;margin:0;letter-spacing:.02em}
.icon-btn{
  width:40px;height:40px;border:0;background:transparent;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
}
.icon-btn:active{background:rgba(255,255,255,.15)}
.icon-btn[hidden]{display:none}

main{ padding: 12px 12px 24px; }
.view{ display:none } .view.active{ display:block }

/* ===== Recruitment Cards (with hero image) ===== */
.card-list{ display:flex; flex-direction:column; gap:10px }
.rec-card{
  position: relative;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid #e0e0e0;
}
.rec-card .hero{
  position: relative;
  height: 110px;
  background: linear-gradient(135deg, #06C755, #04a847);
  background-size: cover; background-position: center;
  display:flex; align-items:flex-end;
}
.rec-card .hero::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05));
}
.rec-card .hero-body{
  position: relative; z-index:1; padding: 8px 12px; color:#fff;
}
.rec-card .hero-body .title{ font-size:15px; font-weight:700; line-height:1.3; text-shadow: 0 1px 2px rgba(0,0,0,.6); margin:0 }
.rec-card .body{ padding: 10px 12px 12px }
.rec-card .meta{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px }
.rec-card .meta-row{ display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; margin-top:4px }
.rec-card .meta-row svg{ flex-shrink:0; opacity:.7 }
.rec-card .footer{ margin-top:8px; display:flex; align-items:center; justify-content:space-between }
.rec-card .price{ font-weight:700; font-size:15px; color:var(--text) }
.rec-card .price small{ font-weight:500; color:var(--muted); font-size:11px; margin-left:2px }
.rec-card .cta{ font-size:13px; color:var(--line); font-weight:600 }
.rec-card .status-band{
  text-align:center; padding:6px; font-size:12px; font-weight:600; color:#166534;
  background: #DCFCE7; border-top:1px solid #BBF7D0;
}
.rec-card .status-band.applied{ background:#E0E7FF; color:#3730a3; border-top-color:#C7D2FE }
.rec-card .status-band.closed{ background:#F3F4F6; color:#6b7280; border-top-color:#E5E7EB }

.badge{ font-size:11px; padding:2px 8px; border-radius:999px; font-weight:600; white-space:nowrap }
.badge.area{ background:#E8F7EE; color:#06794a }
.badge.section{ background:#EEF2FF; color:#3730a3 }
.badge.category{ background:#FCE7F3; color:#9d174d }
.badge.transport{ background:#FEF3C7; color:#92400e }
.badge.status-open{ background:var(--line); color:#fff }
.badge.status-closed{ background:#9ca3af; color:#fff }

.result-count{ color:var(--muted); font-size:13px; margin-bottom:8px; padding:0 4px }
.empty-state{ text-align:center; padding:40px 16px; color:var(--muted) }
.empty-state .btn{ margin-top:12px }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:24px; padding:10px 18px; font-weight:600; min-height:44px;
}
.btn.primary{ background:var(--line); color:#fff }
.btn.primary:active{ background:var(--line-dark) }
.btn.primary:disabled{ background:#cbd5e1; color:#fff }
.btn.ghost{ background:#fff; color:var(--text); border:1px solid var(--border) }
.btn.danger{ background:var(--danger); color:#fff }
.btn.wide{ width:100%; min-height:48px; border-radius:12px }

.load-more-wrap{ padding:14px 4px }

/* ===== Detail ===== */
.detail-hero{
  position: relative;
  margin: -12px -12px 12px;
  height: 200px;
  background: linear-gradient(135deg, #06C755, #04a847);
  background-size: cover; background-position: center;
}
.detail-hero::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.1));
}
.detail-hero-body{
  position: absolute; bottom:0; left:0; right:0; padding:12px 14px; color:#fff; z-index:1;
}
.detail-hero-body .badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px }
.detail-hero-body .badges .badge{ background: rgba(255,255,255,.85); color:#1f2328 }
.detail-hero-body h2{ font-size:18px; margin:0 0 4px; line-height:1.35; text-shadow: 0 1px 2px rgba(0,0,0,.6) }
.detail-hero-body .client{ font-size:12px; opacity:.92 }

.kv{ background:#fff; border-radius:var(--r); box-shadow:var(--shadow); padding:6px 0; margin-bottom:12px; }
.kv .row{ display:flex; padding:10px 14px; border-bottom:1px solid var(--border); font-size:14px }
.kv .row:last-child{ border-bottom:0 }
.kv .row dt{ width:96px; color:var(--muted); flex-shrink:0; margin:0 }
.kv .row dd{ margin:0; flex:1; color:var(--text); white-space:pre-wrap; word-break:break-word }

.section-title{ font-size:13px; font-weight:600; color:var(--muted); margin:14px 4px 6px; display:flex; align-items:center; gap:6px }
.section-title .ico{ font-size:14px }
.text-block{
  background:#fff; border-radius:var(--r); box-shadow:var(--shadow); padding:14px;
  white-space:pre-wrap; word-break:break-word; line-height:1.7; font-size:14px;
}

.map-wrap{ background:#fff; border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden }
.map-wrap iframe{ width:100%; height:200px; border:0; display:block }
.map-wrap .addr{ padding:10px 14px; font-size:13px; color:var(--muted) }

.detail-cta{
  position: sticky; bottom: var(--tabbar-h);
  margin: 16px -12px -24px; padding:12px;
  background: linear-gradient(to top, #fff 60%, rgba(255,255,255,.6));
  z-index: 10;
}
.detail-cta .btn{ width:100%; min-height:50px; border-radius:14px; font-size:16px }

.note-banner{
  background: #FEF3C7; color:#92400e; padding:10px 12px; border-radius:10px; font-size:13px; margin-bottom:10px;
}

/* ===== Apply modal ===== */
.apply-modal-title{ font-size:15px; font-weight:600; margin:8px 0 14px }
.agreement{
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px;
  margin-bottom:8px; font-size:13px; line-height:1.55;
}
.agreement .check{ padding:0; margin-top:8px; }

/* ===== Forms ===== */
.form-card{ background:#fff; border-radius:var(--r); box-shadow:var(--shadow); padding:14px; margin-bottom:12px }
.form-card h3{ margin:0 0 10px; font-size:15px }
.field{ display:block; margin-bottom:12px }
.field>span{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 12px; font-size:15px;
  font-family:inherit; background:#fff; color:var(--text);
}
.field textarea{ min-height:80px; resize:vertical }
.field.row{ display:flex; gap:8px }
.check{ display:flex; align-items:center; gap:8px; padding:8px 0 }
.check input{ width:18px; height:18px }

.confirm-list .row{ display:flex; padding:8px 0; border-bottom:1px solid var(--border); font-size:14px }
.confirm-list .row:last-child{ border-bottom:0 }
.confirm-list .row .k{ width:90px; color:var(--muted); flex-shrink:0 }
.confirm-list .row .v{ flex:1; word-break:break-word }

/* ===== History ===== */
.summary-card{
  background: linear-gradient(135deg, #06C755, #04a847); color:#fff;
  border-radius:14px; padding:14px; margin-bottom:14px; box-shadow: var(--shadow);
}
.summary-card .year{ font-size:12px; opacity:.85 }
.summary-card .total{ font-size:30px; font-weight:700; margin-top:2px }
.summary-card .total small{ font-size:13px; font-weight:500; opacity:.85; margin-left:4px }
.summary-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px }
.summary-grid .stat{ background: rgba(255,255,255,.18); border-radius:10px; padding:8px; text-align:center }
.summary-grid .stat .num{ font-size:18px; font-weight:700 }
.summary-grid .stat .lbl{ font-size:11px; opacity:.9; margin-top:2px }

.section-h{ display:flex; align-items:center; justify-content:space-between; margin: 16px 4px 8px }
.section-h h3{ font-size:14px; margin:0; color:var(--muted); font-weight:600 }
.section-h .count{ font-size:12px; color:var(--muted) }

.work-card{
  background:#fff; border-radius:10px; padding:12px; margin-bottom:8px; box-shadow:var(--shadow);
  border-left: 4px solid var(--line);
}
.work-card.today{ border-left-color: #f59e0b; background:#FFFBEB }
.work-card.pending{ border-left-color: #6366f1 }
.work-card.history{ border-left-color: #94a3b8 }
.work-card .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px }
.work-card .ttl{ font-size:14px; font-weight:600; flex:1 }
.work-card .meta{ font-size:12px; color:var(--muted); margin-top:4px }
.work-card .pay{ font-size:14px; font-weight:700; color:var(--text); text-align:right }
.work-card .pay small{ display:block; font-weight:500; color:var(--muted); font-size:11px }

.detail-table{ width:100%; border-collapse:collapse; font-size:13px }
.detail-table td{ padding:6px 4px; border-bottom:1px solid var(--border); vertical-align:top }
.detail-table td.k{ color:var(--muted); width:42% }
.detail-table td.v{ text-align:right; font-weight:500 }
.detail-table tr.total td{ font-weight:700; font-size:15px; border-bottom:0; padding-top:10px }

.status-pill{
  display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; font-weight:600;
  white-space:nowrap; flex-shrink:0;
}
.status-pill.accepted{ background:#DCFCE7; color:#166534 }
.status-pill.rejected{ background:#FEE2E2; color:#991b1b }
.status-pill.pending,.status-pill.applied{ background:#E0E7FF; color:#3730a3 }
.status-pill.unknown{ background:#F3F4F6; color:#374151 }

/* ===== MyPage ===== */
.profile-hero{
  background:#fff; border-radius:var(--r); box-shadow:var(--shadow);
  padding:16px; text-align:center; margin-bottom:12px;
}
.profile-hero .avatar{
  width:80px; height:80px; border-radius:50%; background:#E8F7EE; color:var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:32px; margin-bottom:8px;
  border: 3px solid var(--line);
}
.profile-hero .avatar.avatar-photo{
  object-fit: cover; padding:0; background:#fff;
}
.profile-hero h2{ margin:0; font-size:17px }
.profile-hero .sub{ color:var(--muted); font-size:13px; margin-top:2px }

.menu-list{ background:#fff; border-radius:var(--r); box-shadow:var(--shadow); margin-bottom:12px }
.menu-list .item{
  display:flex; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--border); cursor:pointer; font-size:14px; color:var(--text);
  background:#fff; border-radius:0;
}
.menu-list .item:first-child{ border-top-left-radius:var(--r); border-top-right-radius:var(--r) }
.menu-list .item:last-child{ border-bottom:0; border-bottom-left-radius:var(--r); border-bottom-right-radius:var(--r) }
.menu-list .item:active{ background:#f3f4f6 }
.menu-list .item .ico{
  width:32px; height:32px; margin-right:12px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; flex-shrink:0;
  background:#F3F4F6; color:#6B7280;
}
.menu-list .item .ico svg{ width:18px; height:18px }
.menu-list .item .ico.ico-profile{ background:#E0E7FF; color:#3730A3 }
.menu-list .item .ico.ico-bank{    background:#DCFCE7; color:#166534 }
.menu-list .item .ico.ico-payslip{ background:#FEF3C7; color:#92400E }
.menu-list .item .ico.ico-receipt{ background:#FCE7F3; color:#9D174D }
.menu-list .item .ico.ico-close{   background:#F3F4F6; color:#6B7280 }
.menu-list .item .ico.ico-logout{  background:#FEE2E2; color:#991B1B }
.menu-list .item .label{ flex:1 }
.menu-list .item .arrow{ color:var(--muted) }
.menu-list .item .sub{ font-size:11px; color:var(--muted); margin-top:2px; display:block }

.qr-card{
  background:#fff; border-radius:var(--r); box-shadow:var(--shadow); padding:16px;
  margin-bottom:12px; text-align:center;
}
.qr-card h3{ margin:0 0 8px; font-size:14px; color:var(--muted) }
.qr-card .qr-img{ width:160px; height:160px; margin:8px auto; border:1px solid var(--border); padding:8px; border-radius:8px; background:#fff }

/* ===== Bottom Tab ===== */
.tabbar{
  position: fixed; bottom: 0; left:0; right:0; height: var(--tabbar-h);
  background:#fff; border-top: 1px solid var(--border); display:flex; z-index: 60;
  max-width:480px; margin:0 auto; padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .tab{
  flex:1; border:0; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--muted); padding:6px 0;
}
.tabbar .tab svg{ width:22px; height:22px }
.tabbar .tab span{ font-size:11px; font-weight:600 }
.tabbar .tab.active{ color: var(--line) }
.tabbar .tab:active{ background: rgba(0,0,0,.04) }

/* ===== Sheets / Modals ===== */
.sheet{ position: fixed; inset: 0; z-index: 100; }
.sheet[hidden]{ display:none }
.sheet-bg{ position:absolute; inset:0; background:rgba(0,0,0,.5); animation: fadeIn .15s ease; }
.sheet-body{
  position:absolute; left:0; right:0; bottom:0;
  background:#fff; border-radius:18px 18px 0 0; padding:8px 16px 24px;
  max-width: 480px; margin:0 auto; max-height: 90vh; overflow:auto;
  animation: slideUp .2s ease;
}
.sheet-handle{ width:36px; height:4px; background:#e5e7eb; border-radius:2px; margin:6px auto 12px }
.sheet h2{ font-size:16px; margin:0 0 14px }
.sheet-actions{ display:flex; gap:8px; margin-top:8px }
.sheet-actions .btn{ flex:1 }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{transform:translateY(100%)} to{transform:translateY(0)} }

/* Toast */
.toast{
  position: fixed; bottom: calc(var(--tabbar-h) + 16px); left:50%; transform:translateX(-50%);
  background:#1f2328; color:#fff; padding:10px 16px; border-radius:24px; font-size:14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.2); z-index:200;
}
.toast[hidden]{ display:none }

/* ===== Auth ===== */
.auth-overlay{
  position: fixed; inset:0; z-index: 300;
  background: linear-gradient(135deg, #06C755, #04a847);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; overflow:auto;
}
.auth-overlay[hidden]{ display:none }
.auth-card{
  background:#fff; border-radius:18px; max-width: 400px; width:100%;
  padding: 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.2);
  text-align:center;
}
.auth-logo{
  width:64px; height:64px; border-radius:50%; background: var(--line); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:28px;
  margin-bottom:14px;
}
.auth-title{ margin:0 0 6px; font-size:18px; line-height:1.4 }
.auth-sub{ color:var(--muted); font-size:13px; margin:0 0 18px }
.auth-card .btn-line{
  background: var(--line); color:#fff; border:0; border-radius:12px;
  padding:14px; font-weight:700; font-size:15px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer;
}
.auth-card .btn-line:active{ background: var(--line-dark) }
.auth-card .btn-secondary{
  background:#fff; color:var(--text); border:1px solid var(--border); border-radius:12px;
  padding:12px; font-weight:600; font-size:14px; width:100%; margin-top:8px; cursor:pointer;
}
.auth-card .divider{ display:flex; align-items:center; color:var(--muted); font-size:11px; margin:14px 0 }
.auth-card .divider::before, .auth-card .divider::after{ content:''; flex:1; height:1px; background:#e5e7eb; margin: 0 8px; }
.auth-card .field{ text-align:left }
.auth-card .field>span{ display:block; font-size:11px; color:var(--muted); margin-bottom:3px; text-align:left }
.auth-card .field input, .auth-card .field select, .auth-card .field textarea{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:14px; background:#fff; color:var(--text); font-family:inherit;
}
.auth-card .row2{ display:flex; gap:8px }
.auth-line-profile{
  display:flex; align-items:center; gap:10px; background:#F0F9F4; border-radius:10px; padding:8px 12px; margin-bottom:14px; text-align:left;
}
.auth-line-profile .avatar{ width:36px; height:36px; border-radius:50%; background:var(--line); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700 }
.auth-line-profile .name{ font-weight:600; font-size:14px }
.auth-line-profile .id{ font-size:11px; color:var(--muted); font-family:monospace }
.auth-error{ background:#FEE2E2; color:#991b1b; padding:8px 10px; border-radius:8px; font-size:12px; margin-top:8px; text-align:left }
.auth-back{ color:var(--muted); font-size:13px; margin-top:14px; cursor:pointer; display:inline-block }
.auth-card .form-banner{
  background: #BFE9F5; color:#1f2937; padding:10px;
  border-radius:6px; font-weight:700; text-align:center;
  margin: 14px 0 8px; font-size:13px;
}
.auth-card .info-banner{
  background:#E5F4E8; border:1px solid #BBE5C0; color:#1f2937;
  padding:10px 12px; border-radius:8px; font-size:12px;
  text-align:center; line-height:1.6; margin:14px 0 8px;
}
.auth-card .phone-row{ display:flex; align-items:center; gap:6px }
.auth-card .phone-row input{ text-align:center; flex:1; min-width:0 }
.auth-card .phone-row span{ color:var(--muted); flex-shrink:0 }
.auth-card .upload-area{
  display:block; border:1.5px dashed var(--border); border-radius:10px;
  padding:24px 12px; text-align:center; color:var(--muted); cursor:pointer;
  background:#FAFAFA; margin-bottom:12px; font-size:13px;
}
.auth-card .upload-area:active{ background:#f3f4f6 }
.auth-card .upload-area.has-image{ background:#fff; border-style:solid; border-color:var(--line); padding:12px }
.auth-card .photo-sample{
  background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:8px; margin-bottom:10px;
}
.day-strip{
  display:flex; gap:6px; overflow-x:auto; padding:4px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.day-strip::-webkit-scrollbar{ height:4px }
.day-strip::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:2px }
.day-cell{
  flex:0 0 56px; min-height:64px;
  border:1px solid var(--border); border-radius:10px;
  background:#fff; color:var(--text); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px 4px; scroll-snap-align: start;
  position:relative;
}
.day-cell .d-w{ font-size:11px; color:var(--muted); font-weight:600 }
.day-cell .d-d{ font-size:15px; font-weight:700; margin-top:2px }
.day-cell .d-h{ position:absolute; top:2px; right:3px; font-size:9px; color:#dc2626; font-weight:700 }
.day-cell.sat{ color:#1d4ed8 }
.day-cell.sat .d-w{ color:#1d4ed8 }
.day-cell.sun{ color:#dc2626 }
.day-cell.sun .d-w{ color:#dc2626 }
.day-cell.weekend{ background:#F3F4F6 }
.day-cell.holiday{ background:#FEE2E2 }
.day-cell.disabled{
  opacity:.55; cursor:not-allowed;
  position:relative;
}
.day-cell.disabled::after{
  content:''; position:absolute; left:8%; right:8%; top:50%;
  border-top:1.5px solid #9ca3af; transform: rotate(-12deg);
}
.day-cell.selected{
  background:var(--line); color:#fff; border-color:var(--line);
  box-shadow: 0 4px 10px rgba(6,199,85,.3);
}
.day-cell.selected .d-w, .day-cell.selected .d-d{ color:#fff }
.day-cell:not(.disabled):active{ transform: scale(.96) }

.skeleton{
  background: linear-gradient(90deg, #f3f4f6, #e5e7eb, #f3f4f6);
  background-size: 200% 100%;
  animation: skel 1.2s infinite; border-radius: 6px;
}
@keyframes skel{ 0%{background-position: 200% 0} 100%{background-position: -200% 0} }