/* faq */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-askl { margin: 20px 0 22px; max-width: 340px; }
.faq-ic { width: 20px; height: 20px; border-radius: 6px; }
.faq-list { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item h3 { margin: 0; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; border: 0; background: none;
  cursor: pointer; text-align: left; font: 600 18.5px/1.35 var(--font); letter-spacing: -0.015em; color: var(--ink); }
.faq-q:hover span { color: #000; }
.faq-q i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--soft);
  transition: background-color .25s, transform .3s var(--ease); }
.faq-q i::before, .faq-q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; margin: -0.9px 0 0 -6px;
  border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.faq-q i::after { transform: rotate(90deg); }
.faq-item.open .faq-q i { background: var(--ink); transform: rotate(180deg); }
.faq-item.open .faq-q i::before { background: #fff; }
.faq-item.open .faq-q i::after { opacity: 0; transform: rotate(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq-a > div { overflow: hidden; min-height: 0; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p { margin: 0; padding: 0 56px 26px 0; font: 400 16px/1.55 var(--font); color: var(--ink-2); max-width: 640px;
  opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.faq-item.open .faq-a p { opacity: 1; transform: none; }
.faq-item:not(.open) .faq-a > div { visibility: hidden; transition: visibility 0s .4s; }

@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .faq-side { position: static; }
  .faq-q { font-size: 16.5px; padding: 20px 0; }
  .faq-a p { padding-right: 0; font-size: 15px; }
}