/* 쓰기 작업 승인 카드 */
.perm {
  border: 1px solid var(--cl-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.perm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cl-line);
  color: var(--cl-ink);
  font-size: 13.5px;
}

.perm-head b {
  font-weight: 700;
}
.perm-ico {
  display: inline-flex;
  flex: 0 0 auto;
}
.perm-ico img {
  display: block;
  width: 17px;
  height: 17px;
}

.perm-body {
  padding: 14px 18px 16px;
}
.perm-label {
  margin: 0 0 8px !important;
  color: var(--cl-mute);
  font-size: 12px;
}

.perm-code {
  max-height: 210px;
  margin: 0;
  padding: 14px 16px;
  overflow-y: auto;
  border: 1px solid var(--cl-line);
  border-radius: 11px;
  background: var(--cl-bg);
  color: #2f6f4f;
  font-size: 12.5px;
  line-height: 1.7;
}

.perm-warn {
  display: flex;
  gap: 7px;
  margin: 12px 0 0 !important;
  color: var(--cl-mute);
  font-size: 12px;
  line-height: 1.6;
}

.perm-warn::before {
  content: 'A0';
  flex: 0 0 auto;
}

.perm-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.perm-btns b {
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--cl-ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.perm-btns span {
  padding: 8px 14px;
  border: 1px solid var(--cl-line);
  border-radius: 10px;
  color: var(--cl-mute);
  font-size: 12.5px;
  font-weight: 600;
}

/* 답변 요약 카드 */
.recap {
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid var(--cl-line);
  border-radius: 14px;
  background: #fff;
}

.recap-row + .recap-row {
  margin-top: 12px;
}
.recap-row b {
  display: block;
  color: var(--cl-ink);
  font-size: 13.5px;
  font-weight: 700;
}
.recap-row span {
  display: block;
  margin-top: 2px;
  color: var(--cl-mute);
  font-size: 13px;
}

/* 생성된 티켓 목록 */
.tk {
  margin: 14px 0 4px;
  border: 1px solid var(--cl-line);
  border-radius: 12px;
  overflow: hidden;
}
.tk-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
}
.tk-row + .tk-row {
  border-top: 1px solid var(--cl-line);
}

.tk-id {
  flex: 0 0 auto;
  color: var(--cl-mute);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: -0.03em;
  padding-top: 2px;
}

.tk-pri {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f0eee6;
  color: var(--cl-mute);
  font-size: 11px;
  font-weight: 700;
}

.tk-pri--high {
  background: #fbe9e2;
  color: #a9522f;
}
.tk-body {
  min-width: 0;
}
.tk-body b {
  display: block;
  color: var(--cl-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.tk-body span {
  display: block;
  margin-top: 2px;
  color: var(--cl-mute);
  font-size: 12.5px;
}

/* Linear 보드 화면 */
.ln {
  display: flex;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.ln-side {
  flex: 0 0 150px;
  padding: 14px 12px;
  border-right: 1px solid var(--line-soft);
  background: var(--bg-soft);
}

.ln-ws {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
}

.ln-ws i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f0866b;
}
.ln-nav {
  display: block;
  padding: 5px 0;
  color: var(--mute);
  font-size: 12px;
}

.ln-main {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 16px;
}

.ln-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 13.5px;
}

.ln-top b {
  font-weight: 700;
}

.ln-top span {
  padding: 3px 10px;
  border-radius: 7px;
  background: var(--bg-soft);
  color: var(--gray);
  font-size: 11.5px;
  font-weight: 600;
}

.ln-group {
  padding: 7px 10px;
  margin-bottom: 4px;
  border-radius: 7px;
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}

.ln-group em {
  margin-left: 6px;
  color: var(--mute);
  font-style: normal;
  font-weight: 600;
}

.ln-issue {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.ln-issue:last-child {
  border-bottom: none;
}

.ln-id {
  flex: 0 0 auto;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: -0.03em;
}

.ln-title {
  flex: 1;
  min-width: 0;
  color: var(--body);
  font-size: 13px;
  line-height: 1.5;
}
.ln-title b {
  color: var(--ink);
  font-weight: 700;
}
.ln-date {
  flex: 0 0 auto;
  color: var(--mute);
  font-size: 11.5px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .ln-side {
    display: none;
  }
}

/* 구글 캘린더 일정 화면 */
.gc {
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.gc-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-soft);
  color: var(--gray);
  font-size: 13px;
  font-weight: 700;
}

.gc-ico {
  display: inline-flex;
  flex: 0 0 auto;
}
.gc-ico img {
  display: block;
  width: 16px;
  height: 16px;
}

.gc-body {
  padding: 20px 22px 0;
}

.gc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px !important;
  font-size: 19px;
  font-weight: 700;
}

