/*
 * Standard (light/neutral) skin override for ui-accordion.
 * 목표: 색/보더/여백만 덮어쓰고, 레이아웃·height 애니메이션은 base(index.css)를 그대로 사용.
 * 사용법: 컨테이너에 data-acc-tone="standard" 추가 후 index.css 다음에 이 파일을 로드.
 */

[data-satz="ui-accordion"][data-acc-tone="standard"] {
  --acc-bg: transparent;
  --acc-surface: transparent;
  --acc-surface-alt: transparent;
  --acc-border: 0;
  --acc-text: #f8fafc;
  --acc-muted: #d1d5db;
  --acc-focus: #f97316;
  --acc-shadow: none;
  --acc-gap: 0;
  --acc-radius: 0;
  --acc-icon-rot: 0deg;
  /* 아이콘 회전 없이 플러스→마이너스 전환 */
  padding: 0;
  background: transparent;
  box-shadow: none;
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-item {
  position: relative;
  border: 0;
  border-bottom: 1px solid #3f3f46;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-item::before {
  display: none;
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-item.is-open {
  border-color: #52525b;
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-trigger {
  padding: 18px 0;
  gap: 12px;
  color: var(--acc-text);
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-trigger::after {
  display: none;
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-trigger:hover,
[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-trigger:focus-visible {
  transform: none;
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-icon {
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  color: #f97316;
  box-shadow: none;
  transition: transform var(--acc-dur) var(--acc-ease);
  /* transform: rotate(0deg); ← 기본값 유지, .is-open에서 var(--acc-icon-rot) 적용 */
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-icon::before,
[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-icon::after {
  content: "";
  background: currentColor;
  opacity: 1;
  height: 2px;
  width: 100%;
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-icon::after {
  transform: rotate(90deg);
}

/* 플러스(닫힘) → 마이너스(열림) 토글: base 구조 유지, 세로 막대만 토글 */
[data-satz="ui-accordion"][data-acc-tone="standard"][data-acc-ready="true"] .acc-item .acc-icon::after {
  opacity: 1;
}

[data-satz="ui-accordion"][data-acc-tone="standard"][data-acc-ready="true"] .acc-item.is-open .acc-icon::after {
  opacity: 0;
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-panel {
  display: block;
  overflow: hidden;
  border: 0;
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-panel[hidden] {
  display: none !important;
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-panel-inner {
  padding: 0 0 18px;
  color: var(--acc-muted);
  font-size: 1rem;
  line-height: 1.6;
}

[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-panel-inner a {
  text-decoration-color: currentColor;
}

/* 트리거 버튼을 flex-row로 만들어서 텍스트/아이콘 양끝 배치 */
[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 텍스트는 왼쪽, 아이콘은 오른쪽 */
  width: 100%;
  text-align: left;
}

/* 텍스트 블록이 남는 공간을 다 차지하도록 */
[data-satz="ui-accordion"][data-acc-tone="standard"] .type-faq-text {
  flex: 1 1 auto;
}

/* 아이콘은 오른쪽에 딱 붙게 */
[data-satz="ui-accordion"][data-acc-tone="standard"] .acc-icon {
  flex: 0 0 auto;
  margin-left: 12px;
  /* 텍스트와 간격만 조금 */
}