/* =============================================
   bzo-common.css — BZO WORKS 공통 스타일 (v2)
   to-do 표준 디자인 적용, 기존 클래스명 100% 호환
   ============================================= */

/* ===== 변수 ===== */
:root{
  /* 신표준 색상 */
  --navy:#0a1628;
  --navy2:#142340;
  --navy3:#1a2538;
  --gold:#d4a843;
  --gold-dark:#b88f2f;
  --accent:#4a90e2;        /* 파랑 (토요일/링크) */
  --accent2:#2a9d8f;       /* 청록 (포인트/완료) */
  --teal-light:#5eccc0;
  --teal-bg:#f0faf8;
  --red:#e74c3c;

  /* 중성 */
  --light-bg:#fafaf7;
  --card-bg:#ffffff;
  --card-border:#e0e3e8;
  --line-soft:#e5e7eb;
  --text-dark:#0a1628;
  --text-muted:#6b7280;
  --text-light:#9aa3ad;
  --text-disabled:#c5ccd3;

  /* 뱃지/상태 (기존 유지하되 톤 살짝 통일) */
  --p1-bg:#fce8e8;--p1-color:#a32d2d;
  --p2-bg:#fef3c7;--p2-color:#854f0b;
  --p3-bg:#dbeafe;--p3-color:#185fa5;
  --ok-bg:#d1fae5;--ok-color:#065f46;
  --wait-bg:#fef3c7;--wait-color:#854f0b;
  --no-bg:#fce8e8;--no-color:#a32d2d;
  --progress-bg:#dbeafe;--progress-color:#185fa5;
  --done-bg:#d1fae5;--done-color:#065f46;

  /* 텍스트 위계 (to-do 표준 = 모바일 기준) */
  --fs-title:22px;
  --fs-sub:20px;
  --fs-section:17px;
  --fs-field:16px;
  --fs-mini:15px;
  --fs-tiny:14px;
  --fs-micro:13px;

  /* 높이 */
  --h-field:38px;
  --h-mini:34px;
}

/* ===== 리셋 ===== */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#d0d4dc;
  -webkit-tap-highlight-color:transparent;
  display:flex;justify-content:center;align-items:center;min-height:100vh;
}

/* ===== 아이폰 프레임 (BZO 검정 표준) ===== */
.phone-frame{
  width:380px;max-width:100vw;
  border-radius:42px;
  border:8px solid var(--navy3);
  background:var(--navy3);
  position:relative;
  box-shadow:0 30px 60px rgba(10,22,40,.25);
}
.phone-inner{
  margin:0;
  border-radius:34px;
  overflow:hidden;
  background:var(--light-bg);
  display:flex;flex-direction:column;
  height:100vh;max-height:780px;
  position:relative;
}

/* 노치(다이나믹 아일랜드) */
.notch{
  width:110px;height:28px;
  background:#000;
  border-radius:14px;
  margin:8px auto 0;
}

/* 상태바 */
.status-bar{
  display:flex;justify-content:space-between;
  padding:4px 20px;
  font-size:var(--fs-tiny);
  color:var(--text-muted);
  font-weight:500;
  background:var(--card-bg);
}

/* ===== 상단 헤더 ===== */
.top-header{
  padding:10px 20px 14px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card-bg);
  position:relative;
}
.top-header::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 33%,var(--accent2) 33%,var(--accent2) 66%,var(--accent) 66%,var(--accent) 100%);
}
.top-logo{
  font-size:var(--fs-title);
  font-weight:900;
  color:var(--navy);
  letter-spacing:2px;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  cursor:pointer;
}
.top-right{display:flex;align-items:center;gap:8px;}

.btn-add{
  width:30px;height:30px;
  border-radius:50%;
  background:rgba(42,157,143,.1);
  border:1px solid rgba(42,157,143,.25);
  color:var(--accent2);
  font-size:22px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;line-height:1;
}
.btn-add:active{background:rgba(42,157,143,.2);}

