:root{
  --bg:#070A12;
  --bg2:#0B1020;
  --text:#E9EDF7;
  --muted:#AAB2C5;

  --red:#8B1A2B;
  --blue:#173A7A;
  --gold:#D7B35A;
  --silver:#C7D0E6;
  --emerald:#2FAE7D;

  --card: rgba(255,255,255,0.06);
  --shadow: 0 18px 60px rgba(0,0,0,0.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(1200px 700px at 20% 10%, rgba(139,26,43,0.22), transparent 55%),
              radial-gradient(900px 600px at 85% 20%, rgba(23,58,122,0.25), transparent 52%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  font-family: "Spectral", ui-serif, Georgia, serif;
  line-height:1.6;
  overflow-x:hidden;
}

/* 배경 질감 */
.bg-texture{
  position:fixed; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(135deg, rgba(215,179,90,0.08) 0 1px, transparent 1px 10px),
    radial-gradient(800px 500px at 50% 0%, rgba(215,179,90,0.08), transparent 65%);
  opacity:.20;
  mix-blend-mode: overlay;
  z-index:-3;
}

/* ⚜ 패턴 */
.bg-fleur{
  position:fixed; inset:-20%;
  pointer-events:none;
  opacity:.08;
  z-index:-2;
  transform: rotate(-12deg);
  background-image:
    radial-gradient(circle at 10px 10px, rgba(215,179,90,0.25) 0 1px, transparent 2px),
    radial-gradient(circle at 28px 28px, rgba(215,179,90,0.20) 0 1px, transparent 2px);
  background-size: 42px 42px;
}

/* Layout */
.container{width:min(1120px, 92vw); margin:0 auto}
.section{padding:92px 0}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-top:1px solid rgba(215,179,90,0.14);
  border-bottom:1px solid rgba(215,179,90,0.14);
}
.section__head{margin-bottom:22px}
.section__head h2{
  margin:0;
  font-family:"Cinzel", ui-serif, Georgia, serif;
  letter-spacing:.6px;
}
.section__head p{margin:6px 0 0; color:var(--muted)}

/* 구분선 */
.section-divider{
  width:min(1120px, 92vw);
  margin:28px auto 0;
  display:flex; gap:10px; justify-content:center;
  opacity:.75;
}
.section-divider span{
  height:1px; flex:1;
  background: linear-gradient(90deg, transparent, rgba(215,179,90,0.32), transparent);
}
.section-divider span:nth-child(2){
  flex:0 0 160px;
  height:2px;
  background: linear-gradient(90deg, rgba(139,26,43,0.30), rgba(215,179,90,0.55), rgba(23,58,122,0.30));
  border-radius:999px;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(7,10,18,0.82), rgba(7,10,18,0.58));
  border-bottom:1px solid rgba(215,179,90,0.18);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  color:var(--text); text-decoration:none;
}
.brand__crest{
  width:40px; height:40px;
  display:grid; place-items:center;
  color:var(--gold);
  border:1px solid rgba(215,179,90,0.35);
  border-radius:14px;
  background: linear-gradient(180deg, rgba(215,179,90,0.10), rgba(255,255,255,0.02));
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.brand__text{display:flex; flex-direction:column; line-height:1.1}
.brand__title{
  font-family:"Cinzel", ui-serif, Georgia, serif;
  font-weight:700; font-size:14px; letter-spacing:.5px;
}
.brand__sub{font-size:12px; color:var(--muted)}

.nav{display:flex; gap:14px; align-items:center}
.nav a{
  color:var(--text); text-decoration:none;
  font-size:13px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  transition: .18s ease;
}
.nav a:hover{
  border-color: rgba(215,179,90,0.28);
  background: rgba(255,255,255,0.04);
}

.nav__toggle{
  display:none;
  width:44px; height:40px;
  border-radius:14px;
  border:1px solid rgba(215,179,90,0.22);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.nav__toggle span{
  display:block; width:18px; height:2px;
  background: var(--text);
  margin:4px auto;
  border-radius:2px;
  opacity:.9;
}
.nav-mobile{display:none; padding:10px 0 16px; border-top:1px solid rgba(215,179,90,0.12)}
.nav-mobile a{
  display:block; padding:10px 0;
  color:var(--text); text-decoration:none;
  border-bottom:1px dashed rgba(215,179,90,0.10);
}
.nav-mobile a:last-child{border-bottom:none}
.nav-mobile.show{display:block}

/* Hero */
.hero{padding:56px 0 12px}
.hero__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:stretch;
}
.kicker{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(215,179,90,0.25);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size:12px;
  letter-spacing:.4px;
}
.hero__title{
  margin:14px 0 10px;
  font-family:"Cinzel", ui-serif, Georgia, serif;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height:1.15;
}
.gold{color:var(--gold)}
.hero__desc{color:var(--muted); margin:0 0 18px}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap}
.hero__panel{display:flex; height:100%}

