@font-face { font-family: 'NanumSquare'; src: url('../fonts/NanumSquareR.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'NanumSquare'; src: url('../fonts/NanumSquareB.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'NanumSquare'; src: url('../fonts/NanumSquareEB.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --ink: #f0efed;
  --sub: #9a9a9a;
  --line: #2a2a2a;
  --bg: #0f0f0f;
  --card: #191919;
  --field: #1f1f1f;
  --ok: #45d3a2;
  --amber: #e6b04c;
  --red: #ef6a6a;
  --font: 'NanumSquare', 'NanumSquareOTF', '나눔스퀘어', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg); color: var(--ink);
  font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: -0.01em;
  word-break: keep-all;
}
button, input, select, textarea { font-family: var(--font); letter-spacing: -0.01em; }
b, strong { font-weight: 700; }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 12px 100px; }


.topbar {
  position: sticky; top: 0; z-index: 20; background: #000; color: #fff;
  border-bottom: 1px solid #1f1f1f;
  padding: 9px 12px; display: flex; align-items: center; gap: 8px; min-height: 56px;
}
.topbar .back { color: #fff; text-decoration: none; font-size: 19px; line-height: 1; padding: 6px 8px 6px 2px; }
.topbar .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.topbar .brand { font-size: 9.5px; font-weight: 400; letter-spacing: .3em; opacity: .55; line-height: 1; }
.topbar .title { font-size: 15.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .title .sub { font-size: 11px; font-weight: 400; opacity: .5; margin-left: 4px; letter-spacing: 0; }
.topbar > .sub { font-size: 11px; font-weight: 400; opacity: .45; white-space: nowrap; }
.resetBtn {
  flex: 0 0 auto; background: transparent; border: 1px solid rgba(255,255,255,.32); color: #fff;
  border-radius: 8px; padding: 6px 11px; font-size: 12px; font-weight: 400; line-height: 1;
}
@media (max-width: 400px) { .topbar > .sub { display: none; } }


.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 15px 14px; margin: 10px 0; }
.card h2 { font-size: 14px; font-weight: 700; letter-spacing: -0.005em; margin-bottom: 11px; }

.liveTag { font-size: 11px; font-weight: 700; color: #b58a2b; background: #2a2418;
  border: 1px solid #4a3d1e; border-radius: 4px; padding: 1px 5px; white-space: nowrap; }

.metaHead { font-size: 14px; font-weight: 800; color: #e6e6e6; margin: 4px 0 -2px; }
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.meta-grid .full { grid-column: 1 / -1; }
label.f { display: block; font-size: 11.5px; font-weight: 400; color: var(--sub); margin-bottom: 5px; letter-spacing: 0; }


input[type=text], input[type=password], input[type=date], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #333; border-radius: 8px;
  font-size: 14px; line-height: 1.4; background: var(--field); color: var(--ink);
  color-scheme: dark; appearance: none; -webkit-appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
select:disabled { color: var(--sub); background-image: none; }

.timepair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sel-sm { padding-left: 9px; padding-right: 24px; text-align: center; text-align-last: center; }
.sel-sm { background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; }
input::placeholder, textarea::placeholder { color: #656565; font-weight: 400; }


.gnav { display: flex; gap: 6px; overflow-x: auto; padding: 9px 2px; position: sticky; top: 56px; z-index: 15; background: var(--bg); }
.gnav::-webkit-scrollbar { display: none; }
.gnav a {
  flex: 0 0 auto; text-decoration: none; color: #dcdcdc; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 12px; line-height: 1; white-space: nowrap;
}
.gnav a .n { color: var(--sub); font-size: 11px; }


.group { margin-top: 18px; }
.ghead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 4px 9px; }
.ghead h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.ghead .gstat { font-size: 11.5px; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ghead .gscore { font-weight: 700; color: #fff; }


.item { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 13px 13px 12px; margin-bottom: 8px; }
.item.crit { border-left: 3px solid var(--red); }
.q { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 11px; }
.q .no { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #aaa; background: #262626; border-radius: 6px; padding: 3px 7px; line-height: 1.25; margin-top: 2px; font-variant-numeric: tabular-nums; }
.q .txt { flex: 1; font-size: 14px; line-height: 1.55; }
.item.crit .q .txt { color: var(--red); }
.badge-crit { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #fff; background: #b33a3a; border-radius: 6px; padding: 3px 7px; line-height: 1.25; margin-top: 2px; }

.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg { display: flex; gap: 4px; }
.seg button {
  min-width: 42px; height: 38px; border: 1px solid #333; background: var(--field);
  border-radius: 8px; font-size: 14px; font-weight: 700; line-height: 1; color: #8a8a8a;
}
.seg button.on-o { background: #10332a; border-color: #2f8f6f; color: var(--ok); }
.seg button.on-na { background: #24272c; border-color: #5a626d; color: #aeb6c0; }

.counter { display: flex; align-items: center; height: 38px; border: 1px solid #333; border-radius: 8px; background: var(--field); }
.counter button { width: 36px; height: 100%; border: 0; background: transparent; font-size: 17px; line-height: 1; color: var(--ink); }
.counter .cnt { min-width: 32px; text-align: center; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--ink); font-variant-numeric: tabular-nums; }
.counter .cl { font-size: 11px; color: var(--sub); padding: 0 9px 0 4px; }

.photoBtn { flex: 0 0 auto; height: 34px; border: 1px dashed #555; background: transparent; border-radius: 8px; padding: 0 11px; font-size: 12px; line-height: 1; color: #999; }
.photoBtn.has { border-style: solid; border-color: var(--ink); color: var(--ink); font-weight: 700; }
.photoBtn.need { border-color: var(--red); color: var(--red); }

.meta-row { display: flex; gap: 8px; align-items: center; margin-top: 9px; }



.case-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 7px; }
.case-row .case-no { flex: 0 0 auto; min-width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; font-size: 11.5px; font-weight: 700; color: var(--sub);
  background: #242424; border-radius: 6px; font-variant-numeric: tabular-nums; }
.case-row .thumbs { flex: 1 0 100%; }
.score-chip { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 34px; min-width: 68px; font-size: 11.5px; border-radius: 6px; padding: 0 8px; background: #242424; color: var(--sub); font-variant-numeric: tabular-nums; }
.score-chip.s-o { background: #10332a; color: var(--ok); font-weight: 700; }
.score-chip.s-d { background: #33270f; color: var(--amber); font-weight: 700; }
.score-chip.s-x { background: #371818; color: var(--red); font-weight: 700; }
.memo { flex: 1; min-width: 0; height: 34px; padding: 0 10px !important; font-size: 13px !important; }

.photoBtn.wide { width: 100%; height: 44px; font-size: 13px; }
.photoBtn:disabled { opacity: 0.6; }
.photoHint { font-size: 11.5px; color: var(--sub); margin-top: 6px; line-height: 1.5; }
.photoField .thumbs { margin-top: 8px; }
.thumbs { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid #333; }


.mockNote { border: 1px dashed #55442a; background: #1c1710; color: #c8a86a; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.seg3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.seg3 button { height: 42px; border: 1px solid #333; border-radius: 8px; background: var(--field); color: var(--sub); font-size: 13px; }
.seg3 button.on { border-color: var(--ink); color: var(--ink); font-weight: 700; background: #24272c; }
.issueBtn { width: 100%; height: 46px; margin-top: 11px; border: 0; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 700; }
.bigCodeBox { margin-top: 12px; border: 1px solid var(--ink); border-radius: 11px; padding: 14px; text-align: center; }
.bcStore { font-size: 12px; color: var(--sub); }
.bigCode { font-size: 34px; font-weight: 800; letter-spacing: 0.12em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.bcExp { font-size: 12px; color: var(--sub); margin-bottom: 11px; }
.bcAct { display: flex; gap: 6px; justify-content: center; }
.miniBtn { height: 32px; padding: 0 11px; border: 1px solid #444; border-radius: 7px; background: transparent; color: var(--ink); font-size: 12px; }
.miniBtn.warn { color: var(--red); border-color: #5a2b2b; }

.card.inner { background: var(--card2, rgba(255,255,255,.03)); border-radius: 9px; padding: 10px 12px; margin: 8px 0; }
.planLine { font-size: 13px; line-height: 1.65; word-break: keep-all; }
.issueBtn.warn { background: var(--red); color: #fff; }
.codeSum { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--sub); margin-bottom: 11px; }
.codeSum b { color: var(--ink); font-weight: 700; }
.codeSum b.hot { color: #d8a13a; } .codeSum b.ok { color: #4fa96a; } .codeSum b.bad { color: var(--red); }
.codeRow .dim { color: var(--sub); }
.codeRow { display: grid; grid-template-columns: 20px 1fr auto; gap: 4px 8px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.codeRow:first-child { border-top: 0; }
.codeRow .st { font-size: 13px; }
.codeRow .nm { font-weight: 700; }
.codeRow .info { grid-column: 2 / -1; font-size: 12px; color: var(--sub); }
.codeRow .act { grid-row: 1 / 3; grid-column: 3; display: flex; gap: 5px; }
.codeRow .cd { color: var(--ink); font-size: 14px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.codeRow.unused .rem { color: #d8a13a; }
.codeRow.expired .nm, .codeRow.none .nm { color: var(--sub); font-weight: 400; }

.qrImg { display: block; width: 190px; height: 190px; margin: 12px auto 6px;
  image-rendering: pixelated; background: #fff; border-radius: 6px; }
.qrCap { font-size: 11.5px; color: var(--sub); margin-bottom: 11px; }
.qrFull { position: fixed; inset: 0; z-index: 100; background: #fff; color: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px; }
.qfStore { font-size: 15px; font-weight: 700; }
.qfImg { width: min(78vw, 330px); height: min(78vw, 330px); image-rendering: pixelated; }
.qfCode { font-size: 40px; font-weight: 800; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.qfHint { font-size: 12.5px; color: #555; text-align: center; line-height: 1.6; margin-top: 4px; }
.qfClose { margin-top: 16px; height: 42px; padding: 0 28px; border: 1px solid #999;
  border-radius: 9px; background: #fff; color: #000; font-size: 14px; }
.codesLink { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; margin: 10px 0;
  background: var(--card); font-size: 14px; font-weight: 700; }
.codesLink .arrow { color: var(--sub); font-weight: 400; }


.bottombar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: #141414; border-top: 1px solid #262626;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
}
.bottombar .in { max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.bb-score { flex: 1; min-width: 0; }
.bb-score .big { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bb-score .grade { font-size: 13px; font-weight: 700; color: #fff; margin-left: 7px; }
.bb-score .prog { display: block; font-size: 11px; color: var(--sub); margin-top: 2px; font-variant-numeric: tabular-nums; }
.submit { flex: 0 0 auto; background: var(--ink); color: #111; border: 0; border-radius: 10px; padding: 13px 24px; font-size: 15px; font-weight: 700; line-height: 1; }
.submit:disabled { background: #3a3a3a; color: #777; }

.openBtn { width: 100%; margin-top: 2px; }
.codeNote { color: #e08585; padding-top: 10px; }

.progressbar { height: 5px; background: #2a2a2a; border-radius: 3px; overflow: hidden; margin-top: 7px; }
.progressbar .fill { height: 100%; background: var(--ink); width: 0; transition: width .2s; }


.qcard .opts { display: flex; gap: 7px; margin-top: 10px; }
.qcard .opts button { flex: 1; height: 44px; border: 1px solid #333; background: var(--field); border-radius: 8px; font-size: 14px; font-weight: 700; line-height: 1; color: #8a8a8a; }
.qcard .opts button.on-yes { background: #10332a; border-color: #2f8f6f; color: var(--ok); }
.qcard .opts button.on-no { background: #371818; border-color: #a04444; color: var(--red); }
.qcard .opts button.on-na { background: #24272c; border-color: #5a626d; color: #aeb6c0; }
.why { width: 100%; margin-top: 9px; padding: 10px 11px; border: 1px solid #333; border-radius: 8px; font-size: 13px; line-height: 1.5; background: var(--field); color: var(--ink); }
.why.need { border-color: var(--red); }



.why::placeholder { color: #8f8f8f; }


input.why { border-color: #3a3a3a; font-size: 13px; }

.note { font-size: 12px; line-height: 1.6; color: var(--sub); padding: 8px 4px; }


.guide { border-color: #333; }
.guideList { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.guideList li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.65; color: #cfcfcf; }
.guideList li::before { content: ''; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: #6a6a6a; }
.guideList li b { color: #fff; font-weight: 700; }
.guideList li .tip { color: var(--ink); font-weight: 800; letter-spacing: .02em; }



.guideList li.lead { padding-left: 0; }
.guideList li.lead::before { display: none; }


.guide h2 { font-size: 16px; }
.guideList li.lead .head { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink);
  letter-spacing: .02em; margin-bottom: 2px; }
.guideList li.lead .body { display: block; padding-left: 12px; position: relative; }
.guideList li.lead .body::before { content: '–'; position: absolute; left: 0; color: #6a6a6a; }


.sumTable { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.sumTable th, .sumTable td { padding: 8px 4px; border-bottom: 1px solid #262626; text-align: left; }
.sumTable th { color: #888; font-size: 11.5px; font-weight: 400; padding-bottom: 6px; }
.sumTable td:first-child { font-size: 12.5px; }
.sumTable .r { text-align: right; }
.sumTable tr:last-child td { border-bottom: 0; }
.sumFinal { padding: 12px 4px 6px; font-size: 14px; color: var(--sub); }
.sumFinal b { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#summary h2 { margin-top: 14px; }
#summary h2:first-child { margin-top: 0; }
.offList { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.offRow { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; background: #1e1e1e; border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.offRow .no { font-weight: 700; color: #aaa; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.offRow .t { flex: 1; }
.offRow .v { flex: 0 0 auto; font-weight: 700; color: var(--red); white-space: nowrap; font-variant-numeric: tabular-nums; }
.offRow.crit .t { color: var(--red); }
.offRow.none { color: var(--sub); background: transparent; cursor: default; padding-left: 4px; }
.offRow.na { color: var(--sub); font-size: 11.5px; background: transparent; cursor: default; padding-left: 4px; }


.home { position: relative; min-height: 100vh; display: flex; flex-direction: column; padding: 76px 22px 34px; max-width: 520px; margin: 0 auto; }
.homeBrand { text-align: center; font-size: 27px; font-weight: 400; letter-spacing: .19em; line-height: 1.2; color: #fff; text-indent: .19em; }
.homeSub { text-align: center; font-size: 11px; font-weight: 400; color: var(--sub); letter-spacing: .32em; margin-top: 14px; text-indent: .32em; }
.menu { margin-top: 52px; display: flex; flex-direction: column; gap: 11px; }
.menuCard {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 17px 16px; text-decoration: none; color: var(--ink);
}
.menuCard:active { background: #222; }
.menuCard .mi { flex: 1; min-width: 0; }
.menuCard .mt { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.menuCard .md { display: block; font-size: 11.5px; font-weight: 400; color: var(--sub); margin-top: 4px; line-height: 1.45; }
.menuCard .tag { flex: 0 0 auto; font-size: 10.5px; font-weight: 400; border: 1px solid #6e6e6e; border-radius: 999px; padding: 4px 9px; line-height: 1; color: #d5d5d5; }
.menuCard .tag.guest { background: var(--ink); border-color: var(--ink); color: #111; font-weight: 700; }
.menuCard .arrow { flex: 0 0 auto; color: #4f4f4f; font-size: 17px; line-height: 1; }
.homeFoot { text-align: center; color: #555; font-size: 10.5px; margin-top: auto; padding-top: 52px; letter-spacing: .1em; }




.bellBtn { position: absolute; top: 16px; right: 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; }
.bellBtn:active { background: #222; }
.bellBtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bellCount { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #b33a3a; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.bellPanel { position: absolute; top: 68px; right: 14px; z-index: 30; width: min(340px, calc(100% - 28px)); max-height: 60vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 28px rgba(0, 0, 0, .55); }
.bellHead { font-size: 11.5px; color: var(--sub); letter-spacing: .04em; padding: 12px 14px 9px; border-bottom: 1px solid var(--line); }
.bellItem { display: block; padding: 11px 14px; font-size: 13px; line-height: 1.5; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.bellItem:last-child { border-bottom: 0; }
.bellItem:active { background: #222; }
.bellItem .bStore { font-weight: 700; }
.bellItem .bAt { color: var(--sub); font-size: 11.5px; white-space: nowrap; }
.bellEmpty { font-size: 12.5px; color: var(--sub); padding: 18px 14px; text-align: center; }
.bellBtn[hidden], .bellCount[hidden], .bellPanel[hidden] { display: none; }









@media (max-width: 374px) {
  .home { padding-left: 13px; padding-right: 13px; }
  .menuCard { padding: 15px 12px; gap: 8px; }
  .menuCard .mt { font-size: 14.5px; }
  .menuCard .tag { padding: 4px 7px; }
}


.thanks { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px; }
.thanks .b { font-size: 14px; font-weight: 400; letter-spacing: .28em; color: #fff; text-indent: .28em; }
.thanks h1 { font-size: 20px; font-weight: 700; margin-top: 22px; }
.thanks p { font-size: 13.5px; font-weight: 400; color: var(--sub); margin-top: 12px; line-height: 1.7; }


.qcard .opts.likert { gap: 5px; }
.qcard .opts.likert button { flex: 1; min-width: 0; font-size: 15px; }
.likert-cap { font-size: 11px; color: var(--sub); margin-top: 5px; text-align: center; }
.counter .cnt.hot { color: var(--red); }
.sumTable tr.sum-crit td { font-weight: 700; border-top: 2px solid #3a3a3a; }


.badge-crit.s1 { background: #b33a3a; }
.badge-crit.s2 { background: #9a6a14; }
.item.crit.s1 { border-left: 3px solid #c04848; }
.item.crit.s2 { border-left: 3px solid #c07a1e; }
.offRow.crit .no { color: var(--red); }
.bb-crit { color: var(--red); font-weight: 700; }


.surveyLink { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; padding: 14px 16px; background: var(--card); border: 1px solid #333; border-radius: 12px; color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.surveyLink .arrow { color: var(--sub); font-size: 18px; }
.surveyLink:active { background: #222; }
.note.pre { white-space: pre-line; }





input[type=password], input[type=number] {
  width: 100%; padding: 11px 12px; border: 1px solid #333; border-radius: 8px;
  font-size: 14px; line-height: 1.4; background: var(--field); color: var(--ink);
  color-scheme: dark; appearance: none; -webkit-appearance: none;
}



.noteErr { color: var(--red); }
.noteOk { color: var(--ok); }







.pwWrap { position: relative; }
.pwWrap input { padding-right: 48px; }
.pwEye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: #262626; color: var(--sub);
}
.pwEye svg { width: 18px; height: 18px; display: block; }

.pwEye[aria-pressed="true"] { color: var(--ink); border-color: #3f3f3f; background: #2f2f2f; }
.pwEye .eyeOff { display: none; }
.pwEye[aria-pressed="true"] .eyeOn { display: none; }
.pwEye[aria-pressed="true"] .eyeOff { display: block; }

.chkRow { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 13px; color: #cfcfcf; }
.chkRow input[type=checkbox] { width: 17px; height: 17px; accent-color: #8a8a8a; flex: 0 0 auto; }
.fHint { font-weight: 400; color: #6d6d6d; margin-left: 5px; }


.loginCard { margin-top: 40px; }
.loginFoot { text-align: center; margin-top: 14px; }




.noticeBar {
  display: flex; align-items: flex-start; gap: 10px;
  background: #1b1f26; border: 1px solid #2f3846; border-radius: 10px;
  padding: 10px 12px; margin: 10px 0; font-size: 12.5px; line-height: 1.6; color: #c6d2e0;
}
.nbText { flex: 1; min-width: 0; white-space: pre-line; }
.nbClose { flex: 0 0 auto; border: 0; background: transparent; color: #7b8798; font-size: 15px; line-height: 1; padding: 0 2px; }


.homeWho { text-align: center; font-size: 11.5px; color: var(--sub); margin-top: 10px; }
.homeAct { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }


.mBadge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  color: #fff; background: #b33a3a; border-radius: 999px; padding: 3px 8px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.mNew { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: #111; background: var(--amber); border-radius: 4px; padding: 2px 5px; line-height: 1.25; }


.pwPanel { margin-top: 12px; }
.pwWho { font-size: 12px; color: var(--sub); margin-bottom: 9px; }
.doneNote { font-size: 12.5px; color: var(--ok); margin-top: 9px; }
.msgPrev { display: block; white-space: pre-line; font-size: 12px; color: #cfcfcf; background: #141414;
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; margin-top: 8px; }


.codeList { display: block; }
.accRow .nm { font-weight: 700; }
.accRow.acc-off .nm { color: var(--sub); text-decoration: line-through; }
.accRow.acc-nopw .nm { color: var(--amber); }
.accBadge { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 2px 6px; line-height: 1.3; margin-right: 5px; }
.accBadge.bad { color: #fff; background: #b33a3a; }
.accBadge.warn { color: #111; background: var(--amber); }
.acc-dup { opacity: .75; }





.accPw { display: inline-block; max-width: 100%; overflow-wrap: anywhere; text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.3;
  color: var(--ink); background: #141414; border: 1px solid var(--line); border-radius: 5px;
  padding: 2px 7px; margin-right: 5px; cursor: pointer; }
.accPw:active { background: #202020; }

.accPw-none { font-family: inherit; font-weight: 400; letter-spacing: 0; color: var(--sub);
  border-style: dashed; cursor: default; }
.pwEyeBar { margin: -3px 0 11px; }


.foldHead { cursor: pointer; font-size: 14px; font-weight: 700; list-style: none; padding: 2px 0; }
.foldHead::-webkit-details-marker { display: none; }
.foldHead::before { content: '▸ '; color: var(--sub); }
details[open] > .foldHead::before { content: '▾ '; }
.foldBody { margin-top: 11px; }
.auditBar { justify-content: space-between; align-items: center; margin: 4px 0 9px; }
.auditBar .chkRow { margin-top: 0; }


.logRow { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 12px; }
.logRow:first-child { border-top: 0; }
.lt { color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lw { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr { color: var(--sub); white-space: nowrap; }
.la { grid-column: 1 / -1; color: #cfcfcf; }
.ld { grid-column: 1 / -1; color: var(--sub); font-size: 11.5px; }
.logRow.logBad .lr { color: var(--red); font-weight: 700; }
.logRow.logBad .lw { color: var(--red); }



.tableScroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableScroll .sumTable { min-width: 460px; }
.mineMark { color: var(--amber); font-weight: 700; margin-right: 3px; }
.dashDelta { font-size: 11px; margin-left: 5px; font-variant-numeric: tabular-nums; }
.dashDelta.up { color: var(--ok); }
.dashDelta.down { color: var(--red); }
.sumTable td.na { color: var(--sub); }


.msRow { padding: 9px 0; border-top: 1px solid var(--line); }
.msRow:first-child { border-top: 0; }
.msHead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13px; font-variant-numeric: tabular-nums; }
.msHead b { font-weight: 700; }
.msMiss { font-size: 11.5px; color: var(--amber); line-height: 1.6; margin-top: 4px; }
.msMore { border: 0; background: transparent; color: var(--amber); font-size: 11.5px; padding: 2px 0; text-decoration: underline; }


.provTag { font-size: 10.5px; font-weight: 700; color: #111; background: var(--amber); border-radius: 4px; padding: 2px 6px; margin-left: 6px; }
.storeItem .itemTop { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.storeItem .no { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #aaa; background: #262626; border-radius: 6px; padding: 3px 7px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stTag { font-size: 11px; color: var(--sub); }

.flagTag { margin-left: auto; font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 3px 7px; line-height: 1.25; }
.flagTag.late { color: #fff; background: #b33a3a; }
.flagTag.new { color: #111; background: var(--amber); }
.storeItem.late { border-left: 3px solid var(--red); }
.hqBody { font-size: 13.5px; line-height: 1.6; white-space: pre-line; }
.hqThumbs img { width: 64px; height: 64px; }
.lateNote { font-size: 11.5px; color: var(--red); margin-top: 6px; }
.itemSplit { height: 1px; background: var(--line); margin: 12px 0 11px; }
.storeItem .meta-grid { gap: 9px; }
.savedPhoto { margin-bottom: 8px; }
.savedPhoto img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #333; }
.delPhoto { margin-top: 6px; }
.itemFoot { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.itemNote { flex: 1; min-width: 0; font-size: 11.5px; color: var(--sub); line-height: 1.5; }
.itemNote.err { color: var(--red); }
.itemNote.ok { color: var(--ok); }
.saveBtn { flex: 0 0 auto; }
.lateCount { color: var(--red); font-weight: 700; margin-left: 8px; }
.authNote { margin: 0 0 10px; }



.score-chip.s-na { background: #24272c; color: #aeb6c0; }
.cnt.empty { color: #5c5c5c; font-weight: 400; }
.stTag.done { color: var(--ok); }
.stTag.prog { color: var(--amber); }
.stTag.todo { color: var(--red); }

.closeRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }


.auditRow { display: flex; align-items: center; justify-content: space-between; gap: 8px;
            flex-wrap: wrap; margin-top: 10px; padding-top: 9px; border-top: 1px dashed #333; }
.auditRow .auditNote { font-size: 11.5px; color: var(--sub); }
.auditRow .auditBtns { display: flex; gap: 6px; flex-wrap: wrap; }
.miniBtn.ok { color: var(--ok); border-color: var(--ok); }
.miniBtn.warn { color: var(--amber); border-color: var(--amber); }


.dueTag { font-size: 11px; color: var(--sub); background: #262626; border-radius: 6px; padding: 3px 7px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.msHead b.done { color: var(--ok); }




.topbar .back { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px 0 2px; }

.backFloat {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 8px; z-index: 40;
  width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font-size: 19px; line-height: 1;
}
.backFloat:active { background: #222; }






.busyWrap {
  position: fixed; inset: 0; z-index: 2147482000; display: none;
  align-items: center; justify-content: center;
  background: rgba(15, 15, 15, .74); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  padding: 24px;
}
.busyWrap.on { display: flex; }
.busyCard { text-align: center; max-width: 300px; }
.busySpin {
  width: 44px; height: 44px; margin: 0 auto 16px;
  border: 3px solid rgba(240, 239, 237, .16); border-top-color: var(--ink);
  border-radius: 50%; animation: busySpin .8s linear infinite;
}
@keyframes busySpin { to { transform: rotate(360deg); } }

@keyframes busyPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .busySpin { animation: busyPulse 1.2s ease-in-out infinite; border-top-color: rgba(240, 239, 237, .16); }
}
.busyMsg { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }

.busySub { font-size: 12.5px; color: var(--sub); margin-top: 8px; line-height: 1.5; min-height: 19px; word-break: keep-all; }




.sumTable .gradeTag { font-size: 10.5px; color: var(--sub); margin-left: 3px; font-weight: 400; font-variant-numeric: normal; }



body.noAccess .wrap > :not(.authNote), body.noAccess .bottombar { display: none !important; }


body.noAccess .topbar .resetBtn { display: none !important; }