.btn-menu{
  width:30px;height:30px;
  border-radius:50%;
  background:rgba(10,22,40,.05);
  border:1px solid var(--card-border);
  color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
.btn-menu:active{background:rgba(10,22,40,.1);}
.btn-menu svg{width:18px;height:18px;stroke:var(--navy);stroke-width:2;fill:none;stroke-linecap:round;}

/* ===== 사이드 메뉴 ===== */
.side-menu-bg{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(10,22,40,.5);z-index:80;}
.side-menu-bg.show{display:block;}
.side-menu{
  position:absolute;top:0;right:-280px;width:260px;height:100%;
  background:var(--card-bg);
  z-index:81;transition:right 0.3s ease;
  display:flex;flex-direction:column;
  border-left:1px solid var(--card-border);
  box-shadow:-4px 0 20px rgba(10,22,40,.1);
}
.side-menu.show{right:0;}
.side-menu-header{
  padding:20px 16px 14px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--card-border);
  position:relative;
}
.side-menu-header::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 33%,var(--accent2) 33%,var(--accent2) 66%,var(--accent) 66%,var(--accent) 100%);
}
.side-menu-title{font-size:var(--fs-field);font-weight:900;color:var(--navy);letter-spacing:1.5px;}
.side-menu-close{
  width:28px;height:28px;border-radius:50%;
  background:rgba(10,22,40,.05);
  border:none;color:var(--text-muted);
  font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;
}
.side-menu-close:active{background:rgba(10,22,40,.1);}
.side-menu-list{flex:1;overflow-y:auto;padding:8px 0;}
.side-menu-item{
  display:flex;align-items:center;
  padding:11px 20px;cursor:pointer;text-decoration:none;
  transition:background 0.15s;
}
.side-menu-item:active{background:rgba(10,22,40,.04);}
.side-menu-item.active{background:rgba(42,157,143,.08);}
.side-menu-item .menu-label{font-size:var(--fs-field);font-weight:500;color:var(--text-muted);}
.side-menu-item.active .menu-label{color:var(--accent2);font-weight:700;}
.side-menu-home{
  display:flex;align-items:center;
  padding:14px 20px;
  border-top:1px solid var(--card-border);
  cursor:pointer;text-decoration:none;
  background:rgba(212,168,67,.05);
}
.side-menu-home:active{background:rgba(212,168,67,.12);}
.side-menu-home .menu-label{font-size:var(--fs-field);font-weight:700;color:var(--gold-dark);}

/* ===== 컨텐츠 영역 ===== */
.content-area{
  flex:1;
  background:var(--light-bg);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:16px;
  scrollbar-width:none;       /* Firefox */
  -ms-overflow-style:none;    /* IE/Edge */
}
.content-area::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;               /* Chrome/Safari */
}
.page-title{font-size:20px;font-weight:700;color:var(--text-dark);margin-bottom:14px;letter-spacing:-0.3px;}
.section-label{font-size:var(--fs-section);font-weight:700;color:var(--text-dark);letter-spacing:-.2px;margin:14px 0 8px;}
.section-label:first-of-type{margin-top:0;}
.empty-msg{text-align:center;padding:30px 20px;color:var(--text-disabled);font-size:var(--fs-mini);font-weight:500;}

/* ===== 요약 카드 (dashed teal) ===== */
.summary-row{display:flex;gap:8px;margin-bottom:14px;}
.summary-card{
  flex:1;
  background:var(--card-bg);
  border:1.5px dashed var(--accent2);
  border-radius:10px;
  padding:14px 10px;
  text-align:center;
}
.summary-label{font-size:var(--fs-tiny);font-weight:600;color:var(--text-muted);margin-bottom:4px;letter-spacing:.5px;}
.summary-val{font-size:20px;font-weight:900;color:var(--text-dark);line-height:1.1;}
.summary-val.gold{color:var(--gold-dark);}