.panel-card{
  width:100%;
  border-radius:22px;
  border:1px solid rgba(215,179,90,0.22);
  background:
    radial-gradient(800px 360px at 60% 0%, rgba(215,179,90,0.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  box-shadow: var(--shadow);
  padding:18px 18px 14px;
}
.panel-card__head{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.panel-card__title{
  margin:0 0 10px;
  font-family:"Cinzel", ui-serif, Georgia, serif;
  letter-spacing:.3px;
}
.panel-card__list{margin:0; padding-left:18px; opacity:.92}
.panel-card__foot{display:flex; align-items:center; justify-content:space-between; margin-top:12px}
.sigil{
  width:44px; height:44px; border-radius:16px;
  border:1px solid rgba(215,179,90,0.22);
  background:
    linear-gradient(135deg, rgba(139,26,43,0.30), rgba(23,58,122,0.26)),
    radial-gradient(18px 18px at 30% 30%, rgba(215,179,90,0.25), transparent 60%);
}
.muted{color:var(--muted)}

/* Ribbon */
.ribbon{
  margin-top:18px;
  display:flex; align-items:center;
  gap:10px;
  user-select:none;
}
.ribbon__body{
  padding:8px 14px;
  border-radius:16px;
  border:1px solid rgba(215,179,90,0.22);
  background: linear-gradient(135deg, rgba(139,26,43,0.22), rgba(23,58,122,0.22));
  font-family:"Cinzel", ui-serif, Georgia, serif;
  letter-spacing:.4px;
}
.ribbon__edge{
  width:40px; height:24px;
  border-radius:12px;
  border:1px solid rgba(215,179,90,0.18);
  background: rgba(255,255,255,0.03);
}
.ribbon__edge--l{clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%, 20% 50%)}
.ribbon__edge--r{clip-path: polygon(0 20%, 100% 0, 80% 50%, 100% 100%, 0 80%)}

/* Components */
.grid{display:grid; gap:14px}
.grid--2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid--3{grid-template-columns: repeat(3, minmax(0,1fr))}
.card{
  border-radius:20px;
  border:1px solid rgba(215,179,90,0.18);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 14px 40px rgba(0,0,0,0.28);
  padding:16px 16px 14px;
}
.card--accent{
  background:
    radial-gradient(600px 240px at 15% 10%, rgba(139,26,43,0.16), transparent 62%),
    radial-gradient(520px 220px at 95% 30%, rgba(23,58,122,0.16), transparent 62%),
    rgba(255,255,255,0.05);
}
.card h3{margin:0 0 8px; font-family:"Cinzel", ui-serif, Georgia, serif}
.list{margin:0; padding-left:18px}
.divider{
  height:1px; margin:12px 0;
  background: linear-gradient(90deg, transparent, rgba(215,179,90,0.28), transparent);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(215,179,90,0.22);
  text-decoration:none;
  color:var(--text);
  background: rgba(255,255,255,0.04);
  transition:.18s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(215,179,90,0.35)}
.btn--primary{
  background: linear-gradient(135deg, rgba(139,26,43,0.62), rgba(23,58,122,0.52));
  border-color: rgba(215,179,90,0.30);
}
.btn--ghost{background: rgba(255,255,255,0.03)}
.btn--sm{padding:8px 12px; border-radius:12px; font-size:13px}

.chip, .badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(215,179,90,0.20);
  background: rgba(255,255,255,0.04);
}
.chip{padding:5px 10px; color:var(--text)}
.chip--blue{border-color: rgba(23,58,122,0.55)}
.chip--gold{border-color: rgba(215,179,90,0.35)}
.badge{color:var(--muted)}
.badge--gold{border-color: rgba(215,179,90,0.35); color: var(--gold)}
.badge--red{border-color: rgba(139,26,43,0.55)}
.badge--blue{border-color: rgba(23,58,122,0.55)}
.badge-row{display:flex; gap:8px; flex-wrap:wrap}

.note{
  margin-top:14px;
  border-radius:18px;
  border:1px dashed rgba(215,179,90,0.22);
  background: rgba(255,255,255,0.03);
  padding:12px 14px;
  color: var(--muted);
}
.note--gold{
  border-style:solid;
  border-color: rgba(215,179,90,0.24);
  background: radial-gradient(600px 240px at 30% 0%, rgba(215,179,90,0.10), rgba(255,255,255,0.02));
}

/* Toolbar + Inputs */
.toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin-bottom:12px;
}
.toolbar--tight{margin-bottom:10px}
.toolbar__left{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.toolbar__right{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.input, .select{
  color:var(--text);
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(215,179,90,0.18);
  border-radius:14px;
  padding:9px 12px;
  outline:none;
}
.input::placeholder{color: rgba(233,237,247,0.55)}
.select{padding:9px 12px}

/* Accordion (Guide) */
.accordion{display:flex; flex-direction:column; gap:10px}
.acc-item{
  border-radius:18px;
  border:1px solid rgba(215,179,90,0.16);
  background: rgba(255,255,255,0.04);
  overflow:hidden;
}
.acc-btn{
  width:100%;
  text-align:left;
  padding:12px 14px;
  background: transparent;
  border:none;
  color: var(--text);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  cursor:pointer;
}
.acc-title{
  font-family:"Cinzel", ui-serif, Georgia, serif;
  letter-spacing:.2px;
}
.acc-meta{color:var(--muted); font-size:12px}
.acc-body{
  padding:0 14px 12px;
  color: var(--muted);
  display:none;
  white-space: pre-wrap;
}
.acc-item.open .acc-body{display:block}

/* Medals */
.medal__icon{
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid rgba(215,179,90,0.26);
  display:grid; place-items:center;
  color: var(--gold);
  font-size:18px;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  margin-bottom:10px;
}

/* Org */
.org-wrap{padding:6px 4px 0}
.org-hint{color: var(--muted); font-size:13px; margin-bottom:10px}
.org-tree{overflow:auto; padding:8px 0 2px}
.org-node{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  min-width:260px;
  margin:10px;
}
.org-card{
  width:260px;
  border-radius:20px;
  border:1px solid rgba(215,179,90,0.18);
  background:
    radial-gradient(500px 240px at 25% 0%, rgba(215,179,90,0.10), transparent 60%),
    rgba(255,255,255,0.05);
  padding:12px 12px 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.24);
  position:relative;
}
.org-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.org-name{font-family:"Cinzel", ui-serif, Georgia, serif; margin:0; letter-spacing:.2px}
.org-name a{color:var(--text); text-decoration:none}
.org-name a:hover{text-decoration:underline}
.rank-pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(215,179,90,0.20);
  background: rgba(255,255,255,0.03);
  white-space:nowrap;
}
.rank-pill.is-gold{border-color: rgba(215,179,90,0.35); color: var(--gold)}
.rank-pill.is-red{border-color: rgba(139,26,43,0.55); color: #ff9aa8}
.rank-pill.is-blue{border-color: rgba(23,58,122,0.55); color: #9bbcff}
.rank-pill.is-silver{border-color: rgba(199,208,230,0.50); color: var(--silver)}
.rank-pill.is-emerald{border-color: rgba(47,174,125,0.55); color: #8ff3c9}
.org-meta{margin-top:6px; font-size:13px; color: var(--muted)}
.org-role{margin-top:4px; color: rgba(233,237,247,0.75); font-size:13px}
.org-medals{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.medal-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(215,179,90,0.18);
  background: rgba(255,255,255,0.03);
  font-size:12px;
  color: var(--muted);
}
.medal-chip b{color: var(--gold); font-weight:600}
.medal-chip .ico{font-size:13px}
.org-children{
  display:flex; justify-content:center; gap:12px;
  margin-top:12px; position:relative;
}
.org-children:before{
  content:""; position:absolute; top:-10px; left:50%;
  width:1px; height:10px;
  background: rgba(215,179,90,0.25);
}
.org-branch{position:relative; padding-top:10px}
.org-branch:before{
  content:""; position:absolute; top:0; left:50%;
  width:1px; height:10px;
  background: rgba(215,179,90,0.25);
}

/* Promotion Table */
.table-wrap{overflow:auto; border-radius:18px}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:680px;
}
.table th, .table td{
  text-align:left;
  padding:12px 12px;
  border-bottom:1px solid rgba(215,179,90,0.12);
  vertical-align:top;
}
.table th{
  font-family:"Cinzel", ui-serif, Georgia, serif;
  letter-spacing:.2px;
  background: rgba(255,255,255,0.03);
}

/* Stepper */
.stepper{display:flex; flex-direction:column; gap:14px}
.step{display:flex; gap:12px; align-items:flex-start}
.step__dot{
  width:12px; height:12px; border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(215,179,90,0.15);
  margin-top:6px;
}
.step__title{font-weight:600}
.step__desc{font-size:14px; color: var(--muted)}

/* Footer */
.footer{
  padding:22px 0;
  border-top:1px solid rgba(215,179,90,0.18);
  background: rgba(0,0,0,0.20);
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.footer__left{display:flex; align-items:center; gap:12px}
.footer__mark{
  width:44px; height:44px; border-radius:16px;
  border:1px solid rgba(215,179,90,0.22);
  background: linear-gradient(135deg, rgba(139,26,43,0.26), rgba(23,58,122,0.22));
}
.footer__title{font-family:"Cinzel", ui-serif, Georgia, serif; letter-spacing:.3px}
.footer__sub{color:var(--muted); font-size:12px}

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr}
  .grid--3{grid-template-columns: 1fr}
  .grid--2{grid-template-columns: 1fr}
  .nav{display:none}
  .nav__toggle{display:inline-block}
  .table{min-width: 520px}
}


/* Hero Center */
.hero__inner--center{
  grid-template-columns: 1fr;
  justify-items: center;
}

.hero__copy--center{
  text-align: center;
  max-width: 820px;
}

.hero__cta--center{
  justify-content: center;
}

.ribbon--center{
  justify-content: center;
}

/* 조직도 탭 UI */
.org-tabs-wrap{display:flex; flex-direction:column; gap:14px; margin-bottom:12px}
.org-tabs-group{display:flex; flex-direction:column; gap:8px}
.org-tabs-title{
  font-family:"Cinzel", ui-serif, Georgia, serif;
  letter-spacing:.2px;
  color: rgba(233,237,247,0.92);
  font-size: 14px;
}
.org-tabs{display:flex; gap:8px; flex-wrap:wrap}
.org-tabs--scroll{
  flex-wrap:nowrap;
  overflow:auto;
  padding-bottom:6px;
}
.org-tab{
  cursor:pointer;
  border-radius:999px;
  padding:8px 12px;
  border:1px solid rgba(215,179,90,0.20);
  background: rgba(255,255,255,0.03);
  color: rgba(233,237,247,0.92);
  font-size: 13px;
  white-space:nowrap;
  transition:.16s ease;
}
.org-tab:hover{transform: translateY(-1px); border-color: rgba(215,179,90,0.35)}
.org-tab.is-active{
  border-color: rgba(215,179,90,0.45);
  background: linear-gradient(135deg, rgba(139,26,43,0.28), rgba(23,58,122,0.26));
}

.org-note{margin-top:10px; font-size:13px}

#org .container{
  width: min(1800px, 98vw);
}
.org-embed{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(215,179,90,0.22);
  background: rgba(255,255,255,0.03);
  overflow: auto; 
}

