/* ============================================================
   Lotto 6/45 생성기 (화이트 테마 / 그누보드 본문 삽입용)
   - html, body 전역 스타일 제거
   - .lotto-wrap 범위 내에서만 스타일 적용
============================================================ */

.lotto-wrap{
  background: #ffffff;
  padding: 20px 0 40px;
}

.lotto-wrap *{
  box-sizing: border-box;
}

.lotto-wrap .lotto-app{
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  color: #1f2937;
  font-family: "Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  line-height: 1.45;
}

.lotto-wrap .hero{
  text-align: center;
  padding: 10px 8px 18px;
}
.lotto-wrap .hero-badge{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f3f6ff;
  border: 1px solid #e5ebff;
  color: #4f46e5;
  font-size: 13px;
  margin-bottom: 10px;
  font-weight: 700;
}
.lotto-wrap .hero h1{
  margin: 0;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: -0.5px;
  color: #111827;
}
.lotto-wrap .hero-desc{
  margin: 10px auto 0;
  color: #6b7280;
  max-width: 760px;
}

.lotto-wrap .card{
  background: #ffffff;
  border: 1px solid #e8ecf4;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.lotto-wrap .panel{
  padding: 20px;
}
.lotto-wrap .panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.lotto-wrap .panel-header h2{
  margin: 0;
  font-size: 21px;
  color: #111827;
}
.lotto-wrap .header-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lotto-wrap .share-message{
  display: none;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 14px;
}
.lotto-wrap .share-message.show{ display: block; }

.lotto-wrap .grid-2,
.lotto-wrap .grid-3{
  display: grid;
  gap: 14px;
}
.lotto-wrap .grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.lotto-wrap .grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

.lotto-wrap .field{ margin-bottom: 12px; }
.lotto-wrap .field label{
  display: block;
  margin: 0 0 7px;
  font-weight: 700;
  font-size: 14px;
  color: #111827;
}
.lotto-wrap .hint{
  margin: 6px 2px 0;
  color: #6b7280;
  font-size: 12px;
}

.lotto-wrap .input-wrap{
  position: relative;
}
.lotto-wrap .input-wrap.icon-left .icon{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: .9;
}
.lotto-wrap .input-wrap.icon-left input{
  padding-left: 36px;
}

.lotto-wrap input[type="text"],
.lotto-wrap input[type="number"],
.lotto-wrap textarea{
  width: 100%;
  border: 1px solid #d7deea;
  background: #ffffff;
  color: #111827;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 15px;
  outline: none;
  transition: .15s ease;
}
.lotto-wrap textarea{
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}
.lotto-wrap input:focus,
.lotto-wrap textarea:focus{
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}

.lotto-wrap .option-area{ margin-top: 6px; }
.lotto-wrap .option-area h3{
  margin: 12px 0 10px;
  font-size: 16px;
  color: #111827;
}
.lotto-wrap .option-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.lotto-wrap .opt-card{
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-areas:
    "check icon"
    "check title"
    "check desc";
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e5eaf3;
  border-radius: 14px;
  background: #fbfcff;
  cursor: pointer;
  transition: .16s ease;
  min-height: 94px;
}
.lotto-wrap .opt-card:hover{
  transform: translateY(-1px);
  border-color: #d7deea;
  background: #f8fbff;
}
.lotto-wrap .opt-card input{
  grid-area: check;
  width: 18px;
  height: 18px;
  accent-color: #ef4444;
}
.lotto-wrap .opt-icon{ grid-area: icon; font-size: 18px; }
.lotto-wrap .opt-title{
  grid-area: title;
  font-weight: 700;
  font-size: 14px;
  color: #111827;
}
.lotto-wrap .opt-desc{
  grid-area: desc;
  color: #6b7280;
  font-size: 12px;
}

