@charset "utf-8";

.red {color:red;}
.blue {color: blue;}
.green {color:#008149;}
h2 {margin:3% 1%; font-size:25px;}
h2 p {font-size:40px;}
h2 em {font-style:normal; font-weight:normal}
.subtxt {margin:0 2% 3%; color:#505050; font-size:19px;}
.subtxt2 {margin:0 2% 3%; color:#505050; font-size:19px; text-align:center;}
.date {margin:0 1% 3%; border-bottom:1px solid #ddd; padding-bottom:10px;}
.date:after {content:''; display:block; clear:both;}
.date em {display:block; float:left; font-style:normal; font-size:13px; color:#999; margin-top:10px;}
.date .abc {float:right; display:block; width:69px;}

.cont {display: block; margin:1em 2.5% 1.5em; text-align: justify; word-break: break-all; font-size:18px; color:black; line-height:1.6;}
.mgt {position:relative; z-index:-1; margin-top:-100px;}
.ac {text-align:center;}

.form-preset {padding:0;}
.form-preset table {background:#000000; border:10px solid #000000; color:#f0e6cc}
.form-preset.white table {background:#fff; border:10px solid #fff;}
.form-preset.pink {border:20px solid #eb1078}
.form-preset.pink table {background:#fff; border:10px solid #fff;}
.form-preset.pink .btnac {background:#eb1078; margin-top:20px;}
.form-preset table>tbody>tr>th {text-align:center;}
.form-preset table>tbody>tr>td {padding:5px 10px;}
.form-preset table>tbody>tr>td label {color:#666; font-size:15px;}
.form-preset input[type=radio], .form-preset input[type=checkbox] {vertical-align:middle;}
.btnac {text-align:center;}
.btnac a {display:inline-block; margin:25px 0; width:70%;}
.rdo label {display:inline-block; font-size:12px; margin:0 5px 3px 0;}

.form-presetM table>tbody>tr>th {text-align:left;}
.form-presetM .form-control {height:50px;}

.formArea {border:20px solid #206cb6; border-top:0; text-align:center;}
.formArea:after {content:''; display:block; clear:both;}
.formArea ul {padding-top:30px; text-align:left;}
.formArea ul li {margin-bottom:5px;}
.formArea ul li b {display:inline-block; width:20%; text-align:center;}
.formArea .btna {display:inline-block; width:35%; margin:20px 0;}
.formArea .form-control {padding:6px;}

.form2 {background:#fafafa; padding:20px 0; text-align:center;}
.form2>p {margin-bottom:10px; font-size:19px;}
.form2 .form-control {width:20%;}

#view-app {padding-bottom:155px;}
#footLayer {position:fixed; bottom:0; left:50%; width:680px; margin-left:-340px;}
#footLayer .formCont {position:absolute; bottom:20px; right:10px; text-align:right;}
#footLayer .formCont p {display:inline-block;}
#footLayer .formCont input[type=text] {display:inline-block; padding:3px; border:0; width:100%; height:27px; border-radius:5px; vertical-align:middle;}
#footLayer .formCont .w2 input[type=text] {width:30%;}
#footLayer .formCont .w2 select {display:inline-block; width:28%; padding:5px; border:0; height:27px;vertical-align:middle;}
#footLayer .formCont .w1 {width:14%;}
#footLayer .formCont .w2 {width:44%; text-align:left;}
#footLayer .w3 {display:block; width:22%; position:absolute; top:55px; right:17px;}

.arLayer {position:fixed; top:50px; right:10px; z-index:10;}

.contLayer {position:relative;}
.contLayer .layerTxt {position:absolute; top:69%; left:2%; width:96%; text-align:center;}
.contLayer .layerTxt .btnL {display:inline-block; width:40%;}
.contLayer .layerTxt .contL {display:none; text-align:left; position:absolute; top:90px; right:0px; padding:20px 160px 20px 20px; background:#fff url(../img/layer_bg.png) right bottom no-repeat;}
.contLayer .layerTxt .contL em {display:inline-block; font-style:normal; background:#fffd7f;}

/** 실시간 **/

  .board {
    width: 100%;
    max-width: 680px;
    background: #161210;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 26px 24px 22px;
  }

  /* ---------- HEADER ---------- */
  .header-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(216, 168, 75, 0.12);
    border: 1px solid rgba(216, 168, 75, 0.35);
    border-radius: 20px;
    padding: 4px 10px 4px 8px;
    flex-shrink: 0;
  }

  .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff5b3d;
    box-shadow: 0 0 6px rgba(255, 91, 61, 0.8);
    animation: pulse 1.4s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  .live-text {
    font-size: 11px;
    font-weight: 700;
    color: #d8a84b;
    letter-spacing: 0.3px;
  }

  .board-title {
    font-size: 20px;
    font-weight: 700;
    color: #f5f3f0;
    letter-spacing: -0.3px;
  }

  .board-subtitle {
    font-size: 14px;
    line-height: 1.6;
    color: #8c8884;
    margin-bottom: 18px;
  }

  .board-subtitle strong {
    color: #d8a84b;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(216, 168, 75, 0.6);
    text-underline-offset: 3px;
  }

  /* ---------- TABLE HEAD ---------- */
  .table-head {
    display: flex;
    align-items: center;
    padding: 0 4px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .table-head span {
    font-size: 13px;
    color: #6e6b67;
    font-weight: 500;
  }

  .table-head span:nth-child(1) { flex: 1; text-align: left; }
  .table-head span:nth-child(2) { width: 64px; text-align: center; }
  .table-head span:nth-child(3) { flex: 1; text-align: right; }

  /* ---------- SLIDE VIEWPORT ---------- */
  .slide-viewport {
    height: 162px; /* 3 rows x 54px */
    overflow: hidden;
    position: relative;
  }

  .slide-track {
    will-change: transform;
  }

  .slide-row {
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }

  .row-name { flex: 1; text-align: left; }

  .name-text {
    font-size: 14px;
    color: #e3e0dc;
    font-weight: 500;
  }

  .age-badge {
    width: 64px;
    text-align: center;
    display: inline-block;
    font-size: 13px;
    color: #b8b4ae;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 4px 0;
  }

  .phone-text {
    flex: 1;
    text-align: right;
    font-size: 13px;
    color: #6e6b67;
    font-family: 'SF Mono', 'Menlo', monospace;
  }

  /* ---------- FOOTER ---------- */
  .board-footer {
    text-align: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .footer-count {
    font-size: 14px;
    font-weight: 700;
    color: #d8a84b;
  }

  .only-mobile { display: none; }
  @media (max-width: 420px) {
    .only-mobile { display: inline; }
  }


@media screen and (max-width:414px) {
h2 {margin:3% 5%; font-size:20px;}
h2 p {font-size:28px;}
.subtxt {margin:0 3% 3%;}
.cont {font-size:18px;}
#view-app {padding-bottom:82px;}
#footLayer {left:0; width:100%; margin-left:0;}
#footLayer .formCont {bottom:8px;}
#footLayer .w3 {width:20%; top:30px;}
#footLayer .w2 {width:46%; text-align:right;}
#footLayer .w2 select {font-size:10px;}

.contLayer .layerTxt .contL {top:49px; padding:20px; background-size:150px;}
.contLayer .layerTxt .contL .mpd {display:block; padding-right:80px;}

.form-preset table>tbody>tr>td label {min-width:11%; font-size:13px;}
}

#view-app {padding-bottom: 0 !important;}
#footLayer {display: none;}