/* notice_cal — Figma 짐서폿 공지사항 */
.f-notice_cal .nav { position:absolute; left:0; top:83px; width:430px; padding:0 24px; display:flex; gap:32px; align-items:center; }
.f-notice_cal .nav-back { position:relative; width:48px; height:48px; flex-shrink:0; }
.f-notice_cal .nav-back img { width:48px; height:48px; rotate:90deg; }
.f-notice_cal .nav-title { font-weight:700; font-size:23px; line-height:normal; color:#030303; text-align:center; white-space:nowrap; }
.f-notice_cal .n-list { position:absolute; left:24px; top:143px; width:382px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.f-notice_cal .n-row { width:382px; display:flex; gap:2px; align-items:center; overflow:hidden; flex-shrink:0; }
.f-notice_cal .n-card { width:350px; height:88px; flex-shrink:0; background:#f4f5f7; border-radius:20px; display:flex; gap:20px; align-items:center; padding:4px 12px; position:relative; }
.f-notice_cal .n-pos { display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center; flex-shrink:0; }
.f-notice_cal .n-up { width:24px; height:24px; rotate:90deg; }
.f-notice_cal .n-down { width:24px; height:24px; rotate:-90deg; }
.f-notice_cal .n-ham { position:relative; width:24px; height:24px; }
.f-notice_cal .n-ham i { position:absolute; left:6px; width:12px; height:2px; border-radius:20px; background:#b5bcc6; }
.f-notice_cal .n-ham i:nth-child(1) { top:6px; } .f-notice_cal .n-ham i:nth-child(2) { top:11px; } .f-notice_cal .n-ham i:nth-child(3) { top:16px; }
.f-notice_cal .n-img { position:relative; width:64px; height:64px; flex-shrink:0; }
.f-notice_cal .n-imgbox { position:absolute; left:-1.0025px; top:-1.0025px; width:66.065px; height:66.065px; border:1px solid #b5bcc6; border-radius:12px; background:#f4f5f7; overflow:hidden; }
.f-notice_cal .n-pic { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; border-radius:12px; }
.f-notice_cal .n-pic3 { position:absolute; left:19.14%; top:18.95%; width:60.99%; height:61.63%; }
.f-notice_cal .n-x { position:absolute; left:45px; top:8px; width:12px; height:11.776px; }
.f-notice_cal .n-cambox { position:absolute; left:-1px; top:-1px; width:66.064px; height:66.064px; }
.f-notice_cal .n-per { width:203px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.f-notice_cal .n-line { width:100%; display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.f-notice_cal .n-lb { font-weight:700; font-size:10px; line-height:normal; color:#030303; white-space:nowrap; }
.f-notice_cal .n-val { width:168px; height:20px; flex-shrink:0; background:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:4px 44px; }
.f-notice_cal .n-val p { font-weight:400; font-size:10px; line-height:normal; color:#030303; text-align:center; white-space:nowrap; }
.f-notice_cal .n-del { width:33.941px; height:33.941px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.f-notice_cal .n-del img { width:24px; height:24px; rotate:45deg; }
.f-notice_cal .n-add { position:absolute; left:185px; top:736px; width:60px; height:60px; }
.f-notice_cal .n-submit { position:absolute; left:24px; top:820px; width:382px; height:52px; background:#0073cf; border-radius:20px; display:flex; align-items:center; justify-content:center; padding:8px 24px; }
.f-notice_cal .n-submit p { font-weight:400; font-size:13px; line-height:normal; color:#fff; text-align:center; white-space:nowrap; }

.f-notice_cal .sb { position:absolute; left:0; top:0; width:430px; height:59px; }
.f-notice_cal .sb-in { position:absolute; left:0; top:0; width:430px; height:54px; display:flex; align-items:center; justify-content:space-between; padding:16px 32px 16px 52px; }
.f-notice_cal .sb-time { font-weight:700; font-size:17px; line-height:22px; color:#030303; text-align:center; white-space:nowrap; }
.f-notice_cal .sb-w { width:79.67px; height:13px; }
.f-notice_cal .sb-cam { position:absolute; left:153px; top:10px; width:124px; height:36px; background:#030303; border-radius:33px; overflow:hidden; }
.f-notice_cal .sb-cam img { position:absolute; }
.f-notice_cal .sb-cam .c1 { left:92.127px; top:12.127px; width:6.746px; height:11.746px; }
.f-notice_cal .sb-cam .c2 { left:92.877px; top:13.977px; width:5.246px; height:8.054px; }
.f-notice_cal .sb-cam .c3 { left:94.077px; top:13.809px; width:3.770px; height:7.302px; rotate:5.81deg; transform:skewX(-2.78deg); }
.f-notice_cal .sb-cam .c4 { left:98.127px; top:12.127px; width:6.746px; height:11.746px; transform:scaleX(-1); }
.f-notice_cal .sb-cam .c5 { left:98.877px; top:13.977px; width:5.246px; height:8.054px; transform:scaleX(-1); }
.f-notice_cal .sb-cam .c6 { left:99.157px; top:13.809px; width:3.770px; height:7.302px; rotate:174.19deg; scale:1 -1; transform:skewX(2.78deg); }

/* dim + 달력 팝업 (Figma 40011424:19446 / picked = 40011430:20213) */
.f-notice_cal .dim { position:absolute; left:0; top:0; width:430px; height:932px; background:#030303; opacity:0.25; }
.f-notice_cal .pop { position:absolute; left:27px; top:196px; width:376px; background:#fff; border-radius:20px; overflow:hidden; padding:12px 20px; display:flex; flex-direction:column; gap:16px; align-items:flex-start; justify-content:center; }
.f-notice_cal .cal { width:336px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.f-notice_cal .cal-head { width:382px; flex-shrink:0; padding:0 64px; display:flex; align-items:center; justify-content:space-between; }
.f-notice_cal .cal-head img { width:24px; height:24px; }
.f-notice_cal .cal-head p { font-weight:700; font-size:15px; line-height:normal; color:#030303; white-space:nowrap; }
.f-notice_cal .cal-wd { display:flex; gap:38px; align-items:center; justify-content:center; }
.f-notice_cal .cal-wd p { width:10px; font-weight:400; font-size:10px; line-height:12px; text-align:center; white-space:nowrap; color:#b5bcc6; }
.f-notice_cal .cal-wd p.sun { color:#ff334c; } .f-notice_cal .cal-wd p.sat { color:#0073cf; }
.f-notice_cal .cal-grid { display:flex; flex-direction:column; gap:12px; align-items:center; }
.f-notice_cal .cal-row { display:flex; align-items:center; }
.f-notice_cal .cal-row:nth-child(6):has(.cal-c:first-child.cal-out) { display:none; }
.f-notice_cal .cal-c { position:relative; width:48px; height:36px; }
.f-notice_cal .cal-c span { position:absolute; left:13px; top:9px; width:22px; height:18px; display:flex; align-items:center; justify-content:center; font-weight:400; font-size:15px; line-height:normal; color:#030303; text-align:center; white-space:nowrap; }
.f-notice_cal .cal-c.cal-out span { color:#b5bcc6; }
.f-notice_cal .quick { width:336px; display:flex; gap:8px; align-items:center; justify-content:center; }
.f-notice_cal .q-btn { flex:1 0 0; min-width:1px; height:44px; background:#fff; border:1px solid #b5bcc6; border-radius:20px; display:flex; align-items:center; justify-content:center; padding:8px 24px; }
.f-notice_cal .q-btn p, .f-notice_cal .b-cancel p, .f-notice_cal .b-ok p { font-weight:400; font-size:13px; line-height:normal; color:#030303; text-align:center; white-space:nowrap; }
.f-notice_cal .tm { width:336px; display:flex; gap:16px; align-items:center; padding:0 20px; }
.f-notice_cal .tm-lb { font-weight:400; font-size:15px; line-height:18px; color:#030303; text-align:center; white-space:nowrap; }
.f-notice_cal .tm-f { width:227px; flex-shrink:0; background:#f4f5f7; border-radius:20px; padding:8px 12px; display:flex; align-items:center; justify-content:center; }
.f-notice_cal .tm-f p { font-weight:400; font-size:15px; line-height:18px; color:#030303; text-align:center; white-space:nowrap; }
.f-notice_cal .tm-f .v-pick { display:none; }
.f-notice_cal .sel { width:336px; display:flex; gap:8px; align-items:center; justify-content:center; }
.f-notice_cal .b-cancel { width:163px; height:52px; background:#fff; border:1px solid #b5bcc6; border-radius:20px; display:flex; align-items:center; justify-content:center; padding:8px 24px; }
.f-notice_cal .b-ok { width:163px; height:52px; background:#0073cf; border-radius:20px; display:flex; align-items:center; justify-content:center; padding:8px 24px; }
.f-notice_cal .b-ok p { color:#fff; }
/* picked: 범위 선택 + 시작일/종료일 표시 */
.f-notice_cal.picked .tm-f .v-empty { display:none; }
.f-notice_cal.picked .tm-f .v-pick { display:block; }
.f-notice_cal.picked .cal-sel::before { content:""; position:absolute; left:0; top:0; width:48px; height:36px; background:#0073cf; }
.f-notice_cal.picked .cal-sel-s::before { left:6px; width:42px; border-radius:18px 0 0 18px; }
.f-notice_cal.picked .cal-sel-e::before { width:42px; border-radius:0 18px 18px 0; }
.f-notice_cal.picked .cal-sel-s.cal-sel-e::before { left:6px; width:36px; border-radius:18px; }
.f-notice_cal.picked .cal-sel span { color:#fff; }
