/* =========================================================================
   app.css — exam.sitedev.kr 공용 디자인 시스템
   작성일: 2026-06-14
   톤: 밝은 학습/시험지 느낌 (가독성·인쇄 친화). 액센트=인디고.
   ========================================================================= */

:root{
  --bg:#f4f5f8;
  --paper:#ffffff;
  --ink:#191c22;
  --ink-2:#3d4350;
  --muted:#7b8290;
  --line:#e6e8ec;
  --line-2:#eef0f3;
  --brand:#4f46e5;
  --brand-d:#4338ca;
  --brand-soft:#eef0ff;
  --ok:#15803d;   --ok-soft:#e8f6ec;
  --warn:#b45309; --warn-soft:#fbf1e0;
  --err:#dc2626;  --err-soft:#fdecec;
  --r-lg:16px; --r-md:11px; --r-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --sans:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --serif:Georgia,'Times New Roman','Apple SD Gothic Neo',serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* ── 레이아웃 ── */
.wrap{max-width:880px; margin:0 auto; padding:28px 20px 96px}
.wrap-narrow{max-width:720px}

/* ── 상단 바 ── */
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.01em; color:var(--ink)}
.brand .logo{width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--brand),#7c6cf0);
  display:grid; place-items:center; color:#fff; font-size:15px; box-shadow:var(--shadow-sm)}
.topbar .right{display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--muted)}
.topbar .right a{color:var(--muted); text-decoration:none}
.topbar .right a:hover{color:var(--ink)}
.topbar .right a.dl{font-weight:700; color:var(--brand-d); background:var(--brand-soft);
  padding:6px 12px; border-radius:999px; border:1.5px solid transparent; transition:.15s}
.topbar .right a.dl:hover{border-color:var(--brand); color:var(--brand-d)}
.del-btn{cursor:pointer; border:none; background:transparent; font-size:15px; line-height:1; padding:5px 7px;
  border-radius:8px; opacity:.55; transition:.15s}
.del-btn:hover{opacity:1; background:#fdeaea}
/* 접속자(이름·기기명) */
.who{display:inline-flex; align-items:baseline; gap:7px; padding:5px 12px; border-radius:999px;
  background:var(--brand-soft); line-height:1.1}
.who .who-name{font-weight:800; color:var(--brand-d); font-size:13px}
.who .who-dev{font-size:11.5px; color:var(--muted)}
.who .who-dev::before{content:"·"; margin-right:6px; color:var(--line)}
@media(max-width:560px){ .who .who-dev{display:none} }

/* ── 페이지 헤더 ── */
.page-h{margin:4px 0 4px; font-size:24px; font-weight:800; letter-spacing:-.02em}
.page-sub{color:var(--muted); font-size:14px; margin:0 0 22px}

/* ── 카드 ── */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:22px}
.card + .card{margin-top:16px}

/* ── 폼 ── */
.field{margin-bottom:14px}
.label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin:0 0 6px; letter-spacing:.01em}
.hint{color:var(--muted); font-weight:500; font-size:12px}
.input,.select,.textarea{
  width:100%; padding:11px 13px; font-size:14.5px; color:var(--ink); font-family:inherit;
  background:#fcfcfd; border:1px solid var(--line); border-radius:var(--r-md); transition:border-color .15s, box-shadow .15s;
}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); background:#fff}
.textarea{min-height:76px; resize:vertical; line-height:1.5}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* 파일 드롭 영역 */
.file{position:relative; border:1.5px dashed var(--line); border-radius:var(--r-md); padding:16px; background:#fbfbfd;
  display:flex; align-items:center; gap:12px; transition:border-color .15s, background .15s; cursor:pointer}
