/* =============== NAVER-STYLE PREMIUM MODAL =============== */
:root{
    --nv-green: #03c75a;
    --nv-green-600:#02b451;
    --text-strong:#111827;
    --text:#374151;
    --muted:#6b7280;
    --panel:#ffffff;
    --overlay: rgba(0,0,0,.45);
    --border: rgba(0,0,0,.10);
    --radius-xl:18px;
    --radius-md:12px;
    --shadow: 0 14px 38px rgba(17,24,39,.16), 0 6px 16px rgba(17,24,39,.08);
    --field-bg:#fff;
    --field-border: rgba(0,0,0,.12);
    --focus: color-mix(in srgb, var(--nv-green) 35%, transparent);
    --title-fz: clamp(18px, 2.2vw, 20px);
    --anim-dur:.28s;
    --anim-ease:cubic-bezier(.2,.8,.2,1);
    --btn-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px rgba(17,24,39,.10);
    --font:-apple-system,BlinkMacSystemFont,"Noto Sans KR","Apple SD Gothic Neo","Segoe UI",Roboto,Arial,sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --text-strong:#e5e7eb; --text:#d1d5db; --muted:#9ca3af;
      --panel: rgba(28,32,37,.96); --overlay: rgba(0,0,0,.55);
      --border: rgba(255,255,255,.12);
      --field-bg: rgba(255,255,255,.06); --field-border: rgba(255,255,255,.18);
      --shadow: 0 14px 38px rgba(0,0,0,.42);
    }
  }
  @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important;} }
  
  /* 오버레이(컨테이너) */
  .note-input-Popup{
    font-family:var(--font);
    position:fixed; inset:0; display:none; opacity:0;
    justify-content:center; align-items:center;
    padding:24px; z-index:1000;
    background:var(--overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:opacity var(--anim-dur) var(--anim-ease);
  }
  .note-input-Popup.is-open{ display:flex; opacity:1; }
  body.scroll-lock{ overflow:hidden; }
  
  /* 카드(패널) */
  .note-input-Popup .note-popup-content{
    position:relative;
    width:min(92vw, 560px);
    max-height:84vh;
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow);
    transform: translateY(8px) scale(.98);
    opacity:0;
    display:grid; grid-template-rows:auto 1fr auto;
    transition: transform var(--anim-dur) var(--anim-ease), opacity var(--anim-dur) var(--anim-ease);
  }
  .note-input-Popup.is-open .note-popup-content{
    transform: translateY(0) scale(1); opacity:1;
  }
  
  /* 헤더 */
  .note-input-Popup .popup-header{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px;
    padding:16px 18px;
    border-bottom:1px solid var(--border);
  }
  .note-input-Popup .popup-title{
    margin:0; font-size:var(--title-fz);
    font-weight:800; letter-spacing:-.2px; color:var(--text-strong);
  }
  
  /* 닫기 버튼 */
  .note-input-Popup .note-close-button{
    position:static; /* 우상단 고정이 아닌 헤더 오른쪽 버튼로 */
    width:36px; height:36px; line-height:36px; text-align:center;
    border-radius:12px; font-size:18px; cursor:pointer;
    color:var(--text);
    background: color-mix(in srgb, var(--panel) 70%, transparent);
    border:1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: background-color .18s ease, transform .12s ease;
  }
  .note-input-Popup .note-close-button:hover{ transform: scale(1.06); }
  
  /* 바디 */
  .note-input-Popup .popup-body{
    padding:18px;
    overflow:auto; max-height: calc(84vh - 120px);
  }
  .note-input-Popup label{
    display:block; margin:6px 0 8px;
    font-size:13px; font-weight:700; color:var(--text);
  }
  .note-input-Popup input[type="text"],
  .note-input-Popup textarea{
    width:100%; background:var(--field-bg);
    border:1px solid var(--field-border);
    border-radius:var(--radius-md);
    color:var(--text-strong);
    padding:12px 14px; font-size:15px; box-sizing:border-box;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .note-input-Popup input[type="text"]::placeholder,
  .note-input-Popup textarea::placeholder{ color:var(--muted); }
  .note-input-Popup input[type="text"]:focus,
  .note-input-Popup textarea:focus{
    outline:none; border-color:var(--nv-green);
    box-shadow:0 0 0 4px var(--focus);
  }
  .note-input-Popup textarea{ min-height:160px; resize:vertical; }
  
  /* 푸터 */
  .note-input-Popup .popup-footer{
    display:flex; gap:10px; justify-content:flex-end;
    padding:12px 18px 18px; border-top:1px solid var(--border);
  }
  .note-input-Popup .btn{
    border:0; border-radius:12px; padding:12px 18px;
    font-size:15px; font-weight:800; cursor:pointer;
    box-shadow: var(--btn-shadow);
    transition: transform .12s ease, filter .18s ease, background-color .18s ease;
  }
  .note-input-Popup .btn:active{ transform: translateY(1px); }
  .note-input-Popup .btn-ghost{
    background:#e5e7eb; color:#111827; border:1px solid var(--border);
  }
  @media (prefers-color-scheme: dark){
    .note-input-Popup .btn-ghost{ background:#374151; color:#e5e7eb; }
  }
  .note-input-Popup .btn-primary{
    background:var(--nv-green); color:#fff;
  }
  .note-input-Popup .btn-primary:hover{ background:var(--nv-green-600); }
  
  /* 포커스 가시성 */
  *:focus-visible{
    outline:3px solid var(--focus);
    outline-offset:2px; border-radius:10px;
  }
  
  /* 모바일 */
  @media (max-width:768px){
    .note-input-Popup .note-popup-content{ width:min(92vw, 560px); }
  }