.org-embed--auto{
  min-height: 680px;
}

.org-embed iframe{
  width: 100%;
  min-width: 1600px;  
  height: 100%;
  border: 0;
}

@media (max-width: 980px){
  #org .container{ width: 98vw; }
  .org-embed iframe{ min-width: 1200px; }
}


/* ======================
   Medals: image support
   ====================== */
.medal-card .medal__top{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.medal-card .medal__icon{
  margin-bottom:0;
  flex:0 0 auto;
}
.medal-card .medal__img{
  width:64px;
  height:64px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid rgba(215,179,90,0.26);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  flex:0 0 auto;
}
.medal-card h3{margin:2px 0 4px}
.medal-card .medal__meta{min-width:0}
.medal-card .medal__meta .muted{margin:0}

/* ======================
   Guide: rich editor + view
   ====================== */
.guide-view{
  padding: 4px 2px;
}
.guide-view img{
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(215,179,90,0.20);
  background: rgba(255,255,255,0.03);

.guide-view .ql-editor{
  padding: 0;
  font-family: "Spectral", ui-serif, Georgia, serif;
  color: rgba(233,237,247,0.92);
}
.guide-view .ql-editor .ql-align-center{ text-align: center; }
.guide-view .ql-editor .ql-align-right{ text-align: right; }
.guide-view .ql-editor .ql-align-left{ text-align: left; }
.guide-view .ql-editor .ql-size-small{ font-size: 0.85em; }
.guide-view .ql-editor .ql-size-large{ font-size: 1.35em; }
.guide-view .ql-editor .ql-size-huge{ font-size: 1.9em; }

/* 업로드 미디어(비디오/오디오) 표시 */
.guide-view video,
.guide-view audio{
  max-width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(215,179,90,0.20);
  background: rgba(255,255,255,0.03);
  display:block;
  margin-left:auto;
  margin-right:auto;
}
#guideEditor .ql-editor video,
#guideEditor .ql-editor audio{
  max-width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(215,179,90,0.20);
  background: rgba(255,255,255,0.03);
  display:block;
  margin-left:auto;
  margin-right:auto;
}
}