.gc-title i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: #4285f4;
}
.gc-when {
  margin: 0 0 20px 21px !important;
  color: var(--gray);
  font-size: 13.5px;
}

.gc-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.6;
}

.gc-row-ico {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--mute);
}
.gc-row-ico svg {
  width: 17px;
  height: 17px;
}
.gc-row b {
  font-weight: 700;
}
.gc-row em {
  display: block;
  color: var(--mute);
  font-size: 12.5px;
  font-style: normal;
}
.gc-desc {
  color: var(--gray);
}

.gc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px -22px 0;
  padding: 13px 22px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-soft);
  color: var(--gray);
  font-size: 13px;
}

.gc-btns {
  display: flex;
  gap: 7px;
}

.gc-btns b {
  padding: 5px 16px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #1a56c4;
  font-size: 12.5px;
  font-weight: 700;
}

.gc-btns em {
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--gray);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
}

/* 사례 페이지 — 흐름 요약 */
.case-flow {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-soft);
}

.cf-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 150px;
  gap: 3px;
  padding: 18px 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.cf-ico {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 9px;
  border-radius: 10px;
  overflow: hidden;
}

.cf-ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cf-item b {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
}
.cf-item em {
  color: var(--mute);
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.5;
}

.cf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  color: #c3c8ce;
}

.cf-arrow svg {
  width: 17px;
  height: 17px;
}

/* 흐름도 다음 소제목은 여백을 벌린다.
 ".doc > h3:first-of-type { margin-top: 8px }" 보다 우선해야 하므로 선택자를 맞춘다 */
.doc .case-flow + h3 {
  margin-top: 84px;
}

@media (max-width: 640px) {
  .case-flow {
    flex-direction: column;
  }
  .cf-arrow {
    width: 100%;
    height: 26px;
    transform: rotate(90deg);
  }
}

/* Claude 도구 목록(여러 개) */
.cl-toolhead {
  margin: 10px 0 12px !important;
  color: var(--cl-mute);
  font-size: 12.5px;
}
.cl-toolstack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cl-toolstack .cl-tool {
  margin-bottom: 0;
}
/* Claude 선택지 패널 */
.ask {
  margin: 0;
  border: 1px solid var(--cl-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

/* 같은 화면에 질문이 두 개 이상일 때 카드 사이를 벌린다 */
.ask + .ask,
.ask--stack {
  margin-top: 22px;
}

.ask-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-size: 14px;
}

.ask-head {
  color: var(--cl-ink);
}
.ask-head b {
  font-weight: 700;
}
.ask-head span {
  color: var(--cl-mute);
  font-size: 12px;
}

.ask-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--cl-line);
  color: var(--cl-mute);
  font-size: 14px;
}

.ask-opt i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--cl-bg);
  color: var(--cl-mute);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
}

.ask-opt em {
  margin-left: auto;
  color: var(--cl-ink);
  font-style: normal;
}
.ask-opt--on {
  background: var(--cl-user);
  color: var(--cl-ink);
  font-weight: 600;
}
.ask-opt--on i {
  background: #e4e1d6;
  color: var(--cl-ink);
}

/* Claude 안에서 일어나는 시스템 안내 줄 */
.cl-sys {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  padding: 11px 14px;
  border: 1px solid var(--cl-line);
  border-radius: 11px;
  background: #fff;
  color: var(--cl-ink);
  font-size: 13.5px;
}

