/* style.css */


    :root{
      --accent:#1a73e8;
      --text:#202124;
      --muted:#5f6368;
      --error:#ef4444;
      --ok:#10b981;
      --radius:14px;
      --shadow:0 10px 30px rgba(0,0,0,.08);
      /* Animation easings */
      --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
      --ease-spring:cubic-bezier(0.175,0.885,0.32,1.275);
      --ease-smooth:cubic-bezier(0.4,0,0.2,1);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:"Roboto","Noto Sans KR",system-ui,-apple-system,Segoe UI,Roboto, "Malgun Gothic",sans-serif;
      color:var(--text); background:#f5f5f5; display:grid; place-items:center; padding:24px; font-size: 14px; justify-content: center; 
    }
    h1{font-size:1.2rem; margin:0 0 6px}
    h3{display: inline-block; font-size:1.0rem; margin:0px}
    p { margin:0px;}
    ul {list-style: none; padding: 0px; }

    .container{width:100%; max-width: 1000px;}
    .card{
      background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius);
      box-shadow:var(--shadow); padding:28px;
    }
    .brand{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
    .brand .logo{width:40px; height:40px; border-radius:12px; background: conic-gradient(from 20deg,#6366f1,#8b5cf6);}

    .sub{color:#6b7280; font-size:0.8rem; margin-bottom:15px}

    .summary { margin-bottom:15px; }
    form{display:grid; gap:14px}
    .field{display:grid; gap:6px}
    .label{font-size:14px; color:#374151}
    .control{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #d1d5db; border-radius:12px; padding:12px 14px; transition:.15s border-color,.15s box-shadow}
    .control:focus-within{border-color:var(--accent); box-shadow:0 0 0 6px rgba(26,115,232,.15)}
    .control input{width:100%; background:transparent; border:0; outline:0; color:var(--text); font-size:16px}
    .hint{font-size:12px; color:#6b7280; margin-top:2px}
    .error{color:var(--error)} .ok{color:var(--ok)}
    .btn{
      width:100%; display:inline-flex; justify-content:center; align-items:center; gap:8px;
      border:0; outline:0; cursor:pointer; background:var(--accent); color:#fff; font-size:1.0rem;
      padding:14px 16px; border-radius:var(--radius); transition:background .2s, transform .06s;
    }
    .btn:hover:not(:disabled){ background:#1765cc }
    .btn:disabled{opacity:.6; cursor:not-allowed}
    .footer{margin-top:18px; font-size:11px; color:#6b7280; text-align:center}
    .badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#374151; background:#f3f4f6; border:1px solid #e5e7eb; padding:6px 10px; border-radius:999px}

    /* ===== Modal (인증코드 입력) ===== */
    .modal-backdrop{
      position:fixed; inset:0; background:rgba(0,0,0,.45);
      display:none; align-items:center; justify-content:center; z-index:1000; width: 100%; height: 100%;
    }
    .modal{
      width:420px; background:#fff; border-radius:16px;
      box-shadow:0 20px 60px rgba(0,0,0,.25); border:1px solid #e5e7eb;
      padding:22px 22px 18px;
    }
    .modal h2{margin:0 0 6px; font-size:20px}
    .modal .sub{margin:0 0 12px; font-size:13px; color:#6b7280}
    .modal .code-wrap{display:flex; gap:8px}
    .modal input[type="text"]{
      width:100%; padding:12px; border:1px solid #dadce0; border-radius:10px; font-size:20px; letter-spacing:4px; text-align:center;
    }
    .modal input[type="text"]:focus{outline:none; border-color:var(--accent); box-shadow:0 1px 2px rgba(26,115,232,.2)}
    .modal .hint{margin-top:8px}
    .modal .actions{display:flex; gap:8px; margin-top:14px}
    .modal .btn-secondary{background:#eef2f7; color:#1f2937}
    .modal .link{font-size:12px; color:#1a73e8; text-decoration:none; margin-top:8px; display:inline-block}
    .hidden{display:none !important;}

/* ===== 세션 타임아웃 모달 ===== */
.session-timeout-modal .modal{
  text-align: center;
  max-width: 360px;
}

.session-timeout-icon{
  font-size: 48px;
  margin-bottom: 12px;
}

.session-timeout-countdown{
  font-size: 48px;
  font-weight: 700;
  color: var(--error);
  margin: 20px 0;
  animation: pulse-countdown 1s ease-in-out infinite;
}

@keyframes pulse-countdown{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.1); }
}

.session-timeout-modal .actions{
  justify-content: center;
}

.session-timeout-modal .btn{
  padding: 14px 32px;
  font-size: 16px;
}

.session-timeout-notice{
  margin-top: 16px;
  font-size: 12px;
  color: #9ca3af;
}


/* ===== Utilities ===== */
.mb-8{ margin-bottom:8px }
.mt-6{ margin-top:6px }
.mt-10{ margin-top:10px }
.mt-12{ margin-top:12px }

.muted{ color: var(--muted); font-size: 0.8rem }

/* 버튼 세컨더리 (모달 밖에서도 사용 가능하게) */
.btn.secondary{
  background:#eef2f7;
  color:#1f2937;
  border:1px solid #e5e7eb;
}
.btn.secondary:hover{ background:#e7ecf5 }

/* 리스트(정의목록) 스타일 */
.list{
  margin: 16px 0 18px;
  padding: 0;
}
.list > dt{
  font-weight:700;
  color:#111827;
  font-size:0.96rem;
  margin:14px 0 8px;
}
.list > dd{
  margin: 0;
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid #f1f5f9;
}
.list > dd:last-of-type{ border-bottom:0 }
.list .key{
  flex:0 0 90px;
  color:#6b7280;
  font-size:0.92rem;
}
.list .val{
  flex:1 1 auto;
  color:#111827;
  word-break:break-word;
}

/* 상태 표시 색 */
.status-ok{
  color: var(--ok);
  font-weight: 600;
}

/* 섹션 제목 일관화 */
.section-title{
  font-size:1.0rem;
  margin: 8px 0 4px;
}

/* 링크 박스 */
.codebox{
  display:flex;
  align-items:center;
  gap:10px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
}
.codebox .codebox-text{
  flex:1 1 auto;
  overflow:auto;
  white-space:nowrap;
}

/* 공유/뒤로가기 영역 */
.share{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.row{
  display:flex;
  gap:8px;
  align-items:center;
}
.row.right{ justify-content:flex-end }

.btns button {
  grid-gap: 7px; font-size: 0.8rem;
}
/* 반응형(작은 화면에서 key 폭 줄이기) */
@media (max-width: 380px){
  .list .key{ flex-basis: 72px }
}


/* ===== Host 새로운 이벤트 생성 ===== */
/* ===== Host (주최자) 페이지 스타일 ===== */

/* 컨테이너 확장 (host 전용) */
.container.login{ width: 95vw; max-width: 520px; }

/* 레이블 */
.label{ font-size: 13px; color: #374151; }

/* 그리드 row2 */
.grid{ display: grid; gap: 7px;}

div.hr { display:flex; width:100%; margin:20px 0px; border-top:1px solid lightgray; }


/* 그리드 row2 */
.row1{ grid-template-columns: 1fr;}
.row2{ grid-template-columns: repeat(auto-fit, minmax(300px, auto));}
.row3{ grid-template-columns: repeat(auto-fit, minmax(300px, auto));}
.row4{ grid-template-columns: repeat(4, 1fr); }


/* grid/flex 오버플로우 방지 */
.grid > *{ min-width: 0; }

/* 컨트롤 오버라이드 (host form용) */
.control{ min-width: 0; width: 100%; }
.control input,
.control textarea,
.control select{ min-width: 0; width: 100%; }
.control input::placeholder{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* textarea */
textarea{ min-height: 72px; resize: vertical; }

/* flex 래핑 */
.flex{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flex > .control{ flex: 1 1 220px; }
.flex.logout { margin-top:3vh; }
/* 버튼 secondary */
.btn-secondary{ background: #eef2f7; color: #1f2937; }
.btn-secondary:hover{ background: #e7ecf5; color: #FFFFFF;}

/* 액션 버튼 영역 */
.actions{ display: flex; gap: 8px; margin-top: 12px; }

/* 코드 입력 (인증) */
.code-input{ letter-spacing: 4px; text-align: center; font-size: 20px; }

/* 자동완성 결과 박스 */
.autocomplete-box{
  display: none;
  padding: 8px;
  margin-top: 6px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  max-height: 220px;
  overflow-y: auto;
}
.autocomplete-box ul{ list-style: none; margin: 0; padding: 0; }
.autocomplete-box ul li{ padding: 10px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.autocomplete-box ul li:hover{ background: #f3f4f6; }
.autocomplete-box ul li:last-child{ border-bottom: 0; }

/* 진행시간 버튼 active 상태 */
.duration-btn.active{
  background: var(--accent) !important;
  color: #fff !important;
}

/* 강좌 아이템 박스 */
.class-item{
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  background: #fafafa;
}

/* iOS Safari datetime-local 대응 */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"]{ min-width: 0; width: 100%; }

/* 두 칼럼 그리드 오버플로우 방지 */
/*.row2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }*/

/* 작은 화면에서 1열 */
@media (max-width: 480px){
  .row2{ grid-template-columns: 1fr; }
}

/* host success 페이지 */
.kv{
  display: grid;
  grid-template-columns: 25% 1fr;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
}
.kv .k{
  display: inline-flex;
  justify-content: center;
  color: #374151;
  font-weight: 600;
}
.pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef2f7;
  color: #111827;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}
.copy-wrap{ display: flex; gap: 8px; align-items: center; }
.copy-input{
  flex: 1 1 auto;
  width: 70%;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: #fafafa;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.classes{ display: grid; gap: 8px; }
.class-box{
  padding: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
}
.class-box h3{ margin: 0 0 6px; font-size: 16px; }
.row-actions{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-primary{ background: var(--accent); color: #fff; }
.btn-ghost{
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  color: #111827;
}
.btn-ghost:hover{ background: #f9fafb; }

/* ===== Queue (대기열) 페이지 스타일 ===== */

.queue-card{
  text-align: center;
}

.queue-status{
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px 20px;
  margin: 20px 0;
}

.queue-position-wrap{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
}

.queue-label{
  font-size: 14px;
  color: #6b7280;
  margin-right: 8px;
}

.queue-position{
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.queue-unit{
  font-size: 1.2rem;
  color: #374151;
  font-weight: 600;
}

.queue-info-row{
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
}

.queue-info-item{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.queue-info-label{
  font-size: 12px;
  color: #6b7280;
}

.queue-info-value{
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.queue-progress-wrap{
  margin-top: 16px;
}

.queue-progress{
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.queue-progress-bar{
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  width: 0%;
  transition: width 0.5s ease;
}

.queue-progress-bar.entering{
  background: var(--ok);
  animation: pulse 1s ease-in-out infinite;
}

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

.queue-progress-text{
  font-size: 13px;
  color: #6b7280;
  margin-top: 8px;
}

.queue-notice{
  margin-top: 20px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.queue-notice p{
  margin: 0;
  font-size: 14px;
  color: #374151;
}

.queue-notice p.muted{
  margin-top: 8px;
  font-size: 12px;
  color: #9ca3af;
}

.queue-notice .timeout-info{
  color: #f59e0b;
}

/* 세션 만료 경고 */
.queue-timeout-warning{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 12px;
  animation: pulse-warning 1.5s ease-in-out infinite;
}

.queue-timeout-warning .timeout-icon{
  font-size: 24px;
}

.queue-timeout-warning .timeout-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.queue-timeout-warning .timeout-text strong{
  color: #92400e;
  font-size: 14px;
}

.queue-timeout-warning .timeout-text span{
  color: #b45309;
  font-size: 13px;
}

@keyframes pulse-warning{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.7; }
}

/* 세션 만료됨 (빨간색) */
.queue-timeout-warning.expired{
  background: #fee2e2;
  border-color: #ef4444;
}

.queue-timeout-warning.expired .timeout-text strong{
  color: #991b1b;
}

.queue-timeout-warning.expired .timeout-text span{
  color: #dc2626;
}

/* ===== 모바일 글로벌 최적화 ===== */
@media (max-width: 480px) {
  body { padding: 12px; }
  .card { padding: 20px 16px; }
  .btn { font-size: 14px; padding: 12px 14px; }
  .control { padding: 10px 12px; }
  .control input,
  .control select,
  .control textarea { font-size: 16px; } /* 16px minimum prevents iOS Safari auto-zoom */
  .btn-secondary { font-size: 13px; padding: 10px 12px; }
  .row4 { gap: 4px; }
  .row4 .btn,
  .row4 .btn-secondary {
    font-size: 12px;
    padding: 10px 4px;
    white-space: nowrap;
  }
}

/* ===== Blank (랜딩) 페이지 ===== */
.blank-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
}

.blank-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 28rem;
  padding: 2rem;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.5);
}

.blank-anim-area {
  position: relative;
  width: 10rem;
  height: 10rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 아바타 떠다니기 */
.blank-avatar {
  animation: blankFloat 3s ease-in-out infinite;
}
.blank-avatar-1 { animation-delay: 0s; }
.blank-avatar-2 { animation-delay: 1s; }
.blank-avatar-3 { animation-delay: 2s; }

@keyframes blankFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* 점선 링 회전 */
.blank-spin-ring {
  animation: blankSpin 3s linear infinite;
}
@keyframes blankSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 중앙 아이콘 펄스 */
.blank-pulse-center {
  animation: blankPulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes blankPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(0.95); }
}

/* 로딩 텍스트 페이드 */
.blank-text-fade {
  animation: blankFadeInOut 2.5s ease-in-out infinite;
}
@keyframes blankFadeInOut {
  0%   { opacity: 0; transform: translateY(5px); }
  20%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-5px); }
}

/* 진행바 */
.blank-progress-track {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  margin-top: 1.5rem;
  overflow: hidden;
  position: relative;
}
.blank-progress-bar {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  width: 50%;
  animation: blankProgress 2s ease-in-out infinite alternate;
}
@keyframes blankProgress {
  0%   { width: 0%; transform: translateX(0); }
  100% { width: 50%; transform: translateX(100%); }
}

/* 모임개설 카드 */
.blank-create-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: 2rem;
  padding: 1rem;
  background: rgba(255,255,255,0.7);
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.6);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s, box-shadow 0.2s;
}
.blank-create-link:hover {
  background: #fff;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.blank-create-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #6366f1, #3b82f6);
  border-radius: 0.75rem;
  color: #fff;
  transition: transform 0.2s;
}
.blank-create-link:hover .blank-create-icon {
  transform: scale(1.05);
}
.blank-create-body {
  flex: 1;
  min-width: 0;
}
.blank-create-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  transition: color 0.2s;
}
.blank-create-link:hover .blank-create-title {
  color: #4f46e5;
}
.blank-create-desc {
  font-size: 0.875rem;
  color: #6b7280;
}
.blank-create-arrow {
  flex-shrink: 0;
  color: #9ca3af;
  transition: color 0.2s, transform 0.2s;
}
.blank-create-link:hover .blank-create-arrow {
  color: #6366f1;
  transform: translateX(4px);
}