.file:hover{border-color:#c7cbff; background:#fafaff}
.file.has{border-style:solid; border-color:#c7cbff; background:#fafaff}
.file input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer}
.file .ico{width:38px; height:38px; border-radius:10px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; flex:none; font-size:18px}
.file .ftxt b{display:block; font-size:13.5px; color:var(--ink)}
.file .ftxt span{font-size:12px; color:var(--muted)}

/* ── 문항 구성(개수 박스) ── */
.count-box{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--r-md);
  padding:10px 12px; background:#fcfcfd; cursor:text}
.count-box .ct-ico{width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:12px; font-weight:800}
.count-box .ct-txt{flex:1}
.count-box .ct-txt b{display:block; font-size:13.5px; color:var(--ink)}
.count-box .ct-txt span{font-size:11.5px; color:var(--muted)}
.count-box .ct-num{width:62px; text-align:center; padding:8px 6px}

/* ── 칩(유형 선택) ── */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink-2); font-size:13px; cursor:pointer; user-select:none; transition:all .12s}
.chip input{display:none}
.chip:hover{border-color:#c7cbff}
.chip.on{background:var(--brand-soft); border-color:#c1c4f7; color:var(--brand-d); font-weight:700}
.addtype{display:flex; gap:8px; margin-top:10px}
.addtype .input{flex:1}

/* ── 버튼 ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:700; padding:11px 20px; border-radius:var(--r-md);
  border:1px solid transparent; transition:filter .12s, transform .04s; line-height:1}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{filter:brightness(1.06); text-decoration:none}
.btn-ghost{background:#fff; color:var(--ink-2); border-color:var(--line)}
.btn-ghost:hover{border-color:#c7cbff; text-decoration:none}
.btn[disabled]{opacity:.55; cursor:wait}
.btn-lg{padding:13px 24px; font-size:15px}
.btn-block{width:100%}

/* ── 배지/상태 ── */
.badge{display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand-d)}
.pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px}
.pill::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9}
.pill-done{background:var(--ok-soft); color:var(--ok)}
.pill-generating{background:var(--warn-soft); color:var(--warn)}
.pill-error{background:var(--err-soft); color:var(--err)}
.pill-draft{background:var(--line-2); color:var(--muted)}

/* ── 표 ── */
.tbl{width:100%; border-collapse:separate; border-spacing:0}
.tbl th{font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700;
  text-align:left; padding:0 12px 10px}