.lotto-wrap .cta-row{
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lotto-wrap .btn{
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: .15s ease;
}
.lotto-wrap .btn:hover{ transform: translateY(-1px); }
.lotto-wrap .btn:active{ transform: translateY(0); }

.lotto-wrap .btn-primary{
  background: linear-gradient(180deg, #ff5f7a, #ef4444);
  color: #fff;
  box-shadow: 0 8px 18px rgba(239, 68, 68, .18);
}
.lotto-wrap .btn-secondary{
  background: #eef2ff;
  color: #1e3a8a;
  border-color: #c7d2fe;
}
.lotto-wrap .btn-ghost{
  background: #f8fafc;
  color: #334155;
  border-color: #e2e8f0;
  font-weight: 700;
  padding: 10px 12px;
}

.lotto-wrap .result-wrap{
  margin-top: 16px;
  padding: 20px;
}
.lotto-wrap .result-meta{
  color: #6b7280;
  font-size: 13px;
  text-align: right;
}
.lotto-wrap .validation-message{
  display: none;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
}
.lotto-wrap .validation-message.show{ display: block; }

/* 결과 요약 영역 */
.lotto-wrap .result-summary{
  margin-bottom: 12px;
}
.lotto-wrap .summary-box{
  border: 1px solid #e5eaf3;
  border-radius: 14px;
  background: #fbfcff;
  padding: 14px;
}
.lotto-wrap .summary-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.lotto-wrap .summary-title{
  font-size: 14px;
  font-weight: 800;
  color: #111827;
}
.lotto-wrap .summary-sub{
  font-size: 12px;
  color: #6b7280;
}
.lotto-wrap .summary-list{
  display: grid;
  gap: 8px;
}
.lotto-wrap .summary-item{
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px 10px;
}
.lotto-wrap .summary-label{
  font-weight: 800;
  font-size: 13px;
  color: #1e3a8a;
}
.lotto-wrap .summary-numbers{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #111827;
  font-size: 14px;
  word-break: break-word;
}
.lotto-wrap .summary-highlight{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
}
.lotto-wrap .summary-highlight strong{
  color: #b45309;
}

.lotto-wrap .results-list{
  display: grid;
  gap: 12px;
}
.lotto-wrap .empty-state{
  border: 1px dashed #d7deea;
  border-radius: 14px;
  padding: 22px 16px;
  text-align: center;
  color: #6b7280;
  background: #fbfcff;
}
.lotto-wrap .empty-icon{
  font-size: 24px;
  margin-bottom: 6px;
}
.lotto-wrap .empty-state p{ margin: 6px 0; }
.lotto-wrap .empty-state .sub{ font-size: 13px; }

.lotto-wrap .result-card{
  border: 1px solid #e5eaf3;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
}
.lotto-wrap .result-top{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.lotto-wrap .result-title{
  font-weight: 800;
  font-size: 15px;
  color: #111827;
}
.lotto-wrap .result-score{
  font-size: 12px;
  color: #0f4c81;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 999px;
  padding: 4px 10px;
}

.lotto-wrap .ball-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.lotto-wrap .ball{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  color: #111111;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.08);
}
.lotto-wrap .ball.c1{ background: #f6c600; }
.lotto-wrap .ball.c2{ background: #60b8e7; }
.lotto-wrap .ball.c3{ background: #ef6b73; }
.lotto-wrap .ball.c4{ background: #b9bcc5; }
.lotto-wrap .ball.c5{ background: #a8d442; }

.lotto-wrap .badges{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.lotto-wrap .tag{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}
.lotto-wrap .tag-ok{
  color: #166534;
  background: #ecfdf5;
  border-color: #bbf7d0;
}
.lotto-wrap .tag-info{
  color: #0c4a6e;
  background: #ecfeff;
  border-color: #bae6fd;
}
.lotto-wrap .tag-warn{
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}
.lotto-wrap .tag-hot{
  color: #9f1239;
  background: #fff1f2;
  border-color: #fecdd3;
}
.lotto-wrap .tag-gray{
  color: #374151;
  background: #f3f4f6;
  border-color: #e5e7eb;
}

.lotto-wrap .reason-box{
  border-radius: 10px;
  background: #f8fbff;
  border: 1px solid #e5eaf3;
  padding: 10px;
}
.lotto-wrap .reason-title{
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
}
.lotto-wrap .reason-list{
  margin: 0;
  padding-left: 18px;
}
.lotto-wrap .reason-list li{
  margin: 4px 0;
  color: #1f2937;
  font-size: 13px;
}

.lotto-wrap .guide-box{
  margin-top: 16px;
  border-radius: 14px;
  border: 1px solid #e5eaf3;
  background: #fcfdff;
  padding: 16px;
}
.lotto-wrap .guide-box h3{
  margin: 0 0 12px;
  font-size: 18px;
  color: #111827;
}
.lotto-wrap .guide-section{
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
  margin-bottom: 10px;
}
.lotto-wrap .guide-section:last-child{
  margin-bottom: 0;
}
.lotto-wrap .guide-section .guide-head{
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 8px;
}
.lotto-wrap .guide-section ul{
  margin: 0;
  padding-left: 18px;
}
.lotto-wrap .guide-section li{
  margin: 7px 0;
  color: #334155;
  line-height: 1.6;
}
.lotto-wrap .guide-caution{
  border-color: #fde2e2;
  background: #fffafa;
}

.lotto-wrap .accent-red{
  color: #dc2626;
  font-weight: 800;
}
.lotto-wrap .accent-blue{
  color: #2563eb;
  font-weight: 800;
}
.lotto-wrap .hl{
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 700;
}
.lotto-wrap .hl-blue{
  background: #dbeafe;
  color: #1d4ed8;
}
.lotto-wrap .hl-green{
  background: #dcfce7;
  color: #15803d;
}
.lotto-wrap .hl-orange{
  background: #ffedd5;
  color: #c2410c;
}

@media (max-width: 980px){
  .lotto-wrap .option-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  .lotto-wrap .lotto-app{ width: calc(100% - 12px); }
  .lotto-wrap .panel, .lotto-wrap .result-wrap{ padding: 14px; }
  .lotto-wrap .grid-2, .lotto-wrap .grid-3, .lotto-wrap .option-grid{ grid-template-columns: 1fr; }
  .lotto-wrap .panel-header{ align-items: flex-start; flex-direction: column; }
  .lotto-wrap .result-meta{ text-align: left; }
  .lotto-wrap .btn{ width: 100%; }
  .lotto-wrap .ball{ width: 38px; height: 38px; font-size: 15px; }
  .lotto-wrap .summary-item{ grid-template-columns: 1fr; gap: 4px; }
}

.lotto-wrap .cta-share-message{
  margin-top: 10px;   /* 버튼과 메시지 박스 사이 여백 */
  margin-bottom: 0;
}