.app-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.app-filters a {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-muted);
  font-weight: 700;
  font-size: var(--fs-sm);
  background: var(--color-surface);
}

.app-filters a.is-active,
.app-filters a:hover {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.app-count {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

/* Keep the existing type tabs, but stop them from pushing the first row below
   the fold on a phone. Structure unchanged — only density. */
@media (max-width: 767px) {
  .app-create-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
  }

  .app-create-actions .btn {
    width: 100%;
    padding-inline: 0.5rem;
  }

  .app-filters {
    gap: 0.35rem;
    margin-bottom: 0.6rem;
  }

  .app-filters a {
    min-height: 2.1rem;
    padding: 0.25rem 0.75rem;
    font-size: var(--fs-sm);
  }

  .app-count {
    margin-bottom: 0.5rem;
  }
}

.app-list-desktop {
  display: none;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.app-table a {
  font-weight: 700;
  text-decoration: none;
}

/* Mobile 대행 목록 — a dense ruled list, not stacked cards. Each row carries the
   four facts people scan for: 접수번호 | 처리상태 | 글쓴이 | 접수날짜 on the board,
   and 접수번호 | 처리상태 | 구분 | 신청일 on the member's own 신청내역. */
.app-list-mobile {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-rule, #e4e9ee);
}

.app-list-mobile li {
  border-bottom: 1px solid var(--color-rule, #e4e9ee);
}

.app-list-mobile a {
  display: block;
  padding: 0.8rem 0.15rem;
  text-decoration: none;
  color: inherit;
}

.app-list-mobile a:hover,
.app-list-mobile a:focus-visible {
  background: var(--color-soft, #f5f7f9);
}

.app-list-mobile .m-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-list-mobile .m-meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* Receipt number and status are the two tokens people look for; everything
   else on the line stays quiet so those two read first. */
.app-list-mobile .m-receipt {
  font-weight: 700;
  color: var(--color-primary-dark);
}

.app-list-mobile .m-status {
  font-weight: 700;
  color: var(--color-accent-dark);
}

.app-list-mobile .m-sep {
  margin: 0 0.15rem;
  color: var(--color-rule-strong, #c9d4e0);
}

/* 글쓴이 stays quiet — the title already names the applicant. */
.app-list-mobile .m-author {
  color: var(--color-muted);
}

/* The four values must survive 375px on one line. Tighten the separators before
   touching the type size — the meta is already a step below the title. */
@media (max-width: 400px) {
  .app-list-mobile .m-sep {
    margin: 0 0.1rem;
  }

  .app-list-mobile .m-meta {
    letter-spacing: -0.01em;
  }
}

/* ---- 구매대행 / 배송대행 게시판 목록 ---------------------------------------
   Public board surfaces read on white: the canvas, the rows and the table all
   drop to the page surface, and structure is carried by hairlines instead of
   panels. Scoped to the board body class so 신청내역 and admin are untouched. */
body.page-app-board {
  background: #fff;
}

body.page-app-board .app-list-desktop {
  border: 0;
  border-top: 2px solid var(--color-primary-dark);
  border-radius: 0;
  background: #fff;
}

body.page-app-board .app-table th {
  background: #fff;
  border-bottom: 1px solid var(--color-rule-strong, #c9d4e0);
  font-size: var(--fs-sm);
  color: var(--color-muted);
  font-weight: 700;
  white-space: nowrap;
}

body.page-app-board .app-table td {
  background: #fff;
  border-bottom: 1px solid var(--color-rule, #e4e9ee);
}

body.page-app-board .app-list-mobile a:hover,
body.page-app-board .app-list-mobile a:focus-visible {
  background: var(--color-soft, #f5f7f9);
}

/* 접수번호 and 날짜 are read as numbers; the subject takes whatever is left. */
.app-cell-receipt,
.app-cell-date,
.app-cell-author {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.app-cell-receipt {
  font-weight: 700;
  color: var(--color-primary-dark);
}

.app-cell-author,
.app-cell-date {
  color: var(--color-muted);
}

.app-cell-subject {
  width: 100%;
}

.app-cell-subject .list-lock {
  margin-left: 0.35rem;
}

/* Title and 신청하기 share the first line — the CTA is what the menu sends
   people here to find. boards.css is not loaded on this page, so the board
   header rule lives here. */
.app-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.app-board-head .page-title {
  margin: 0;
}

/* One quiet line under the count, so nobody expects to read other people's
   requests from the list. */
.app-board-note {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.app-back {
  margin: 0 0 0.75rem;
}

.app-back a {
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-sm);
}

.app-meta {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.app-meta div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.5rem;
}

.app-meta dt {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.app-meta dd {
  margin: 0;
}

.app-section {
  margin-bottom: 1rem;
}

.app-section h2 {
  margin: 0 0 0.75rem;
  font-size: var(--fs-lg);
  color: var(--color-primary-dark);
}

.app-body-text {
  white-space: normal;
  word-break: break-word;
}

/* 상세 맨 위 진행절차 안내 (레거시 view.skin.php 상단 문구). */
.app-intro p {
  margin: 0 0 0.35rem;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.app-intro p:last-child {
  margin-bottom: 0;
}

/* 업무 단계. 레거시는 단계마다 독립 영역이었으므로 제목 왼쪽에 선을 둬
   카드 안에서도 단계 경계가 드러나게 한다. */
.app-stage > h2 {
  padding-left: 0.6rem;
  border-left: 3px solid var(--color-primary);
}

.app-stage-notice {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-border);
}

.app-stage-notice p {
  margin: 0 0 0.3rem;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  word-break: break-word;
}

.app-stage-notice p:last-child {
  margin-bottom: 0;
}

.app-admin-actions {
  margin: 0 0 1rem;
}

/* 본인 신청 수정·삭제. 삭제는 POST 라 form 이 끼어 있어서, 버튼 두 개가
   한 줄에 나란히 서도록 감싼다. 좁은 화면에서는 자연스럽게 줄바꿈된다. */
.app-owner-actions {
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.app-inline-form {
  display: inline;
  margin: 0;
}

.app-owner-locked {
  margin: 0 0 1rem;
}

/* 링크로 만들 수 없는 상품 URL(scheme 없는 자유 기재)은 평문으로 보여준다.
   긴 문자열이 좁은 화면을 밀어내지 않도록 끊어 준다. */
.app-item-url-plain {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.app-fields {
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.app-fields div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.5rem;
}

.app-fields dt {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.app-fields dd {
  margin: 0;
  word-break: break-word;
}

.app-items,
.app-attachments,
.app-comments {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.app-items {
  list-style: decimal;
  padding-left: 1.25rem;
}

.app-items a,
.app-items p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-items li,
.app-attachments li,
.app-comments li {
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
}

.app-items li:first-child,
.app-attachments li:first-child,
.app-comments li:first-child {
  border-top: 0;
  padding-top: 0;
}

.app-items p {
  margin: 0.2rem 0;
}

.att-msg {
  color: var(--color-warning);
  font-size: var(--fs-sm);
}

.muted {
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.c-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.35rem;
  font-size: var(--fs-sm);
}

.c-head time {
  color: var(--color-muted);
}

.c-body {
  word-break: break-word;
}

.app-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
}

.app-create-wrap {
  max-width: 48rem;
}

.app-create-form {
  padding: 1.25rem;
}

.form-section {
  margin: 0 0 1.75rem;
}

.form-section h2 {
  margin: 0 0 0.85rem;
  font-size: var(--fs-lg);
  color: var(--color-primary-dark);
}

.form-field {
  margin: 0 0 0.95rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.form-field input,
.form-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  line-height: 1.5;
}

.form-field textarea {
  min-height: 7rem;
  resize: vertical;
  overflow-wrap: anywhere;
}

.form-field input:focus,
.form-field textarea:focus,
.app-create-form button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.form-field input[readonly] {
  background: #f5f7fa;
  color: var(--color-muted);
}

.form-grid-2,
.form-grid-3 {
  display: grid;
  gap: 0.75rem;
}

.req {
  color: #b42318;
  font-size: var(--fs-sm);
}

.opt {
  color: var(--color-muted);
  font-weight: 500;
  font-size: var(--fs-sm);
}

.field-error {
  margin: 0.35rem 0 0;
  color: #b42318;
  font-size: var(--fs-sm);
}

.field-hint {
  margin: 0.35rem 0 0;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.form-error-list {
  list-style: disc;
  padding-left: 1.25rem;
}

.app-item-row {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.app-item-row legend {
  padding: 0 0.35rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.item-row-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0.75rem 0 0;
}

@media (min-width: 640px) {
  .form-grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid-3 {
    grid-template-columns: 1.2fr 1fr 0.8fr;
  }
}

@media (min-width: 768px) {
  .app-list-desktop {
    display: block;
  }

  .app-list-mobile {
    display: none;
  }

  .app-meta {
    grid-template-columns: repeat(3, 1fr);
  }

  .app-meta div {
    grid-template-columns: 1fr;
  }
}

.app-form-subtitle {
  margin: 1.25rem 0 0.5rem;
  font-size: var(--fs-md);
  color: var(--color-primary-dark);
}

.app-upload-form,
.app-comment-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: 0.75rem;
}

.app-upload-form input[type="file"],
.app-comment-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.app-comment-form textarea {
  min-height: 6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  resize: vertical;
  overflow-wrap: anywhere;
}

.app-attachments li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.att-name {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.btn-small {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.role-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm, 4px);
  background: #eef2f7;
  color: var(--color-primary-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.app-comments li.is-admin .role-badge {
  background: #e8f1ff;
}

.form-hint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .app-attachments li {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 상품행에 묶인 제품 이미지 — 신청 전체 첨부와 다른 자리다. 상세를 밀어내지
   않도록 thumbnail 크기로 두고, 원본 비율은 유지한다. */
.app-item-image {
  margin: 0 0 var(--space-2);
}

.app-item-image img {
  display: block;
  width: 100%;
  max-width: 14rem;
  height: auto;
  border: 1px solid var(--color-rule, #e4e9ee);
  border-radius: var(--radius-md, 8px);
}

/* 신청 전에 보는 이용 절차 안내. 레거시 목록 상단이 하던 역할을 신청 화면으로
   옮긴 것이라, 폼을 아래로 너무 밀지 않도록 이미지 높이를 제한한다. */
.app-guide {
  margin: 0 0 var(--space-5);
}

.app-guide-title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-lg);
  color: var(--color-primary-dark);
}

.app-guide-figure {
  margin: 0 0 var(--space-3);
}

.app-guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-rule, #e4e9ee);
  border-radius: var(--radius-md, 8px);
}

.app-guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

/* 이용절차는 기본 접힘. 펼치면 기존 안내 이미지가 그대로 나온다. */
.app-guide-details {
  border: 1px solid var(--color-rule, #e4e9ee);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--space-3);
}

.app-guide-details > summary {
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-primary-dark);
}

.app-guide-details[open] > summary {
  border-bottom: 1px solid var(--color-rule, #e4e9ee);
}

.app-guide-details .app-guide-figure {
  margin: 0;
  padding: var(--space-3);
}

/* 입력칸 바로 아래 붙는 보조 링크(개인통관고유부호 발급/조회 등). */
.field-cta {
  margin: 0.4rem 0 0;
}

/* ── 신청 작성 STEP 구분 ──────────────────────────────────────────
   고객이 "그냥 쭉 나열돼 혼란스럽다"고 해서 STEP 1/2 를 눈으로 끊어 준다.
   기능·필드 구성은 그대로고 구획만 세운다. 카드 안에 카드를 겹치지 않는다. */
.app-create-form .form-step {
  padding-top: 1.6rem;
  margin-top: 1.6rem;
  border-top: 2px solid var(--color-border);
}

.app-create-form .form-step:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.step-badge {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.app-create-form .form-step > h2 {
  margin: 0 0 0.35rem;
}

.step-lead {
  margin: 0 0 1.1rem;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* 국내/국외 수령주소 묶음. 어느 쪽만 적어도 된다는 걸 보이게 한다. */
.addr-group {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem 0.2rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.addr-group > legend {
  padding: 0 0.4rem;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* 관리자 전용 삭제 버튼 줄 (댓글/첨부). */
.c-actions {
  margin: 0.4rem 0 0;
}

.att-tag {
  font-size: var(--fs-sm);
}

@media (max-width: 767px) {
  .app-create-form .form-step {
    padding-top: 1.2rem;
    margin-top: 1.2rem;
  }

  .addr-group {
    padding: 0.75rem 0.75rem 0.1rem;
  }
}

/* ── 통합 신청내역 ────────────────────────────────────────────────
   고객 지적: 업무구분 칸이 좁아 글자가 세로로 쌓였다. 그 열에 폭을 주고
   줄바꿈을 막는다. */
.history-desktop .col-no { width: 4.5rem; }
.history-desktop .col-kind { width: 9.5rem; }
.history-desktop .col-status { width: 7.5rem; }
.history-desktop .col-date { width: 11rem; }
.history-desktop .col-subject { width: auto; }

.app-cell-kind,
.app-cell-status {
  white-space: nowrap;
}

.kind-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

.app-filters .filter-count {
  margin-left: 0.25rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* 모바일 — 업무구분을 제목 위 한 줄로 올린다. */
.history-mobile .m-kind {
  display: inline-block;
  margin-bottom: 0.15rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.history-mobile .m-status {
  font-weight: 700;
  color: var(--color-accent-dark);
}

.history-desktop { display: none; }
.history-mobile { display: block; }

@media (min-width: 768px) {
  .history-desktop { display: block; }
  .history-mobile { display: none; }
}

/* 접수번호는 제목 옆 보조 정보로 — 문의할 때 쓰는 값이라 계속 노출한다. */
.history-receipt {
  margin-left: 0.4rem;
  color: var(--color-primary-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 모바일에서는 번호 자리를 접수번호가 대신한다. */
.history-mobile .m-receipt {
  color: var(--color-primary-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── 신청 게시판 CTA ───────────────────────────────────────────────
   제목 옆 구석에 있어 눈에 띄지 않는다고 해서, 안내를 읽고 난 자리로 내리고
   크기를 키웠다. 모바일에서는 한 줄을 통째로 쓴다. */
.app-board-cta {
  margin: 0 0 var(--space-4);
}

.app-board-cta .btn {
  font-weight: 700;
}

@media (max-width: 767px) {
  .app-board-cta {
    margin-bottom: var(--space-3, 0.75rem);
  }

  .app-board-cta .btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}