/* Quill theming on dark background */
.guide-editor-wrap{margin-top: 12px}
#guideEditor .ql-toolbar.ql-snow{
  border: 1px solid rgba(215,179,90,0.22);
  border-radius: 18px 18px 0 0;
  background: rgba(255,255,255,0.03);
}
#guideEditor .ql-container.ql-snow{
  border: 1px solid rgba(215,179,90,0.22);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: rgba(0,0,0,0.12);
  color: rgba(233,237,247,0.92);
}
#guideEditor .ql-editor{
  min-height: 420px;
  font-family: "Spectral", ui-serif, Georgia, serif;
}
#guideEditor .ql-editor a{color: var(--gold)}
#guideEditor .ql-editor img{
  max-width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(215,179,90,0.20);
}

/* 이미지 클릭 시 조절 툴박스 */
.guide-img-tools{
  position:absolute;
  z-index: 9999;
  display:none;
  width: min(520px, 92vw);
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(215,179,90,0.28);
  background: rgba(10, 12, 22, 0.96);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
}
.guide-img-tools.show{display:block}
.guide-img-tools__row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.guide-img-tools__row + .guide-img-tools__row{margin-top:8px}
.guide-img-tools__sep{width:1px; height:18px; background: rgba(215,179,90,0.22); margin:0 4px}
.guide-img-tools__label{font-size:12px; color: var(--muted)}
.guide-img-tools__value{font-size:12px; color: rgba(233,237,247,0.92)}
.guide-img-tools button{
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(215,179,90,0.22);
  background: rgba(255,255,255,0.03);
  color: rgba(233,237,247,0.92);
  cursor:pointer;
}
.guide-img-tools button:hover{transform: translateY(-1px); border-color: rgba(215,179,90,0.38)}
.guide-img-tools button.danger{border-color: rgba(139,26,43,0.45)}
.guide-img-tools input[type="range"]{flex: 1 1 220px}