/* ===== 탭 바 ===== */
.tab-bar{display:flex;gap:6px;margin-bottom:14px;}
.tab-btn{
  flex:1;height:34px;
  border-radius:8px;
  border:1px solid var(--card-border);
  background:var(--card-bg);
  font-size:var(--fs-mini);font-weight:700;
  color:var(--text-muted);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;
  letter-spacing:.3px;
}
.tab-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ===== 폼 공통 ===== */
.form-overlay{display:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;background:var(--light-bg);}
.form-overlay.show{display:flex;flex-direction:column;}
.form-header{
  padding:10px 20px 14px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card-bg);
  position:relative;
}
.form-header::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 33%,var(--accent2) 33%,var(--accent2) 66%,var(--accent) 66%,var(--accent) 100%);
}
.form-header .cancel{font-size:var(--fs-field);color:var(--text-muted);cursor:pointer;background:none;border:none;font-family:inherit;font-weight:600;}
.form-header .title{font-size:16px;font-weight:700;color:var(--navy);letter-spacing:-.3px;}
.form-body{flex:1;background:var(--light-bg);padding:20px 16px;overflow-y:auto;}

.field-label{
  font-size:var(--fs-field);font-weight:700;
  color:var(--text-dark);
  margin-bottom:6px;letter-spacing:-.2px;
}
.field-input,.field-select{
  width:100%;height:var(--h-field);
  border:1.5px solid var(--card-border);
  border-radius:8px;
  background:var(--card-bg);
  padding:0 12px;
  font-size:var(--fs-field);font-weight:500;
  color:var(--text-dark);
  outline:none;margin-bottom:14px;
  -webkit-appearance:none;appearance:none;
  font-family:inherit;
}
.field-select{
  background:var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding-right:32px;
}
.field-input:focus,.field-select:focus{border-color:var(--accent2);}
.row2{display:flex;gap:8px;}
.row2>*{flex:1;}
.section-divider{
  font-size:var(--fs-section);font-weight:700;
  color:var(--text-dark);
  margin:16px 0 10px;padding-top:12px;
  border-top:1px solid var(--card-border);
  letter-spacing:-.2px;
}

/* 날짜시간 필드 */
.datetime-field{
  flex:1;height:var(--h-field);
  border:1.5px solid var(--card-border);
  border-radius:8px;
  background:var(--card-bg);
  padding:0 12px;
  font-size:var(--fs-field);font-weight:500;
  color:var(--text-dark);
  display:flex;align-items:center;
  cursor:pointer;
  font-family:inherit;
}
.datetime-field.empty{color:var(--text-light);}
.dt-group{margin-bottom:14px;}
.dt-group-label{font-size:var(--fs-field);font-weight:700;color:var(--text-dark);margin-bottom:6px;}
.dt-fields{display:flex;gap:6px;}
.dt-fields .datetime-field{flex:1;}

/* 상태/우선순위 옵션 */
.status-options,.priority-options{display:flex;gap:8px;margin-bottom:14px;}
.status-opt,.pri-opt{
  flex:1;height:40px;
  border:1.5px solid var(--card-border);
  border-radius:8px;
  background:var(--card-bg);
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:var(--fs-field);font-weight:700;
  color:var(--text-muted);
  cursor:pointer;
  transition:all 0.15s;
  font-family:inherit;
}
.status-opt.active,.pri-opt.active{
  border-color:var(--accent2);
  background:var(--teal-bg);
  color:var(--accent2);
}
.pri-dot{width:8px;height:8px;border-radius:50%;}
.pri-opt:nth-child(1) .pri-dot{background:var(--p1-color);}
.pri-opt:nth-child(2) .pri-dot{background:var(--p2-color);}
.pri-opt:nth-child(3) .pri-dot{background:var(--p3-color);}

/* 버튼 */
.btn-submit{
  width:100%;height:46px;
  border:none;border-radius:10px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);
  color:#fff;
  font-size:var(--fs-field);font-weight:700;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.5px;
}
.btn-submit:active{transform:translateY(1px);}
.btn-submit:disabled{opacity:0.4;cursor:not-allowed;transform:none;}