.tbl td{padding:13px 12px; border-top:1px solid var(--line-2); font-size:14px}
.tbl tr:hover td{background:#fafbfc}
.tbl .t-title{font-weight:600; color:var(--ink)}

/* ── 안내문 ── */
.note{font-size:13.5px; padding:12px 14px; border-radius:var(--r-md); display:flex; gap:9px; align-items:flex-start}
.note-warn{background:var(--warn-soft); color:#92400e}
.note-info{background:var(--brand-soft); color:var(--brand-d)}
.msg{min-height:1.3em; font-size:13.5px; margin-top:10px}
.msg-warn{color:var(--warn)} .msg-err{color:var(--err)} .msg-ok{color:var(--ok)}

/* ── 문제(시험지) ── */
.q{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  padding:22px 24px; margin-bottom:14px}
.q-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.q-no{display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:9px;
  background:var(--brand); color:#fff; font-weight:800; font-size:15px}
.q-type{font-size:12px; font-weight:700; color:var(--brand-d); background:var(--brand-soft); padding:4px 11px; border-radius:999px}
.qedit-btn{margin-left:auto; flex:none; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--brand-d);
  background:#fff; border:1.5px solid var(--brand-soft); padding:6px 13px; border-radius:999px; transition:.15s}
.qedit-btn:hover{background:var(--brand-soft); border-color:var(--brand)}

/* ── 문제별 수정요청 모달 ── */
.eform{text-align:left; margin-top:4px}
.eform .fld{margin-bottom:15px}
.eform .fld:last-child{margin-bottom:2px}
.eform label{display:block; font-size:12.5px; font-weight:800; letter-spacing:.02em; color:var(--ink-2); margin-bottom:7px}
.eform label .opt{font-weight:500; color:var(--muted)}
.eform select, .eform textarea{display:block; width:100%; box-sizing:border-box; font-family:inherit; font-size:14.5px;
  color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:11px; padding:11px 13px; transition:.15s}
.eform select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239aa' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; cursor:pointer}
.eform select:focus, .eform textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.eform textarea{min-height:64px; resize:vertical; line-height:1.55}
.swal-ewide{border-radius:20px !important; padding:26px 26px 22px !important}
.swal-ewide .swal2-title{font-size:18px !important; color:var(--ink) !important; padding-top:4px !important}
.swal-etag{display:inline-block; font-size:12px; font-weight:800; color:var(--brand-d); background:var(--brand-soft);
  padding:3px 11px; border-radius:999px; margin-bottom:2px}
.passage{font-family:var(--serif); font-size:15.5px; line-height:1.78; color:#23262d; white-space:pre-wrap;
  background:#fcfbf7; border:1px solid #ece7da; border-radius:var(--r-md); padding:16px 18px; margin:6px 0 14px}
.stem{font-weight:600; font-size:15.5px; margin:2px 0 12px; color:var(--ink)}
.choices{list-style:none; margin:0; padding:0}
.choices li{display:flex; gap:9px; padding:5px 2px; font-size:15px; line-height:1.65; color:var(--ink-2)}
.choices .mk{flex:none; color:var(--muted); font-weight:600}
.answer-box{margin-top:14px; border-left:3px solid var(--brand); background:#f8f8fe; border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:11px 15px; display:none}
.answer-box .a{font-weight:800; color:var(--brand-d); font-size:14px}
.answer-box .e{margin-top:5px; font-size:13.5px; color:var(--ink-2); line-height:1.65; white-space:pre-wrap}
body.reveal .answer-box{display:block}
.write-area{margin:4px 0 2px; height:96px; border-radius:var(--r-sm);
  background-image:repeating-linear-gradient(transparent,transparent 31px,#e7e9ee 31px,#e7e9ee 32px);
  border:1px solid var(--line-2)}
@media print{.write-area{height:120px}}

/* ── 하단 수정 바 ── */
.refine{position:sticky; bottom:16px; margin-top:22px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:0 10px 30px rgba(16,24,40,.12); padding:16px 18px}
.refine h3{margin:0 0 2px; font-size:14.5px; display:flex; align-items:center; gap:7px}
.refine .quick{display:flex; flex-wrap:wrap; gap:7px; margin:11px 0}
.refine .quick button{background:#f3f4f8; border:1px solid var(--line); color:var(--ink-2); border-radius:999px;
  padding:6px 12px; font-size:12.5px; cursor:pointer; transition:all .12s}
.refine .quick button:hover{background:var(--brand-soft); border-color:#c7cbff; color:var(--brand-d)}
.refine-row{display:flex; gap:10px; align-items:flex-end}
.refine-row .textarea{min-height:120px}
.backbar{text-align:center; margin:20px 0 48px}
.btn-ghost{display:inline-block; background:#fff; color:var(--ink-2); border:1.5px solid var(--line);
  border-radius:11px; padding:12px 26px; font-weight:700; font-size:14.5px; cursor:pointer; transition:.15s; text-decoration:none}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand-d); background:var(--brand-soft)}

/* ── 로딩 ── */
.loading{display:flex; align-items:center; gap:12px; color:var(--ink-2); font-size:14.5px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-sm)}
.spinner{width:22px; height:22px; border:3px solid var(--brand-soft); border-top-color:var(--brand); border-radius:50%;
  animation:spin .8s linear infinite; flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 중앙 카드(랜딩/인증) ── */
.center{min-height:100vh; display:grid; place-items:center; padding:24px}
.center .box{width:100%; max-width:420px; text-align:center}

.empty{text-align:center; color:var(--muted); padding:34px 10px; font-size:14px}

/* ── 반응형 ── */
@media (max-width:640px){
  .wrap{padding:20px 14px 90px}
  .grid-2{grid-template-columns:1fr}
  .page-h{font-size:21px}
  .q{padding:18px 16px}
  .refine-row{flex-direction:column; align-items:stretch}
}

/* ── 인쇄(시험지 출력) ── */
@media print{
  :root{--bg:#fff}
  body{background:#fff; font-size:12.5pt}
  .topbar,.refine,.no-print,.page-sub{display:none!important}
  .wrap{max-width:none; padding:0}
  body.reveal .answer-box{display:block}
  .q{box-shadow:none; border:none; border-bottom:1px solid #ddd; border-radius:0; break-inside:avoid; page-break-inside:avoid}
  .passage{background:#fff; border-color:#ccc}
}