#guideEditor .ql-editor img.is-selected,
#guideEditor .ql-editor video.is-selected,
#guideEditor .ql-editor audio.is-selected{
  outline: 2px solid rgba(215,179,90,0.55);
  outline-offset: 2px;
}

/* Make Quill toolbar icons readable */
.ql-snow .ql-stroke{stroke: rgba(233,237,247,0.88)}
.ql-snow .ql-fill{fill: rgba(233,237,247,0.88)}
.ql-snow .ql-picker{color: rgba(233,237,247,0.88)}
.ql-snow .ql-picker-options{
  background: rgba(10, 12, 22, 0.96);
  border: 1px solid rgba(215,179,90,0.22);
}


/* ======================
   Admin login page
   ====================== */
.login-page{
  min-height:100vh;
}
.login-wrap{
  width:min(640px, 92vw);
  margin:0 auto;
  padding:100px 0 60px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.login-brand{justify-content:center}
.login-card{
  padding:22px 22px 18px;
}
.login-title{
  margin:0;
  font-family:"Cinzel", ui-serif, Georgia, serif;
  letter-spacing:.6px;
}
.login-sub{margin:8px 0 16px}
.login-form{display:flex; flex-direction:column; gap:10px}
.login-label{font-size:13px; color:var(--muted)}
.login-input{height:44px}
.login-btn{margin-top:6px}
.login-error{
  margin:10px 0 12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(139,26,43,0.35);
  background: rgba(139,26,43,0.14);
  color: #ffd7dd;
}
.login-links{margin-top:14px; display:flex; justify-content:flex-end}


/* medal admin actions */
.medal-admin{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}


/* =========================
   Section & Company Banners
   ========================= */
.section-banner{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(215,179,90,0.28);
  box-shadow: 0 18px 60px rgba(0,0,0,0.50);
  background: rgba(0,0,0,0.35);
  margin: 0 0 16px;
}
.section-banner img{
  width: 100%;
  height: auto;
  display: block;
}

.section-banner--company{
  margin-top: 10px;
  margin-bottom: 12px;
}

/* Company groups layout */
.company-groups{
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.company-group .grid{
  margin-top: 10px;
}

/* Make company banners feel wide even inside container */
@media (min-width: 1100px){
  .section-banner--company{
    margin-left: -6px;
    margin-right: -6px;
  }
}

#medals select{
  color-scheme: dark;
  color: #f2f2f2 !important;
  background: rgba(14,16,24,.92) !important;
  border: 1px solid rgba(215,179,90,.28) !important;
  opacity: 1 !important;
}

#medals select option{
  background: #0f121a !important;
  color: #f2f2f2 !important;
  opacity: 1 !important;
}