/* ===== 상세 오버레이 ===== */
.detail-overlay{display:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;background:var(--light-bg);}
.detail-overlay.show{display:flex;flex-direction:column;}
.detail-header{
  padding:10px 20px 14px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card-bg);
  position:relative;
}
.detail-header::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 33%,var(--accent2) 33%,var(--accent2) 66%,var(--accent) 66%,var(--accent) 100%);
}
.detail-header .back{font-size:var(--fs-field);color:var(--text-muted);cursor:pointer;background:none;border:none;font-family:inherit;font-weight:600;}
.detail-header .title{font-size:16px;font-weight:700;color:var(--navy);letter-spacing:-.3px;}
.detail-header .edit,
.detail-header .save,
.detail-header .status-btn,
.detail-header .check-btn{
  font-size:var(--fs-field);color:var(--accent2);
  cursor:pointer;background:none;border:none;
  font-family:inherit;font-weight:700;
}
.detail-body{flex:1;background:var(--light-bg);overflow-y:auto;padding:16px;}
.detail-card{
  background:var(--card-bg);
  border:1.5px dashed var(--accent2);
  border-radius:12px;
  padding:16px;
  margin-bottom:12px;
}
.detail-card-title{
  font-size:var(--fs-section);font-weight:700;
  color:var(--accent2);
  margin-bottom:10px;letter-spacing:-.2px;
}
.detail-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;
  border-bottom:1px solid #f0f2f4;
}
.detail-row:last-child{border-bottom:none;}
.detail-label{font-size:var(--fs-field);color:var(--text-muted);font-weight:500;}
.detail-val{font-size:var(--fs-field);font-weight:600;color:var(--text-dark);text-align:right;max-width:60%;}

