/* KNUH Shoulder worksheet — 애플 스타일 부품 (2026-11-05)
   색은 app.css 의 :root 변수가 정한다. 여기서는 모양(테두리·둥글기·바탕)만 바꾼다.
   모든 탭 CSS 뒤에 읽히므로, 탭마다 따로 그린 카드·버튼도 여기서 함께 맞춘다.
   예전 모양으로 돌아가려면 index.html 에서 이 파일 한 줄을 빼고 app.css 를
   backup/css_before_apple_20261105/ 것으로 되돌린다. */

body{letter-spacing:-.01em}

/* ---------- 머리줄과 탭: 반투명 유리 막대 ---------- */
header{background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:0}
.brand b{color:var(--ink);font-weight:700;letter-spacing:-.025em}
.ico{border:0;background:var(--fill);border-radius:99px}
.ico:hover{background:var(--fill2)}
.tbtn{border-radius:99px}
.tbtn:hover{background:var(--fill);color:var(--ink)}

nav.tabs{background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--line)}
nav.tabs .inner{gap:4px;padding-top:6px;padding-bottom:7px}
nav.tabs a{padding:6px 13px;border:0;margin:0;border-radius:99px;font-weight:600;color:var(--sub)}
nav.tabs a:hover{color:var(--ink);background:var(--fill)}
nav.tabs a.on{color:#fff;background:var(--ac);border:0}
nav.tabs a .soon{border:0;background:var(--fill)}
nav.tabs a.on .soon{color:#fff;background:rgba(255,255,255,.25)}

/* ---------- 카드: 테두리 없이 흰 판 ---------- */
.card,.hw-sec,.gcard,.dc-task{border:0;border-radius:18px;box-shadow:none}
.hero h1{font-weight:700;letter-spacing:-.03em}
.chips span{border:0;background:var(--fill)}

/* ---------- 버튼 ---------- */
.btn{border-radius:10px;font-weight:600;padding:8px 15px}
.btn2{border:0;background:var(--fill);border-radius:10px;color:var(--ink)}
.btn2:hover{border:0;background:var(--fill2);color:var(--ink)}
.btn2.btn-bad,.btn-bad{color:var(--bad)}
.btn2.btn-bad:hover{background:var(--bad-soft);color:var(--bad)}
.btn2[disabled],.btn2:disabled{opacity:.45;cursor:default}
.tag{border:0;background:var(--fill)}
.ub{border:0;background:var(--fill);border-radius:99px}
.ub:hover{border:0;background:var(--fill2);color:var(--ink)}
.ub.p{background:var(--ac);color:#fff}

/* ---------- 입력칸: 테두리 없는 회색 바탕 ---------- */
input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="number"],
input[type="date"],input[type="time"],input[type="tel"],input[type="url"],input:not([type]),select,textarea{
  border-radius:10px}
.gcard input,.cal-form input:not([type="checkbox"]):not([type="radio"]),.cal-form select,.cal-form textarea,
.nt-flabel input,.cal-srch-input{
  border:1px solid transparent;background:var(--fill);color:var(--ink)}
.gcard input:focus,.cal-form input:focus,.cal-form select:focus,.cal-form textarea:focus,
.nt-flabel input:focus,.cal-srch-input:focus{border-color:var(--ac);background:var(--card);
  box-shadow:0 0 0 3px var(--ac-soft);outline:none}

/* ---------- 표 ---------- */
.tw{border:0;border-radius:12px;background:var(--card)}
th{background:var(--card2);color:var(--sub);font-weight:600}
th,td{border-color:var(--line)}

/* ---------- 창(모달): 둥근 시트 ---------- */
.modal{background:rgba(0,0,0,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal .box{border:0;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal h3{font-weight:700;letter-spacing:-.02em}
.ks-modal-x{border:0;background:var(--fill);border-radius:99px;font-size:17px}
.ks-modal-x:hover{background:var(--fill2);color:var(--ink)}

/* "저장할까요?" 같은 작은 확인 창은 iOS 알림창 모양 */
.modal.ks-ask .box{max-width:290px;padding:20px 0 0;text-align:center;border-radius:16px;overflow:hidden;
  background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(30px)}
.modal.ks-ask h3{font-size:16px;padding:0 18px}
.modal.ks-ask .ms{padding:0 18px;margin-bottom:18px}
.modal.ks-ask .ks-askbtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:.5px solid var(--line)}
.modal.ks-ask .ks-askbtns button{min-height:44px;margin:0;border:0;border-radius:0;background:transparent;
  color:var(--ac);font-size:15px;padding:0}
.modal.ks-ask .ks-askbtns button + button{border-left:.5px solid var(--line)}
.modal.ks-ask .ks-askbtns button.btn{font-weight:700}
.modal.ks-ask .ks-askbtns button:hover{background:var(--fill)}

/* ---------- 토스트: 반투명 알약 ---------- */
#toast div{background:color-mix(in srgb,var(--ink) 86%,transparent);backdrop-filter:blur(16px);
  border-radius:99px;font-weight:500}

/* ---------- 편집기·메모 ---------- */
.ks-ed-wrap{border:0;background:var(--fill);border-radius:12px}
.cal-detail-memo,.cal-checkview{border:0;background:var(--card2)}
.ks-alert-body{border:0;background:var(--card2)}

/* ---------- 엑셀형 표 둘레 ---------- */
.er-jss,.sh-jss,.ward-jss{border:0;border-radius:14px;box-shadow:0 0 0 .5px var(--line)}

/* ---------- 오른쪽 버튼 메뉴 ---------- */
.dc-menu{border:0;border-radius:12px;background:color-mix(in srgb,var(--card) 90%,transparent);
  backdrop-filter:blur(24px);box-shadow:0 10px 40px rgba(0,0,0,.18),0 0 0 .5px var(--line)}

/* ---------- 탭마다 따로 그린 부품들 ----------
   테두리 있는 작은 버튼 → 테두리 없는 회색 알약. ".on"(고른 것)은 각 탭 CSS 의 파란 채움이 그대로 이긴다. */
.dc-vbtn,.dc-lbtn,.dc-lbtn2,.hw-mini,.hw-addsec,.hw-part,.hm-chip,.hm-outbtn,.nt-pinbtn,
.rs-sub,.rp-pill,.st-eye,.sh-subtabs a,.sh-addtab,.wd-btn,.wd-fuchip,.cal-sideall{
  border-color:transparent;background:var(--fill);color:var(--ink)}
.dc-vbtn:hover,.dc-lbtn:hover,.dc-lbtn2:hover,.hw-mini:hover,.hw-addsec:hover,.hw-part:hover,
.hm-outbtn:hover,.nt-pinbtn:hover,.rs-sub:hover,.rp-pill:hover,.st-eye:hover,.sh-subtabs a:hover,.sh-addtab:hover,
.wd-btn:hover,.wd-fuchip:hover,.cal-sideall:hover{border-color:transparent;background:var(--fill2)}
.dc-lbtn2.bad:hover,.hw-mini-bad:hover,.wd-btn-out:hover{background:var(--bad-soft);color:var(--bad)}

/* 입력칸 → 회색 바탕, 누르면 파란 테두리 */
.hw-search input,.hw-flabel input,.hw-editlab input,.er-date-input,.er-field-input,.er-field-textarea,
.nt-search input,.nt-cinput,.nt-aname,.rs-input,.rs-date,.rp-inp,.ward-date-input,.wd-flabel input,
.wd-writebox textarea,.wd-replybox textarea,.wd-findbar input,.sh-flabel input,.cal-checkval{
  border-color:transparent;background:var(--fill);color:var(--ink);border-radius:10px}
.hw-search input:focus,.hw-flabel input:focus,.hw-editlab input:focus,.er-date-input:focus,.er-field-input:focus,
.er-field-textarea:focus,.nt-search input:focus,.nt-cinput:focus,.nt-aname:focus,.rs-input:focus,.rs-date:focus,
.rp-inp:focus,.ward-date-input:focus,.wd-flabel input:focus,.wd-writebox textarea:focus,.wd-replybox textarea:focus,
.wd-findbar input:focus,.sh-flabel input:focus,.cal-checkval:focus{
  border-color:var(--ac);background:var(--card);box-shadow:0 0 0 3px var(--ac-soft);outline:none}

/* 카드 안의 작은 카드 → 테두리 없이 옅은 회색 판 */
.wd-card,.rp-doc,.nt-file,.nt-attach,.wd-fuitem,.wd-note-item,.wd-findrow,.hw-note,.sh-guide,
.ward-note-body,.er-raw-details,.cal-import-list,.ward-dropzone{border-color:transparent;background:var(--card2);border-radius:14px}
.wd-card:hover{border-color:transparent;box-shadow:0 0 0 2px var(--ac-soft)}
.ward-dropzone{border:1.5px dashed var(--fill2)}

/* 펼쳐지는 메뉴·작은 팝업 → 유리판 */
.dc-vmenu,.hm-outpanel,.cal-daypop{border:0;border-radius:14px;
  background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 10px 40px rgba(0,0,0,.18),0 0 0 .5px var(--line)}

/* FTP 왼쪽 폴더판과 자세히 보기 판 */
.dc-treepane,.dc-listwrap{border:0;border-radius:18px}

/* ---------- 세그먼트(월/주/목록 같은 고르기) ---------- */
.cal-views{border:0;background:var(--fill);border-radius:9px;padding:2px}
.cvbtn{border-radius:7px;color:var(--ink)}
.cvbtn.on{background:var(--seg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}

/* ---------- 달력 격자: 굵은 회색 띠 대신 얇은 선 ---------- */
.cal-grid,.cal-weeks,.hm-caldow,.hm-weeks{border-color:var(--line)}
.cal-head,.hm-caldow{border-radius:12px 12px 0 0}
.cal-weeks,.hm-weeks{border-radius:0 0 12px 12px}
.cal-wrow,.hm-wrow{gap:0;background:var(--card)}
.cal-wrow + .cal-wrow,.hm-wrow + .hm-wrow{margin-top:0;border-top:1px solid var(--line)}
.cal-cell,.hm-calcell{box-shadow:inset -1px 0 0 var(--line)}
.cal-cell.other{background:var(--card)}
.cal-dow,.hm-caldow > div{background:var(--card)}
.cal-daynum,.hm-caldate{border-radius:99px}
.cal-bar,.hm-calbar{border-radius:5px}
.hm-caltoday{box-shadow:inset -1px 0 0 var(--line),inset 0 0 0 2px var(--ac)}

/* 인계장 "장 추가" 칸은 점선 빈 칸으로 둔다(회색 덩어리로 보이지 않게). */
.hw-addch{border:1.5px dashed var(--fill2);background:transparent;border-radius:18px}
.hw-addch:hover{border-color:var(--ac);background:var(--ac-soft)}