@tailwind base;
@tailwind components;
@tailwind utilities;

@import "../../variants.css";

html,
body,
code,
kbd,
samp,
pre {
  font-family: "Pretendard", sans-serif;
}

/* readonly input 스타일 */
input[readonly] {
  background-color: #f3f4f6 !important;
}

.secondary-nav-container {
  
  /*green - lime*/
  --start: #cbffe2;
  --first: #edffff;
  --end: #fffed7;

 background: radial-gradient(
    20rem 100% at 10% 0,
    var(--start) 0,
     /*var(--first) 42.5%, */ var(--end) 100%
  );
  
  border-radius: 0.75rem;
  transition: all 0.25s ease-in-out;
}
.background-color {background: #fffff6}
.background-color-purple {background-color: #fff7ff}
.background-color-orange {background-color:#fff8f4}
.background-color-mint {background-color:#fafafa}
.background-color-blue {background-color:#fafafa}

.secondary-nav-container-mint {
  /*mint-purple*/
  --start: #d8fdf2;
  --first: #f0fffa;
  --end: #fff4fd;
  background: radial-gradient(
    20rem 100% at 10% 0,
    var(--start) 0,
     var(--first) 42.5%,  var(--end) 100%
  ); 
  
  border-radius: 0.75rem;
  transition: all 0.25s ease-in-out;
}
.secondary-nav-container-blue {
  --start: #defffe;
  --first: #edf4ff;
  --end: #f6f9fd;
  background: radial-gradient(
    20rem 100% at 10% 0,
    var(--start) 0,
     var(--first) 42.5%,  var(--end) 100%
  ); 
  
  border-radius: 0.75rem;
  transition: all 0.25s ease-in-out;
}
.secondary-nav-container-purple {
  --start: #fce4f7;
  --first: #fdcbf1;
  --end: #e7d7ee;
  background: radial-gradient(
    20rem 100% at 10% 0,
    var(--start) 0,
     var(--first) 42.5%,  var(--end) 100%
  ); 
  
  border-radius: 0.75rem;
  transition: all 0.25s ease-in-out;
}
.secondary-nav-container-orange {
  --start: #ffb9c5;
  --first: #fdd6bd;
  --end: #fce8db;
  background: radial-gradient(
    20rem 100% at 10% 0,
    var(--start) 0,
     var(--first) 42.5%,  var(--end) 100%
  ); 
  
  border-radius: 0.75rem;
  transition: all 0.25s ease-in-out;
}

.dt-layout-row:has(.dt-search),
.dt-layout-row:has(.dt-length),
.dt-layout-row:has(.dt-paging),
.dt-column-order {
  display: none !important;
}
.loader-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
}
.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loader::after,
.loader::before {
    content: "";
    box-sizing: border-box;
    transform: scale(0);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    left: 0;
    top: 0;
    animation: animloader 2s linear infinite;
}
.loader::after {
    animation-delay: 1s;
}
@keyframes animloader {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
/* 초기엔 0%에서 시작 */
.bar-fill,.bar-fill2 {
  width: 0;
  transition: width 1.2s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .bar-fill { transition: none; }
}
/* 외부 커스텀 툴팁 (스샷 스타일) */
.rt-tooltip {
  position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -120%);
  background:#111827; color:#fff; padding:6px 10px; border-radius:10px; font:600 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  display:flex; align-items:center; gap:6px; z-index: 30;
}
.rt-tooltip::after { /* 말풍선 꼬리 */
  content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#111827;
}
.rt-tooltip .ico {
  width:18px; height:18px; border-radius:9999px; background:#22c55e;
  display:flex; align-items:center; justify-content:center; font:700 12px/1 "Inter", system-ui;
}

/* 높이 고정/최소높이 */
.ck-editor__editable[role="textbox"] {
  min-height: 420px;        /* 원하는 높이 */
  max-height: 700px;        /* 스크롤 생기게 하려면 추가 */
  overflow: auto;
}
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content,
.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --ck-border-radius: 0.5rem;
}
.ck .ck-placeholder, .ck.ck-placeholder {
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}