.cl-sys b {
  font-weight: 700;
}
.cl-sys em {
  margin-left: auto;
  color: var(--cl-mute);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

/* 예약 작업 카드 */
.sched {
  margin: 0;
  border: 1px solid var(--cl-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.sched-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 14px;
}

.sched-ico {
  display: inline-flex;
  color: var(--gray);
}
.sched-ico svg {
  width: 16px;
  height: 16px;
}
.sched-t {
  color: var(--cl-ink);
}
.sched-t b {
  font-weight: 700;
}

.sched-body {
  padding: 4px 18px 16px;
}
.sched-desc {
  margin: 0 0 4px !important;
  color: var(--cl-ink);
  font-size: 13.5px;
}
.sched-when2 {
  margin: 0 0 12px !important;
  color: var(--cl-mute);
  font-size: 12.5px;
}

.sched-fold {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px !important;
  color: var(--cl-mute);
  font-size: 12.5px;
  font-weight: 600;
}

.sched-fold::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

/* 예약 작업에 저장된 지시문 — 실제 화면처럼 스크롤되는 박스 */
.sched-prompt {
  max-height: 300px;
  overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid var(--cl-line);
  border-radius: 11px;
  background: var(--cl-bg);
}

.sched-prompt p {
  margin: 0 0 10px;
  color: var(--cl-ink);
  font-size: 13px;
  line-height: 1.7;
}
.sched-prompt p:last-child {
  margin-bottom: 0;
}
.sched-prompt .sp-h {
  margin-top: 14px;
  font-weight: 700;
}
.sched-prompt ul {
  margin: 0 0 10px;
  padding-left: 18px;
}
.sched-prompt li {
  margin: 3px 0;
  color: var(--cl-ink);
  font-size: 12.5px;
  line-height: 1.6;
}

.sched-prompt code {
  padding: 1px 5px;
  border: none;
  border-radius: 5px;
  background: #f0eee6;
  color: var(--cl-ink);
  font-size: 11.5px;
}

.sched-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.sched-btns b {
  padding: 8px 18px;
  border-radius: 10px;
  background: var(--cl-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.sched-btns span {
  padding: 8px 16px;
  border: 1px solid var(--cl-line);
  border-radius: 10px;
  color: var(--cl-mute);
  font-size: 13px;
  font-weight: 600;
}

/* 슬랙 메시지 목업 */
.sl {
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

/* 슬랙 창임을 알 수 있는 상단 바 */
.sl-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-soft);
}

.sl-logo {
  display: inline-flex;
  align-items: center;
}
.sl-logo img {
  display: block;
  width: 17px;
  height: 17px;
}
.sl-ch {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 800;
}
.sl-ws {
  color: var(--mute);
  font-size: 12px;
}

.sl-msg {
  padding: 18px 20px;
}

.sl-msg {
  display: flex;
  gap: 12px;
}

.sl-av {
  display: block;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  overflow: hidden;
}

.sl-av img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sl-tag {
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-soft);
  color: var(--mute);
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
}

.sl-body {
  min-width: 0;
  font-size: 14px;
  line-height: 1.65;
}
.sl-who {
  margin: 0 0 2px !important;
  font-weight: 800;
}
.sl-who em {
  margin-left: 6px;
  color: var(--mute);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}
.sl-title {
  margin: 0 0 12px !important;
  font-weight: 700;
}
.sl-sec {
  margin: 12px 0 4px !important;
}
.sl-sec b {
  font-weight: 700;
}
.sl-sec span {
  margin-left: 6px;
  color: var(--mute);
  font-size: 12.5px;
  font-style: italic;
}
.sl-sec--pin {
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-weight: 700;
}
.sl-body ul {
  margin: 0;
  padding-left: 20px;
}
.sl-body li {
  margin: 3px 0;
  color: var(--body);
  font-size: 13.5px;
}
.sl-foot {
  margin: 14px 0 0 !important;
  color: var(--mute);
  font-size: 12px;
}
.sl-foot b {
  font-weight: 600;
}