/* ===== 커스텀 달력 모달 ===== */
.modal-bg{
  display:none;position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:rgba(10,22,40,.55);
  z-index:50;
  align-items:flex-end;justify-content:center;
}
.modal-bg.show{display:flex;}
.cal-modal{
  width:100%;background:var(--card-bg);
  border-radius:18px 18px 0 0;
  padding:16px 16px 24px;
  max-height:70%;
}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.cal-title{font-size:18px;font-weight:700;color:var(--text-dark);letter-spacing:-.3px;}
.cal-nav{
  width:32px;height:32px;
  border-radius:8px;
  border:1px solid var(--card-border);
  background:var(--card-bg);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:14px;font-weight:700;
  color:var(--navy);
  font-family:inherit;
}
.cal-nav:active{transform:translateY(1px);}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:6px;}
.cal-weekdays span{font-size:var(--fs-tiny);font-weight:600;color:#3a4555;padding:4px 0;}
.cal-weekdays span:first-child{color:var(--red);}
.cal-weekdays span:last-child{color:var(--accent);}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:3px;}
.cal-day{
  padding:8px 0;
  font-size:var(--fs-field);color:var(--text-dark);
  cursor:pointer;border-radius:8px;
  font-weight:500;
  background:var(--card-bg);
}
.cal-day:active{background:#f0f0f0;}
.cal-day.other{color:#B4B2A9;font-weight:400;}
.cal-day.sun{color:var(--red);}
.cal-day.sat{color:var(--accent);}
.cal-day.today{background:var(--navy);color:#fff;font-weight:700;}
.cal-day.selected{background:var(--accent2);color:#fff;font-weight:700;}

/* ===== 시간 모달 ===== */
.time-modal{
  width:100%;background:var(--card-bg);
  border-radius:18px 18px 0 0;
  padding:20px 16px 28px;
}
.time-title{font-size:18px;font-weight:700;color:var(--text-dark);text-align:center;margin-bottom:16px;letter-spacing:-.3px;}
.time-picker{display:flex;align-items:center;justify-content:center;gap:4px;}
.time-col{display:flex;flex-direction:column;align-items:center;gap:4px;}
.time-btn{
  width:48px;height:36px;
  border-radius:8px;
  border:1px solid var(--card-border);
  background:var(--card-bg);
  font-size:14px;font-weight:700;
  color:var(--text-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;
}
.time-btn:active{background:var(--light-bg);}
.time-val{
  width:48px;height:48px;
  border-radius:10px;
  background:var(--navy);color:#fff;
  font-size:24px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}
.time-sep{font-size:24px;font-weight:900;color:var(--text-dark);padding:0 2px;}
.ampm-toggle{display:flex;flex-direction:column;gap:4px;margin-left:10px;}
.ampm-btn{
  width:44px;height:36px;
  border-radius:8px;
  border:1px solid var(--card-border);
  background:var(--card-bg);
  font-size:var(--fs-field);font-weight:700;
  color:var(--text-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;
}
.ampm-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.time-confirm{
  width:100%;height:44px;
  border:none;border-radius:10px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);
  color:#fff;
  font-size:var(--fs-field);font-weight:700;
  cursor:pointer;margin-top:16px;
  font-family:inherit;letter-spacing:.5px;
}
.time-confirm:active{transform:translateY(1px);}

/* ===== 뱃지 ===== */
.badge{
  font-size:var(--fs-tiny);font-weight:700;
  padding:3px 9px;border-radius:10px;
  letter-spacing:.3px;
}
.badge.ok{background:var(--ok-bg);color:var(--ok-color);}
.badge.wait{background:var(--wait-bg);color:var(--wait-color);}
.badge.no{background:var(--no-bg);color:var(--no-color);}

/* ===== 토글 ===== */
.pay-toggle{
  width:44px;height:26px;
  border-radius:13px;border:none;
  cursor:pointer;position:relative;
  transition:background 0.2s;
}
.pay-toggle.off{background:#ddd;}
.pay-toggle.on{background:var(--accent2);}
.pay-toggle-knob{
  width:22px;height:22px;border-radius:50%;
  background:#fff;position:absolute;top:2px;
  transition:left 0.2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.pay-toggle.off .pay-toggle-knob{left:2px;}
.pay-toggle.on .pay-toggle-knob{left:20px;}

/* ===== 진행 바 ===== */
.progress-bar{
  height:8px;border-radius:4px;
  background:#f0f2f4;
  margin-top:10px;overflow:hidden;
}
.progress-fill{
  height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--accent2) 0%,var(--teal-light) 100%);
  transition:width 0.3s;
}

/* ===== 하단 바 ===== */
.home-bar{
  width:100px;height:4px;
  border-radius:2px;
  background:rgba(10,22,40,.15);
  margin:6px auto 10px;
  flex-shrink:0;
}

/* ===== 토스트 ===== */
.toast{
  position:absolute;bottom:80px;left:50%;
  transform:translateX(-50%);
  background:var(--navy);color:#fff;
  padding:10px 20px;
  border-radius:10px;
  font-size:var(--fs-field);font-weight:500;
  opacity:0;transition:opacity 0.3s;
  pointer-events:none;z-index:60;
  box-shadow:0 4px 16px rgba(10,22,40,.3);
}
.toast.show{opacity:1;}

/* ===== 가로화면 방지 ===== */
@media(orientation:landscape) and (max-height:500px){
  .phone-inner::before{
    content:'세로 화면으로 전환해 주세요';
    position:absolute;top:0;left:0;right:0;bottom:0;
    background:var(--navy);z-index:999;
    display:flex;align-items:center;justify-content:center;
    font-size:var(--fs-field);font-weight:700;
    color:rgba(255,255,255,.7);letter-spacing:1px;
  }
}

/* ===== 모바일 대응 (to-do 표준 풀스크린) ===== */
@media(max-width:480px){
  body{padding:0; background:#fafaf7;}
  .phone-frame{
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  /* dvh 미지원 브라우저 폴백 */
  @supports not (height:1dvh){
    .phone-frame{height:100vh !important;}
  }
  .phone-inner{
    border-radius:0 !important;
    height:100% !important;
  }
  /* 사이드 버튼 숨김 (실제 폰 화면) */
  .phone-frame > .btn-action,
  .phone-frame > .btn-vol-up,
  .phone-frame > .btn-vol-down,
  .phone-frame > .btn-power{display:none !important;}
  /* 다이나믹 아일랜드(상태바) 숨김 — 실제 폰의 상태바가 이미 있음 */
  .status-bar{display:none !important;}
  /* 잠금화면 라운드 제거 */
  .lock-slide{border-radius:0 !important;}
}
@media(max-width:400px){
  .del-btn{
    display:flex;align-items:center;justify-content:center;
    width:100%;height:40px;
    border:1px solid var(--red);
    border-radius:8px;
    background:transparent;color:var(--red);
    font-size:var(--fs-field);font-weight:700;
    cursor:pointer;margin-top:8px;
    font-family:inherit;
  }
  .del-btn:active{background:rgba(231,76,60,.08);}
  html,body{background:#d0d4dc;}
}

/* =============================================
   ★Phase 2★ — 물리버튼 + 잠금화면 (자동주입 대상)
   bzo-common.js의 bzoInjectPhoneUI()가 이 클래스들의
   HTML을 .phone-frame에 자동 삽입함.
   ============================================= */

/* ----- 물리버튼 4개 (메탈릭) ----- */
.phone-frame > .btn-action,
.phone-frame > .btn-vol-up,
.phone-frame > .btn-vol-down,
.phone-frame > .btn-power{
  position:absolute;
  width:4px;
  border-radius:2px;
  z-index:2;
}
.phone-frame > .btn-action{
  left:-12px;top:95px;height:30px;
  background:linear-gradient(90deg,#050a12 0%,#3a4458 50%,#050a12 100%);
}
.phone-frame > .btn-vol-up{
  left:-12px;top:145px;height:58px;
  background:linear-gradient(90deg,#050a12 0%,#3a4458 50%,#050a12 100%);
}
.phone-frame > .btn-vol-down{
  left:-12px;top:213px;height:58px;
  background:linear-gradient(90deg,#050a12 0%,#3a4458 50%,#050a12 100%);
}
.phone-frame > .btn-power{
  right:-12px;top:170px;height:80px;
  background:linear-gradient(270deg,#050a12 0%,#3a4458 50%,#050a12 100%);
}

/* ----- 잠금화면 ----- */
.lock-slide{
  position:absolute;
  inset:0;
  z-index:100;
  border-radius:34px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,0.9) 0%,transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(255,255,255,0.6) 0%,transparent 45%),
    linear-gradient(135deg,#a8d5f0 0%,#7fbde0 35%,#5fa9d4 70%,#4a96c4 100%);
  cursor:grab;
  transition:transform 0.7s cubic-bezier(0.4,0,0.2,1),opacity 0.7s cubic-bezier(0.4,0,0.2,1);
}
.lock-slide::before{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,0) 40%,rgba(255,255,255,0.35) 50%,rgba(255,255,255,0) 60%,transparent 70%);
  animation:bzoSheen 4s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes bzoSheen{
  0%   {transform:translateX(-30%) translateY(-30%);}
  50%  {transform:translateX(30%) translateY(30%);}
  100% {transform:translateX(-30%) translateY(-30%);}
}
.lock-slide::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.15) 50%,transparent 100%);
  pointer-events:none;
  z-index:0;
}
.lock-slide.unlocked{transform:translateY(-100%);opacity:0;}
.lock-slide:active{cursor:grabbing;}

.sparkle{
  position:absolute;
  width:4px;height:4px;
  background:#ffffff;
  border-radius:50%;
  box-shadow:0 0 8px rgba(255,255,255,0.9),0 0 16px rgba(255,255,255,0.6);
  animation:bzoTwinkle 2.5s ease-in-out infinite;
  z-index:1;
  pointer-events:none;
}
.sparkle.s1{top:18%;left:22%;animation-delay:0s;}
.sparkle.s2{top:32%;left:68%;animation-delay:0.6s;width:3px;height:3px;}
.sparkle.s3{top:55%;left:15%;animation-delay:1.2s;width:5px;height:5px;}
.sparkle.s4{top:70%;left:78%;animation-delay:0.3s;}
.sparkle.s5{top:25%;left:45%;animation-delay:1.8s;width:3px;height:3px;}
.sparkle.s6{top:80%;left:40%;animation-delay:0.9s;}
@keyframes bzoTwinkle{
  0%,100% {opacity:0.2;transform:scale(0.6);}
  50%     {opacity:1;transform:scale(1.2);}
}

.lock-content{
  position:relative;
  z-index:2;
  width:100%;height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px;
  color:var(--navy);
  text-shadow:0 2px 8px rgba(255,255,255,0.4);
}
.lock-brand{
  font-size:38px;
  font-weight:700;
  letter-spacing:4px;
  margin-bottom:8px;
}
.lock-sub{
  font-size:var(--fs-tiny);
  font-weight:600;
  letter-spacing:2px;
  color:rgba(10,22,40,0.85);
}
.lock-module{
  margin-top:22px;
  font-size:16px;
  font-weight:600;
  letter-spacing:3px;
}