*{box-sizing:border-box}html,body{margin:0}body{background:#f5f7f5;color:#17313a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;font-size:15px;line-height:1.6}button,input,select{font:inherit}button{cursor:pointer}.topbar{background:#102d37;color:#fff}.top-inner{max-width:1170px;margin:auto;padding:15px 24px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:11px}.mark{width:40px;height:40px;display:grid;place-items:center;background:#b6d5c6;color:#153c39;border-radius:13px;font-weight:900;font-size:20px}.brand strong,.brand small{display:block}.brand strong{font-size:15px;line-height:1.3}.brand small{color:#aebfc1;font-size:11px}.privacy{display:flex;align-items:center;gap:7px;color:#d5e2db;font-size:12px}.dot{width:7px;height:7px;background:#8cdfad;border-radius:50%}.shell{max-width:1170px;margin:auto;padding:30px 24px 26px}.hero{background:#e5f0e9;border-radius:20px;padding:30px 36px;display:flex;align-items:end;justify-content:space-between;gap:20px}.eyebrow,.kicker{display:block;font-size:10px;letter-spacing:1.7px;color:#53806d;font-weight:900}.hero h1{font-size:32px;line-height:1.3;letter-spacing:-1.3px;margin:10px 0}.hero p{color:#4e6864;margin:8px 0 0}.hero-note{display:flex;align-items:center;gap:14px;background:#fff9;border:1px solid #fff;border-radius:14px;padding:17px;white-space:nowrap}.hero-note b{font-size:37px;line-height:1;color:#245a48}.hero-note span{font-size:12px;color:#4e6864}.tabs{display:flex;gap:6px;margin:24px 0}.tab{border:1px solid #dce7df;background:transparent;color:#688078;padding:11px 17px;border-radius:11px;font-weight:700}.tab.active{background:#245a48;color:#fff;border-color:#245a48}.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}.panel{background:white;border:1px solid #e2e9e5;border-radius:16px;padding:23px;box-shadow:0 3px 16px rgba(20,46,42,.03)}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px}.panel-heading h2{font-size:19px;margin:4px 0 0;letter-spacing:-.5px}.pill{background:#edf5f0;border-radius:100px;color:#33745e;font-size:11px;font-weight:700;padding:5px 11px}.form-grid{display:grid;gap:13px}.form-grid label,.history-top label{display:grid;gap:5px;font-size:13px;font-weight:750}.form-grid label small{color:#9aa4a0;font-size:11px}.form-grid input,.history-top select{width:100%;border:1px solid #d7e3db;border-radius:10px;padding:10px 11px;background:white;outline-color:#45917a;color:#17313a}.notice{padding:12px 14px;background:#eaf1ef;border-radius:10px;color:#415e59;font-size:12px;margin:16px 0}.warning{background:#fff9eb;color:#756038}.checkline{display:flex;gap:8px;align-items:flex-start;margin:13px 0;font-size:13px;color:#344c4e}.checkline input{margin-top:5px}.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:16px}.btn{border:0;border-radius:10px;padding:10px 14px;font-weight:750;background:#e9f0ed;color:#24473b}.btn.primary{background:#245a48;color:white}.btn.outline{border:1px solid #aacabd;color:#245a48;background:white}.btn.quiet{background:transparent;color:#6a7674}.btn.danger{background:#fff1ef;color:#a43b31}.btn.small{padding:8px 11px;font-size:12px}.btn:disabled{opacity:.45;cursor:not-allowed}.state{min-height:42px;margin-top:16px;font-size:12px;color:#667c76;padding:12px;background:#f4f8f5;border-radius:10px}.state.error{background:#fff0ec;color:#ab3f31}.camera-panel{display:flex;flex-direction:column}.fps{font-size:11px;color:#698077}.camera-frame{background:#152d31;min-height:280px;border-radius:12px;overflow:hidden;position:relative;display:grid;place-items:center;aspect-ratio:16/10}.camera-frame video{width:100%;height:100%;position:absolute;inset:0;object-fit:contain}.camera-frame #camera-placeholder{color:#c4d4d2;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:18px}.cam-icon{font-size:50px;color:#78ad97}.camera-frame #camera-placeholder strong{font-weight:650}.camera-frame #camera-placeholder small{font-size:11px;color:#91a9a6;max-width:260px}.camera-frame #phase-banner{position:absolute;left:14px;bottom:14px;background:#f6faf3eb;border-radius:10px;padding:8px 12px}.camera-frame #phase-banner span{display:block;font-size:19px;color:#174e43;font-weight:850}.camera-frame #phase-banner small{color:#607f74;font-size:11px}.timer{margin:13px 0 0;display:flex;gap:15px;align-items:center}.timer>div:first-child{display:grid}.timer strong{font-size:28px;font-variant-numeric:tabular-nums}.timer small{color:#7d9287;font-size:10px}.track{height:9px;flex:1;background:#e8f0ea;border-radius:50px;overflow:hidden}.track>div{background:#4e9b79;width:0;height:100%;transition:width .15s}.hint{font-size:12px;color:#71837c;margin-top:14px}.result-panel{margin-top:20px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.stat{padding:17px;background:#f4f8f5;border-radius:11px}.stat small,.stat strong,.stat span{display:block}.stat small{color:#5e756c;font-size:12px}.stat strong{font-size:25px;margin:6px 0;color:#275c49;font-variant-numeric:tabular-nums}.stat span{color:#81948a;font-size:10px}.interpretation{border-left:3px solid #82b59a;padding-left:12px;color:#5a756b;font-size:13px}.history-top{display:flex;gap:15px;margin:16px 0}.history-top label{flex:1}.chart-box{background:#fbfdfb;border:1px solid #edf2ee;border-radius:12px;padding:11px;overflow-x:auto;overflow-y:hidden}.chart-box canvas{display:block;width:auto;max-width:none;height:320px}.summaryline{padding:12px 0;color:#657b72;font-size:12px}.table-wrap{width:100%;overflow:auto}table{border-collapse:collapse;width:100%;white-space:nowrap;font-size:12px}th,td{padding:11px;border-bottom:1px solid #edf1ee;text-align:left}th{color:#647d72;background:#f6f9f7}td{color:#334b42}.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.step{background:#f2f8f3;border-radius:11px;padding:15px;display:grid;gap:2px}.step em{color:#8aaa96;font-size:11px;font-style:normal}.step strong{font-size:19px}.step span{font-size:12px;color:#567766}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:20px}.guide-grid article{border:1px solid #e6eee8;border-radius:11px;padding:15px}.guide-grid h3{font-size:14px;margin:0 0 5px}.guide-grid p{font-size:12px;color:#65776e;margin:0}footer{text-align:center;color:#93a19b;font-size:11px;margin-top:26px}@media(max-width:800px){.cols{grid-template-columns:1fr}.hero{display:block;padding:24px}.hero-note{margin-top:18px;display:inline-flex}.stats{grid-template-columns:1fr 1fr}.top-inner{padding:12px 16px}.shell{padding:20px 14px}.panel{padding:17px}.guide-grid{grid-template-columns:1fr}}@media(max-width:470px){.hero h1{font-size:26px}.privacy{font-size:10px}.tabs{gap:2px}.tab{font-size:12px;padding:9px 10px}.stats{grid-template-columns:1fr 1fr}.stat strong{font-size:21px}.step-grid{grid-template-columns:1fr 1fr}.history-top{display:block}.history-top label{margin:12px 0}}
.camera-frame #camera-placeholder[hidden]{display:none} .page[hidden],.result-panel[hidden]{display:none!important}

.analysis-video{position:fixed;bottom:0;right:0;width:1px;height:1px;opacity:.001;pointer-events:none;z-index:-1}


/* v0.2: literature panel and safe reference status */
.evidence-warning{background:#fff8e8;border:1px solid #ecddb8;border-left:4px solid #b58e4f;padding:16px 18px;border-radius:12px;color:#665338;margin:15px 0}
.evidence-warning strong{display:block;font-size:14px}.evidence-warning p{font-size:12px;margin:7px 0 11px;line-height:1.75}
.status-pending{background:#fff1d3;color:#806222}
.research-norm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}
.research-norm-grid article{border:1px solid #e4ebe7;background:#f9fbf9;padding:17px;border-radius:12px}
.research-norm-grid h3{margin:5px 0;font-size:17px}.research-norm-grid p{font-size:12px;color:#586f62;min-height:104px}
.research-norm-grid strong{font-size:12px;color:#975f25}
.section-label{font-size:16px;letter-spacing:-.4px;margin:28px 0 12px}
.explain{font-size:13px;color:#53665e;line-height:1.8}
.references-panel{margin-top:24px;border:1px solid #dce7e0;border-radius:16px;background:#fff;overflow:hidden}
.references-panel summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:18px 22px;font-weight:800;color:#234f42}
.references-panel summary::-webkit-details-marker{display:none}
.references-panel summary small{font-size:11px;color:#698275;font-weight:500;margin-left:9px}
.refs-chevron{font-size:25px;transition:transform .2s}
.references-panel[open] .refs-chevron{transform:rotate(180deg)}
.references-body{border-top:1px solid #edf2ed;padding:17px 22px 22px;font-size:13px;color:#53695d}
.references-body p{margin:0 0 14px}.ref-list{padding-left:21px;margin:0}
.ref-list li{margin-bottom:13px;padding-left:3px}.ref-list a{color:#1a6651;text-decoration:underline;text-underline-offset:3px}
.ref-list span{font-size:11px;color:#6f827a;display:block;padding-top:3px}
.references-body .ref-footnote{font-size:11px;background:#f3f8f5;border-radius:8px;padding:10px;margin-top:12px}
@media(max-width:850px){.research-norm-grid{grid-template-columns:1fr}.research-norm-grid p{min-height:0}}
@media(max-width:470px){.tabs{flex-wrap:wrap}.references-panel summary small{display:block;margin-left:0}}


/* v0.3 longitudinal comparison and baseline visibility */
.history-help{background:#edf6ef;border:1px solid #cfe4d7;color:#355c4b;border-radius:12px;padding:12px 15px;font-size:13px;margin-bottom:13px}
.history-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:17px}
.overview-item{border:1px solid #deebe2;background:#f8fbf9;border-radius:11px;padding:14px;min-width:0}
.overview-item small{display:block;color:#668274;font-size:11px}
.overview-item strong{display:block;color:#205b46;font-size:19px;overflow-wrap:anywhere}
.comparison-panel{border:1px solid #d8e9de;border-radius:13px;background:#fcfefd;padding:19px;margin:19px 0}
.comparison-panel .panel-heading{margin-bottom:5px}
.comparison-panel h2{font-size:18px}
.compare-table{margin:12px 0 16px;min-width:680px}
.compare-table tr td:not(:first-child){font-variant-numeric:tabular-nums}
.compare-table td:first-child{font-weight:700}
.standard-status{background:#fff8e8;color:#765f35;border-left:3px solid #bc9454;padding:12px 14px;font-size:12px;border-radius:8px;margin:14px 0}
.inline-baseline{margin:17px 0 0;background:#edf6ef;color:#345c48;border-radius:10px;padding:13px;font-size:13px}
.baseline-row{background:#f2faf5}
@media(max-width:850px){.history-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:470px){.overview-item strong{font-size:16px}.comparison-panel{padding:11px}}

/* v0.4: 변화 방향은 탐색적 참고이며 임상적 유의성 검증 전입니다. */
.trend{display:inline-block;font-size:11px;font-weight:750;border-radius:6px;padding:2px 6px;margin-left:4px;white-space:nowrap}
.trend-up{background:#e5f1ff;color:#155aa0}
.trend-down{background:#ffebed;color:#ab243e}
.trend-neutral{background:#edf2f0;color:#63796d}
.record-trend{font-size:10px;margin-top:3px}
.record-trend .trend{margin:0}
.compare-table{min-width:950px}
.compare-table th,.compare-table td{vertical-align:middle}
.overview-item strong{overflow-wrap:anywhere;line-height:1.4}
.chart-box{overscroll-behavior-x:contain}
@media(max-width:700px){.trend{font-size:10px;padding:2px 4px}.chart-box{padding:8px}.compare-table{min-width:910px}}


/* v0.5: 영상 원본 비율에 맞춘 얼굴 위치 / 크기 안내선 */
.face-guide-region{position:absolute;pointer-events:none;z-index:2}
.face-guide-region[hidden],.face-detected-box[hidden]{display:none!important}
.face-guide-oval{position:absolute;left:50%;top:50%;width:20%;height:49%;transform:translate(-50%,-50%);border:2px dashed #c4f4d2;border-radius:48% 48% 47% 47%;box-shadow:0 0 0 2px rgba(0,0,0,.12),inset 0 0 20px rgba(20,80,70,.05)}
.face-guide-oval:after{content:"+";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#daffe4;font-size:17px;font-weight:600;opacity:.6}
.face-detected-box{position:absolute;border:2px solid #5ce3a3;border-radius:38%;box-shadow:0 0 0 2px #152d3166}
.face-guide-label{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:#163f37b8;color:#e3ffed;font-size:11px;border-radius:20px;padding:2px 11px;white-space:nowrap}
.camera-frame #phase-banner{z-index:3}
.alignment-readout{display:flex;gap:10px;align-items:flex-start;margin-top:13px;padding:11px 13px;background:#f5f7f8;border:1px solid #e1e8e6;border-radius:10px}
.alignment-dot{width:11px;height:11px;margin-top:6px;border-radius:50%;background:#84929a;flex-shrink:0}
.alignment-readout strong{display:block;font-size:13px;font-weight:750;color:#435c5c}
.alignment-readout small{display:block;font-size:11px;color:#647a78;margin-top:3px}
.alignment-readout[data-kind="ok"]{background:#ecf7ee;border-color:#b9dec3}
.alignment-readout[data-kind="ok"] .alignment-dot{background:#2b9e62}
.alignment-readout[data-kind="ok"] strong{color:#1a7944}
.alignment-readout:not([data-kind="ok"]):not([data-kind="waiting"]){background:#fff7ed;border-color:#f1dab7}
.alignment-readout:not([data-kind="ok"]):not([data-kind="waiting"]) .alignment-dot{background:#da9240}
.storage-status{padding:10px 12px;font-size:12px;border-radius:9px;margin-top:12px;background:#eff6f2;color:#2e6850;border:1px solid #d1e4d7}
.storage-status[data-kind="error"]{background:#fff1ed;color:#9c342d;border-color:#f0c9c3}
.result-panel .storage-status{margin:15px 0 0}


/* v0.6: 5개 변화 지표를 모두 세로로 표시 */
.history-all-caption{display:flex;flex-direction:column;justify-content:center;gap:3px;color:#205b46;background:#eef7f1;border:1px solid #d6e9dc;border-radius:10px;padding:10px 14px;font-size:13px}
.history-all-caption small{color:#567567;font-size:11px}
.history-charts{display:flex;flex-direction:column;gap:18px;margin:12px 0 20px}
.history-chart-item{border:1px solid #dce8e0;border-radius:13px;background:#fff;padding:17px;min-width:0}
.history-chart-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.history-chart-header h3{font-size:16px;line-height:1.5;margin:0;color:#1c4b3b}
.history-chart-subtitle{font-size:12px;color:#657d71;margin:3px 0 0}
.history-chart-trend{font-size:12px;margin:0 0 12px;font-weight:650}
.history-chart-item .chart-box{margin:0}
.history-chart-item canvas{display:block}
.history-chart-item.quality-chart{background:#fbfcfd;border-color:#dbe2e9}
.history-chart-item .chart-title-number{background:#e6f3e9;color:#23714d;border-radius:100px;font-size:11px;font-weight:750;padding:4px 10px}
.chart-trend-up{color:#155aa0}.chart-trend-down{color:#ab243e}.chart-trend-neutral{color:#60776b}
.chart-trend-quality{color:#425c7a}
.face-guide-oval{width:24%;height:auto;aspect-ratio:0.77;max-height:72%}
@media(max-width:700px){.history-chart-item{padding:12px}.history-chart-header h3{font-size:14px}}

/* v0.7: 검사 지시문 색상 분리. 무표정=파랑, 미소=주황 (명도 대비 보강) */
.camera-frame #phase-banner{
  left:50%;right:auto;bottom:13px;top:auto;
  transform:translateX(-50%);
  width:min(calc(100% - 24px),560px);
  box-sizing:border-box;
  padding:12px 18px 11px;
  border:3px solid rgba(255,255,255,.96);
  border-radius:16px;
  background:#0758b2;
  color:#fff;
  box-shadow:0 5px 24px rgba(0,0,0,.60);
  text-align:center;
  pointer-events:none;
}
.camera-frame #phase-banner[data-phase="neutral"]{background:#0758b2}
.camera-frame #phase-banner[data-phase="smile"]{background:#c64d00}
.camera-frame #phase-banner span{
  color:#fff;
  font-size:clamp(23px,3.8vw,32px);
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.18)
}
.camera-frame #phase-banner small{
  display:block;
  color:#fff;
  font-size:14px;
  line-height:1.35;
  font-weight:750;
  margin-top:4px;
}
#timer-val[data-phase="neutral"]{color:#0758b2}
#timer-val[data-phase="smile"]{color:#c64d00}
#timer-fill[data-phase="neutral"]{background:#2378db}
#timer-fill[data-phase="smile"]{background:#f17c26}
@media(max-width:530px){
  .camera-frame #phase-banner{bottom:10px;padding:9px 10px;border-width:2px;border-radius:12px}
  .camera-frame #phase-banner span{font-size:clamp(20px,6vw,26px)}
  .camera-frame #phase-banner small{font-size:12px}
}


/* v0.8: 노트북 기준 중앙 세로 배치 — 준비 -> 영상 -> 시작/중단 */
#page-test > .cols {
  grid-template-columns: minmax(0, 1fr);
  max-width: 800px;
  margin-inline: auto;
  gap: 12px;
  align-items: start;
}
#page-test > .cols > .panel { width: 100%; min-width: 0; }
#page-test .test-prep-panel { padding: 16px 20px; }
#page-test .test-prep-panel .panel-heading { margin-bottom: 10px; }
#page-test .test-prep-panel .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#page-test .test-prep-panel .notice { margin: 11px 0; padding: 8px 11px; }
#page-test .test-prep-panel .checkline { margin: 9px 0; }
#page-test .prep-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 10px; }
#page-test .prep-tools .storage-status { margin: 0; flex: 1 1 230px; min-width: 0; }
#page-test .camera-panel { padding: 15px 20px 17px; }
#page-test .camera-panel .panel-heading { margin-bottom: 10px; }
#page-test .camera-frame { aspect-ratio: 16 / 9; min-height: 260px; max-width: 700px; margin-inline: auto; }
#page-test > .exam-controls {
  max-width: 800px;
  margin: 12px auto 0;
  background: #fff;
  border: 1px solid #dbe8e1;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 3px 16px rgba(20,46,42,.03);
}
#page-test .exam-controls-actions { display:flex; gap: 12px; align-items:center; }
#page-test .exam-controls-actions #btn-record { flex: 1 1 70%; min-height: 47px; font-size: 16px; }
#page-test .exam-controls-actions #btn-stop {
  flex: 0 0 110px; min-height: 47px;
  border: 1px solid #d6e0db; color:#3f5550; background: #f6f8f7;
}
#page-test .exam-controls .state { margin-top: 10px; min-height: 0; }
#page-test .result-panel { max-width: 100%; }

/* 검사 동작은 그대로, 지시 배너의 너비·높이·글자를 기존 v0.7의 약 절반으로 축소 */
#page-test .camera-frame #phase-banner {
  width: min(calc(100% - 18px), 280px);
  max-width: 280px;
  bottom: 10px;
  padding: 6px 10px 5px;
  border-width: 2px;
  border-radius: 9px;
  box-shadow: 0 3px 11px rgba(0,0,0,.40);
}
#page-test .camera-frame #phase-banner span {
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: 0;
}
#page-test .camera-frame #phase-banner small {
  font-size: 10px;
  line-height: 1.25;
  margin-top: 2px;
}
@media (max-width: 630px) {
  #page-test .test-prep-panel .form-grid { grid-template-columns: 1fr; }
  #page-test .test-prep-panel, #page-test .camera-panel { padding: 13px; }
  #page-test .camera-frame { min-height: 190px; }
  #page-test .exam-controls-actions #btn-stop { flex-basis: 85px; }
  #page-test .exam-controls-actions #btn-record { font-size: 14px; }
  #page-test .camera-frame #phase-banner { bottom: 8px; padding: 5px 8px; border-width: 2px; border-radius: 8px; }
  #page-test .camera-frame #phase-banner span { font-size: 16px; }
  #page-test .camera-frame #phase-banner small { font-size: 9px; }
}


/* v0.9 — video-first compact controls for small laptop screens.
   Record/stop buttons belong to the camera panel directly below the video. */
#page-test > .cols { max-width: 860px; }
#page-test .camera-panel { padding: 13px 17px 16px; }
#page-test .camera-panel .panel-heading { margin-bottom: 7px; }
#page-test .camera-frame {
  max-width: 780px;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
}
#page-test .camera-panel .exam-controls {
  width: 100%;
  max-width: 780px;
  margin: 5px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
#page-test .camera-panel .exam-controls-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
#page-test .camera-panel .exam-controls-actions #btn-record {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 15px;
}
#page-test .camera-panel .exam-controls-actions #btn-stop {
  flex: 0 0 96px;
  min-height: 44px;
  padding: 8px 11px;
}
#page-test .camera-panel .exam-controls .state {
  margin: 5px 0 0;
  padding: 7px 10px;
  min-height: 0;
  line-height: 1.4;
}
#page-test .camera-panel .timer { max-width: 780px; width: 100%; margin: 7px auto 0; }
#page-test .camera-panel .timer strong { font-size: 23px; }
#page-test .camera-frame #phase-banner {
  width: min(calc(100% - 14px), 210px);
  max-width: 210px;
  bottom: 7px;
  padding: 4px 7px;
  border-width: 2px;
  border-radius: 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,.32);
}
#page-test .camera-frame #phase-banner span { font-size: 15px; line-height: 1.15; }
#page-test .camera-frame #phase-banner small { font-size: 9px; line-height: 1.2; margin-top: 1px; }
@media (max-width: 630px) {
  #page-test .camera-panel { padding: 11px; }
  #page-test .camera-frame { min-height: 0; }
  #page-test .camera-panel .exam-controls-actions #btn-record { font-size: 14px; }
  #page-test .camera-panel .exam-controls-actions #btn-stop { flex-basis: 76px; }
  #page-test .camera-frame #phase-banner { bottom: 6px; padding: 3px 6px; }
  #page-test .camera-frame #phase-banner span { font-size: 14px; }
  #page-test .camera-frame #phase-banner small { font-size: 8px; }
}