/* =========================
   Enlistment (Join) section
   ========================= */
.join-shot{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(215,179,90,0.28);
  background: rgba(0,0,0,0.35);
}
.join-shot img{
  width: 100%;
  height: auto;
  display: block;
}

.form-template{
  margin: 10px 0 0;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(215,179,90,0.22);
  background: rgba(0,0,0,0.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  overflow: auto;
}
.form-template code{
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}



/* ✅ 상단바 로고(문장) 크기/정렬 강제 수정 */
.topbar .brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

/* 여기 숫자(40px)만 바꾸면 로고 크기 조절됨 */
.topbar .brand__crest{
  width:40px !important;
  height:40px !important;
  flex:0 0 40px !important;

  border-radius:12px !important;
  overflow:hidden !important;
  display:block !important;
}

.topbar .brand__crest img{
  width:100% !important;
  height:100% !important;
  display:block !important;

  object-fit:cover !important; /* 로고를 꽉 채움(잘림 가능) */
  /* object-fit:contain !important;  // 잘림 없이 넣고 싶으면 이걸로 교체 */
}

/* 텍스트가 로고 위로 겹치는 것 방지 */
.topbar .brand__text{
  position:static !important;
  display:flex !important;
  flex-direction:column !important;
  line-height:1.1 !important;
}