@charset "UTF-8";
/*
―Global Reset / Base
―main-title（ページタイトル共通）
―header
―login-layout（ログインページ関連のレイアウト）
―password-layout（パスワード関連のレイアウト
―page-layout（出力・設定関連のレイアウト）
―archive-managemen(アーカイブ一覧)
―label-creation(宛名ラベルの作成)
―address-duplication(重複住所の調整)
―data-upload(一括アップロード)
―client-management(クライアント管理)
―other（その他）
―footer
*/


/* =========================================
   Global Reset / Base
   ========================================= */
:root {
  /* Colors */
  --color-bg-main: #212121;
  --color-bg-sub: #1c1c1c;
  --color-text-heading: #fff;
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #aaa;
  --color-text-tertiary: #777;
  --color-accent: #0069d2;
  --color-border-primary: #333;
  --color-border-secondary: #444;

}
html { box-sizing: border-box; }
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  ffont-family: 'Roboto', 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-bg-main);
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 500;
  min-height: 100vh;
  overflow-y: auto;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 960px) {
  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }
}
h1, h2, h3, p, ul {
  margin: 0;
  padding: 0;
}
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 0.2s;
}
a:hover {
  opacity: 0.8;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
.container {}
/* =========================================
   main-title（ページタイトル共通）
   ========================================= */
.main-title{
  color: var(--color-text-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .main-title{
    font-size: 24px;
  }
}

/* =========================================
   header
   ========================================= */
.header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%
}
.header__info {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.header__title {
  color: var(--color-text-heading);
  font-size: 24px;
  font-weight: normal;
  margin: 2px 0 4px 0;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.header__meta {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.07em;
}
.header__logo {
  width: 71px; 
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(1px); 
}
.header__logo-img {
  max-width: 100%;
  max-height: 100%;
}
@media screen and (max-width: 767px) {
  .header__title {
    font-size: 18px;
  }
}

/* =========================================
   login-layout（ログインページ関連のレイアウト）
   ========================================= */
.login-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}
.login-layout__visual {
  flex: 0 0 50%;
  width: 50%;
  order: 2;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.login-layout__main {
  flex: 0 0 50%;
  max-width: 50%;
  background-color: var(--color-bg-main);
  padding: 28px 34px;
  display: flex;
  flex-direction: column;
  height: auto;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 960px) {
  .login-layout__visual {
    display: none;
  }
  .login-layout__main {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .login-layout__main {
    padding: 30px 20px;
  }
}

/* --- login-form --- */
.login-form {
  position: relative; 
  width: 100%;
  max-width: 400px; 
  margin: 0 auto;
  padding-top: 273px;
  flex-grow: 1; 
  margin-bottom: 20px;
}
.login-form__heading {
  color: var(--color-text-heading);
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 40px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  position: absolute; 
  top: 153px;
  left: 0;
  width: calc(100% + 120px); 
  white-space: normal;
  text-align: left;
}
.login-form__note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--color-text-tertiary);
}
@media screen and (max-width: 767px) {
  .login-form {
    padding-top: 153px
  }
  .login-form__heading {
    position: static;
    top:0;
    left: auto;
    transform: none;
    width: 100%;
    margin-bottom: 40px;
    font-size: 24px;
  }
}
/* --- login-visual（ログイン右側のビジュアルエリア） --- */
.login-visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('../images/img_login-visual_bg.jpg');
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
}
.login-visual__content-group {
  position: relative;
  transform: translateY(-40px); 
}
.login-visual__img {
  max-width: 100%;
  height: auto;
  display: block;
}
.login-visual__text {
  position: absolute; 
  z-index: 6; 
  text-align: center; 
  width: 100%;
  bottom: -70px;
  left: 0;
}
.login-visual__logo-img {
  width: auto;
  margin-bottom: 4px;
}
.login-visual__version {
  font-size: 18px;
  margin: 0;
  color: #555;
  font-weight: 300;
}

/* =========================================
   password-layout（パスワード関連のレイアウト
   ========================================= */
.password-layout{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 28px 34px;
}
.password-layout__main{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 64px 0;
}
.password-layout__text-group{
  display: flex;
  flex-direction: column;
  gap:35px;
  text-align: center;
  margin-bottom: 35px;
}
.password-layout__wrapper{
  width: 100%;
  max-width: 400px; 
  margin: 0 auto;
}
.password-layout__wrapper-m{
  width: 100%;
  max-width: 318px; 
  margin: 0 auto;
}
.password-layout__description{
  line-height: 1.4;
  font-size: 15px;
}
.password-layout__expired{
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.password-layout__image{
  display: block;
}

/* =========================================
   page-layout（出力・設定関連のレイアウト）
   ========================================= */
.page-layout{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 28px 34px;
}
.page-contents{
  padding: 64px 0 100px;
}
/* =========================================
   archive-managemen(アーカイブ一覧)
   ========================================= */
.archive-management {
  text-align: center;
}
.archive-management__inner{}
/* --- archive-search-form （アーカイブ検索エリア） --- */
.archive-search-form{
  max-width: 760px;
  margin: 0 auto;
  margin-bottom: 35px;
}
.archive-search-form__period{
  display: flex;
  align-items: center;
  gap: 10px;
}
.archive-search-form__select--date {
  width: 48%;
}
.archive-search-form__separator{
  width: 4%;
  text-align: center
}
.archive-search-form__btn{
  width: 24%
}
.archive-search-form__btn .btn{
  height: 44px;
}
/* --- archive-list （検索結果エリア） --- */
.archive-list {
  text-align: left;
}
.archive-list__header{
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .archive-search-form__btn{
    width: 50%
  }
  .archive-search-form__select--date {
    flex: 1;
  }
  .archive-list__header{
    flex-direction: column;
    align-items: flex-start;
  }
  .archive-list__header .pagination{
    margin-top: 20px;
  }
}

/* =========================================
   label-creation(宛名ラベルの作成)
   ========================================= */
.label-creation {}
.label-creation__inner {}
/* --- preview-actions （プレビューボタン群） --- */
.preview-actions{
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  width: 100%;
}
.preview-actions .btn{
  max-width: 230px;
}
/* --- config-grid （宛名ラベル構成エリア） --- */
.config-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  align-items: start;
}
.config-box {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  padding: 24px;
}
.config-box--left{
  padding-bottom: 55px
}
.config-box--right{}

@media screen and (max-width: 767px) {
  .preview-actions{
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
  }
  .preview-actions .btn{
    max-width: 100%;
  }
  .config-grid {
    grid-template-columns: 1fr;
  }
}
/* --- label-loading （ローディングエリア） --- */
.label-loading {
  background: #262626;
  border-radius: 15px;
  padding: 45px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.label-loading__status{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.label-loading__status-text {
  color: #3E7CFC;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: bold;
}
.label-loading__image {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(#1F55C4 30%, #383D43 0);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  position: relative;
}
.label-loading__image-inner {
  width: 85px;
  height: 85px;
  background: #1e1e1e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.label-loading__content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.label-loading__content-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 8px;
}
.label-loading__progress-bar {
  flex: 1;
  height: 8px;
  background: #333;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.label-loading__progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}
.label-loading__progress-meta {
  text-align: right;
  padding-right: 140px;
}
.label-loading__progress-text {
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* =========================================
   address-duplication(重複住所の調整)
   ========================================= */
.address-duplication{}
.accordion__title-meta{
  color: var(--color-text-tertiary);
  font-size: 15px;
  font-weight: normal;
  margin-left: 1em
}

/* =========================================
   data-upload(一括アップロード)
   ========================================= */
.data-upload {}
.data-upload__inner{}
/* --- upload-section （アップロードエリア） --- */
.upload-section {
  margin-inline: auto;
  width: 100%;
  max-width: 1050px;
  background-color: #262626;
  border-radius: 14px;
  padding: 45px 96px;
}
.upload-section__fields {
  display: flex;
  gap: 30px;
}
.upload-section__fields .field-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.upload-section__fields .field-item__label {
  padding-left: 2px;
  white-space: nowrap;
}
.upload-section__fields .field-item .form-select {
  flex: 1;
  min-width: 0;
}
@media screen and (max-width: 1040px) {
  .upload-section {
    padding: 40px;
  }
  .upload-section__fields .field-item{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}
@media screen and (max-width: 767px) {
  .upload-section__fields{
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}
.drop-zone {
  height: 260px;
  border: 1px dashed var(--color-border-secondary);
  border-radius: 5px;
  background-color: #242424;
  padding: 40px;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.drop-zone__content{
  width: 100%;
  margin-bottom: 20px;
  border-radius: 4px;
}
.drop-zone__icon{
  margin-bottom: 12px
}
.drop-zone__text{
  font-size: 18px;
  margin-bottom: 4px;
}
.drop-zone__subtext{
  color: var(--color-text-tertiary);
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.6
}
.drop-zone__btn{
  max-width: 230px;
  margin-inline: auto;
}
/* --- .preview-table を持っている時だけの特別ルール --- */
.drop-zone:has(.preview-table) {
  padding: 16px; /* テーブル表示時は余白を絞る */
  height: 260px; /* 高さを固定してスクロールを発生させる */
  display: block; /* 中央揃えを解除 */
}
.drop-zone:has(.preview-table) .drop-zone__content {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.drop-zone:has(.preview-table) .table-scroll-container {}

/* ファイルエリアにドロップする際の見え方 */
.drop-zone.is-dragover:hover {
  background: linear-gradient(150deg,#222f3b 0%, #0a233a 100%);
  border: 1px solid #365d84;
  border-color: #365D84; 
  box-shadow: inset 0 0 20px rgba(31, 85, 196, 0.2);
}
.drop-zone.is-dragover:hover .drop-zone__icon{
  filter: brightness(0) saturate(100%) invert(70%) sepia(69%) saturate(236%) hue-rotate(178deg) brightness(87%) contrast(93%);
}

/* --- upload-progress （プログレスエリア） --- */
.upload-progress {
  width: 100%;
  border-top: 1px solid var(--color-border-primary);
  padding-top: 40px;
}
.upload-progress__header {
  display: flex;
  justify-content: space-between;
}
.upload-progress__count {
}
.upload-progress__refresh {
  color: #e65967;
  text-decoration: underline;
  cursor: pointer;
}
.upload-progress__list {
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  overflow: hidden;
}
.upload-item {
  display: flex;
  align-items: center;
  padding: 22px 20px;
  border-bottom: 1px solid var(--color-border-primary);
  gap: 20px;
}
.upload-item:last-child {
  border-bottom: none;
}
.upload-item__name {
  flex: 0 0 200px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-item__status {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
}
.upload-item__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
}

/* 読込中アニメーション */
.upload-item__icon.is-loading {
  animation: spin 2s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.upload-item__icon.is-completed {}
.upload-item__info {
  flex: 1;
}
.upload-item__text {
  font-size: 13px;
  margin-bottom: 4px;
}
.upload-item__text.is-uploading,
.upload-item__text.is-converting{ color: var(--color-text-secondary); }
.upload-item__text.is-completed { color: #1eb163; }

.upload-item__progress-bar {
  width: 100%;
  height: 6px;
  background-color: #37393d;
  border-radius: 10px;
  overflow: hidden;position: relative;
}
.upload-item__progress-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 10px;
  transition: width 0.3s ease;
}
.upload-item__progress-fill.is-success {
  background-color: #1eb163;
}
.upload-item__meta {
  display: flex;
  align-items: center;
  gap: 15px;
}
.upload-item__percent {
  font-size: 14px;
  width: 40px;
  text-align: right;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.upload-item__close {
  width: 32px;
  height: 32px;display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-border-primary);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-size: 24px;
  cursor: pointer;
  transition: color 0.2s;
}
.upload-item__close:hover {
  color: #fff;
  border: 1px solid #aaa;
}
.upload-item__close:disabled{
  background: #37393D;
  color: #5E5E5E;
  border: none;
}
.is-uploading .upload-item__status,
.is-converting .upload-item__status {
  margin: 0 20px;
}
.is-uploading .progress-container,
.is-converting .progress-container{
  flex: 1;
}
.is-uploading .progress-bar-bg,
.is-converting .progress-bar-bg {
  background: #383d43;
  height: 6px;
  border-radius: 10px; 
}
.is-uploading .progress-bar-fill,
.is-converting .progress-bar-fill {
  background: var(--color-accent);
  height: 100%;
  border-radius: 10px;
}
/* 結果表示用のスタイル */
.is-result .upload-item__status {
  flex: 1;
  display: flex;
  justify-content:flex-start;
}
.status-message {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.status-message.is-error { color: #E65967; }
.status-message.is-success { color: var(--color-text-secondary); }

/* --- error-info （タスク実行エラーのメッセージエリア） --- */
.error-info{
  background: var(--color-bg-sub);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  padding: 22px 20px;
}
.error-info__title{
  color: var(--color-text-tertiary);
}
.error-info__text{
  color: var(color-text-primary);
  font-size: 14px;
  line-height: 1.8
}
@media screen and (max-width: 1040px) {
  .is-result .upload-item__status {
    justify-content: flex-start;
  }
  .is-uploading .upload-item__status,
  .is-converting .upload-item__status {
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    width: 100%;
  }
  .is-uploading .upload-item__percent,
  .is-converting .upload-item__percent {
    order: 3; /* バーの下へ */
    align-self: flex-end;
  }
  .upload-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 16px 16px;
    gap: 12px;
    position: relative;
  }
  .upload-item__name {
    flex: none;
    width: auto;
    font-size: 15px;
    order: 1;
  }
  .upload-item__status {
    order: 2;
    width: 100%;
    margin-bottom: 4px;
  }
  .upload-item__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
  }
  .upload-item__progress-bar {
    order: 4;
    width: 100%;
    height: 6px;
    margin: 4px 0;
  }
  .upload-item__percent {
    right: 0;
    bottom: -18px;
    text-align: right;
    font-size: 13px;
    color: var(--color-text-secondary);
  }
  .upload-item__meta {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    order: 5;
  }
}

/* ==========================================
   client-management(クライアント管理)
   ========================================== */
/* --- filter-section （検索エリア）--- */
.filter-section {
  width: 100%;
  border-radius: 8px;
}
.filter-section__container {
  display: flex;
  align-items: flex-end;
  gap: 32px;
}
.filter-section__group {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}
.filter-section__group--input,
.filter-section__group--radio,
.filter-section__group--btn{
  width: 100%;
}
.filter-section__group--radio {
  max-width: 214px;
  padding-left: 20px;
}
.filter-section__group--btn{
  max-width: 194px;
}
.filter-section__group--btn .btn{
  height: 44px;
}
.filter-section__label {
  font-weight: bold;
  white-space: nowrap;
}
.filter-section__controls{
  display: flex;
  align-items: center;
  gap: 16px;
}
.filter-section__controls-wrap {
  position: relative;
  width: 49.25%;
}
.filter-section__bridge {
  width: 45px;
  font-size: 15px;
  white-space: nowrap;
  text-align: center;
}
.radio-group {
  /*width: 194px; 
  min-width: 194px;*/
  display: flex;
  align-items: center;
  gap: 24px;
  background-color: var(--color-bg-sub);
  border: 1px solid #333;
  border-radius: 5px;
  height: 44px;
  padding: 0 22px;
  position: relative;
}
.radio-group::after{
  content: "";
  position: absolute;
  background: #333;
  width: 1px;
  height: 100%;
  left: -25px
}
.radio-group__item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .filter-section__container {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .filter-section__group--radio,
  .filter-section__group--btn {
    max-width: none;
    width: 100%;
  }
  .filter-section__group--radio {
    padding-left: 0;
  }
  .radio-group::after {
    display: none;
  }
  .filter-section__controls {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-section__controls-wrap {
    width: 100%;
  }
  .filter-section__bridge {
    padding: 4px 0;
  }
}
/* --- client-list（クライアント管理 入力件数・表示件数） --- */
.client-list {
  width: 100%;
  padding-top: 24px;
}
.client-list__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
@media screen and (max-width: 767px) {
  .client-list__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .client-list__header .pagination{
    margin-top: 20px;
  }
}
.client-list__count-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.client-list__title {
  font-size: 20px;
  font-weight: normal;
  margin: 0;
}
.client-list__count {
  font-size: 14px;
  color: #888;
}
.client-list__display-options {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-tertiary);
}
.client-list__display-label{
  margin-right: 8px
}
.client-list__display-number{
  background: transparent;
  border: none;
  color: #fff;
  height: 32px;
  cursor: pointer;
  border-radius: 4px;
}
.client-list__display-number.is-active,
.client-list__display-number:hover{
  background-color: #333;
}
/* --- edit-section （一覧エリア） --- */
.edit-section {
  width: 100%;
}
.edit-form {
  border: 1px solid #333;
  border-radius: 10px;
  padding: 25px;
}
.edit-form__row {
  display: flex;
  margin-bottom: 25px;
}
.edit-form__row:last-child{
  margin-bottom: 0;
}
.edit-form__row--top {
  align-items: flex-start;
}
.edit-form__row--frame {
  border: 1px solid #333;
  border-radius: 10px;
  padding: 25px;
}
.edit-form__row--frame .edit-form__label-group {
  width: 136px;
  padding-top: 15px;
}
.edit-form__label-group {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 16px;
  gap: 12px;
}
.edit-form__label {
  font-size: 14px;
  font-weight: bold;
}
.edit-form__control {
  flex-grow: 1;
}
.edit-form__control--multi {
  display: flex;
  gap: 24px;
}
/* badge-status（必須・任意） */
.badge-status {
  width: 42px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  border-radius: 4px;
  color: #fff;
}
.badge-status--required { background-color: #d42246; }
.badge-status--optional { background-color: #0c6849; }
/* check-group */
.edit-form__control .check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 30px;
  padding: 4px 0 0 18px;
}
.edit-form__control .check-group__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  cursor: pointer;
}
/* input-unit (ラベル付き入力) */
.edit-form__control .input-unit {
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: 12px;
  background-color: var(--color-bg-main);
  border: 1px solid #333;
  padding: 0 0 0 16px;
  border-radius: 5px;
  height: 44px;
}
.edit-form__control .input-unit__label {
  width: 100%;
  max-width: 122px;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
}
.edit-form__control .input-unit .form-select{
  flex-grow: 1;
}

/* 設定値エリア全体の枠組み */
.setting-field {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.setting-field__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.setting-field__actions{
  width: 100%;
  max-width: 230px;
}
.setting-item {
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: 12px;
  width: 100%;
  position: relative
}
.setting-item__field{
  display: flex;
  flex-grow: 1;
  align-items: center;
  border: 1px solid #333;
  border-radius: 5px;
}
.setting-item__label {
  width: 100%;
  max-width: 230px;
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 16px;
}
.setting-item__content {
  flex-grow: 1;
  display: flex;
  background-color: transparent;
}
.setting-item__field .form-textarea {
  height: 100%; 
  min-height: 56px;
  color: var(--color-text-secondary);
  padding: 16px;
  display: block;
  outline: none;
  overflow: hidden;
  resize: vertical;
}
.setting-item__delete {
  flex-shrink: 0;
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10
}
@media screen and (max-width: 960px) {
  .edit-form__control .input-unit__label{
    width: auto;
    max-width: auto;
  }
}
@media screen and (max-width: 768px) {
  .edit-form,
  .edit-form__row--frame {
    padding: 15px;
  }
  .edit-form__row {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 20px;
    gap: 8px;
  }
  .edit-form__label-group {
    width: 100% !important;
    margin-right: 0;
    justify-content: flex-start;
    gap: 8px;
  }
  .edit-form__control--multi {
    flex-direction: column;
    gap: 12px;
  }
  .edit-form__control .input-unit {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
  }
  .edit-form__control .input-unit__label {
    text-align: left;
    max-width: none;
    margin-bottom: 4px;
  }
  .setting-field__actions {
    max-width: none;
  }
  .setting-field__items {
    gap: 12px;
  }
  .setting-item {
    flex-direction: column;
    align-items: stretch;
  }
  .setting-item__field {
    flex-direction: column;
    align-items: stretch;
  }
  .setting-item__label {
    max-width: none;
    padding: 16px;
  }
  .setting-item__delete {
    padding-top: 7px;
  }
  /* 下部ボタンエリア */
  .bottom-btn-area__left {
    order: 2; /* 「戻る」を下に */
  }
}
/* ドロップゾーン（クライアント管理） */
.client-management .drop-zone {
  display: flex;
  justify-content: center;
  align-items: center;
}
.client-management .drop-zone--changed-preview{
  border: 1px solid var(--color-border-secondary);
  background-color: var(--color-bg-sub);
}
.client-management .upload-section {
  width: 100%;
  max-width: none;
}
/* --- edit-canvas（データ入力エリア）--- */
.edit-canvas {
  background-size: 24px 24px;
  min-height: 100vh;
}
/* 主要データ・一時データ */
.definition-section {
  width: 100%;
}
.definition-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}
.definition-row__label {
  width: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}
.definition-row__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-grow: 1;
}
.data-badge {
  width: 100%;
  max-width: 217px;
  height: 44px;
  background: #1a1a1b;
  padding: 0 12px 0 18px;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.data-badge::before{
  content: "";
  width: 5px;
  height: 36px;
  border-radius: 2px 0px 0px 2px;
  background: var(--color-accent);
  position: absolute;
  top:4px;
  left: 4px;
}
.data-badge--temporary {
  justify-content: space-between;
}
/*一時データの×アイコン*/
.data-badge__close {
  cursor: pointer;
  padding: 0;
}
.definition-add-form {
  width: 294px;
  display: flex;
  align-items: center;
  position: relative;
}
.definition-add-form__input {
  width: 100%;
  color: #fff;
  padding: 0 10px;
  font-size: 14px;
  outline: none;
}
.definition-add-form__btn {
  position: relative;
  top:0;
  right: 0;
}
.btn-add.definition-add-form__btn{
  border-radius: 0 5px 5px 0
}
@media screen and (max-width: 767px) {
  .definition-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }
  .definition-row__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .definition-row__items .data-badge {
    flex: 0 0 calc(50% - 4px) ;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px 4px;
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
  }
  .definition-add-form {
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    margin-top: 4px; 
  }
}
.flow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.flow-container__note{}
/* --- 出力先・出力先--- */
.process-escription{
  display: flex;
  align-items: center;
  gap:24px;
}
.process-escription .line-output,
.process-escription .line-input{
  color: var(--color-text-tertiary);
  font-size: 14px;
  font-weight: normal;
}
.process-escription .line-output span,
.process-escription .line-input span{
  width: 12px;
  height: 12px;
  display: inline-block;
  border: 1px solid #D42246;
  border-radius: 2px;
  margin-right: 8px;
}
.process-escription .line-input span{
  border: 1px solid #0F6A57;
}
.process-escription .line-input{}
.flow-wrap{
  flex-grow: 1;
  border: 1px solid #333;
  border-radius: 6px 0 0 6px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.process-card {
  display: flex;
  width: 100%;
  margin-bottom: 0;
  position: relative;
}
.flow-wrap .process-card__body{
  border: none;
  border-bottom: 1px dotted #333;
}
.process-card__body {
  flex-grow: 1;
  border: 1px solid #333;
  padding: 20px 25px;
  border-radius: 6px 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.process-card__body-inner{}
.process-card__sidebar {
  position: absolute;
  right: 0;
  top:0;
  height: 100%;
  width: 83px;
  border-radius: 0 6px 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.process-card__headers { display: flex; gap: 110px; margin-bottom: 2px; }
.process-card__header-item { font-size: 11px; color: var(--color-text-tertiary); }
.process-card__content { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  flex-wrap: wrap;
}
.process-card__content { 
  display: flex; 
  align-items: center; 
  gap: 18px; 
  flex-wrap: wrap;
}
.process-card__item{
  display: flex;
  align-items: center;
  gap:10px;
  position: relative;
}
.process-card__item--border-right{
  border-right: 1px solid #333;
  padding-right: 18px;
}
.process-card__content--id .process-card__item{
  align-items: flex-end; 
}
.process-card__item .icon-arrow {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  font-size: 18px;
}
.process-card__content--id .process-card__item .icon-arrow {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  font-size: 18px;
  margin-top: 12px;
}
.process-card__sub-text { 
  position: absolute;
  bottom: -22px;
  left: 0;
  font-size: 13px; 
  color: var(--color-text-tertiary); 
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sub-text-spacer{
  padding-bottom: 20px;
}
.process-card__item--group {
  flex-direction: column;
  align-items: flex-start;
  gap:8px;
}
.process-card__item-select.form-select {
  width: 174px;
}
.process-card__item-input{
  width: 135px;
}
.process-card .icon-action{
  width: 42px;
  height: 42px;
}
.flow-add-wrap {
  position: relative;
  margin-bottom: 12px;
  padding: 16px 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
}
.flow-add-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: 0;
  border-left: 1px dotted #444;
  z-index: 1;
}
.flow-add-wrap--flush {
  padding-top: 0;
  margin-bottom: 0;
}
.btn-add-step {
  position: relative;
  z-index: 2; 
  background: #444;
  border: none;
  color: var(--color-text-primary);
  width: 250px;
  height: 40px;
  border-radius: 4px;
  line-height: 1;
  cursor: pointer;
}
.condition-row { display: flex; align-items: center; gap: 12px; }
.btn-condition {
  padding: 10px 25px;
  border-radius: 20px;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  min-width: 174px;
  cursor: pointer;
}
.btn-condition--or { background: #D42246; }
.btn-condition--not { background: #5A6077; }

@media screen and (max-width: 767px) {
  .flow-container__note{
    order: 2;
    margin-bottom: 16px
  }
  .process-card__body {
    width: 100%;
    height: 96px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .process-card__sidebar {
    top: -68px;
    right: -16px;
  }
  .process-card__content {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    gap: 12px;
  }
  .process-card__item {
    flex-shrink: 0 !important;
    display: flex;
    align-items: center;
  }
  .process-card__item-select {
    width: 180px !important;
    min-width: 180px !important;
  }
  .process-card__body::-webkit-scrollbar {
    height: 6px;
  }
  .process-card__body::-webkit-scrollbar-thumb {
    background-color: var(--color-border-secondary);
    border-radius: 10px;
  }
  .process-card__body::-webkit-scrollbar-track {
    background: transparent;
  }
  .process-card__body--multi-or,
  .process-card__body--multi-not {
    width: 100%;
    height: auto
  }
  .process-card__body--multi-or .process-card__content {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    text-align: center
  }
  .process-card__body--multi-or .process-card__item:first-child,
  .process-card__body--multi-not .process-card__item:first-child {
    position: sticky;
    left: 0;
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    padding: 0 15px 15px;
    box-sizing: border-box;
  }
  .process-card__body--multi-or .process-card__sub-text,
  .process-card__body--multi-not .process-card__sub-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    text-align: center;
    margin: 8px auto 0;
    bottom: -8px;
  }
  .process-card__body--multi-or .process-card__item:not(:first-child) {
    display: inline-flex;
    vertical-align: middle;
    flex: none;
    gap: 8px;
    padding: 0 12px;
    white-space: nowrap; 
  }
  .process-card__body--multi-or .process-card__content {
    white-space: nowrap;
  }
  .process-card__body--multi-or .process-card__item:first-child * {
    white-space: normal;
  }

}
.static-text { font-size: 13px; color: var(--color-text-secondary); }

/* --- label-template （宛名ラベル雛形）--- */
.label-template {}
.label-template__header {
  margin-bottom: 30px;
}
.template-selector {
  display: flex;
  align-items: center;
  gap: 15px;
}
.template-selector__label {
  display: flex;
  justify-content: space-between;
  width: 150px;
  white-space: nowrap;
}
.template-selector__controls {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.template-selector__controls .form-select{
  width: 100%;
  max-width: 363px;
}
.template-selector__controls .btn{
  max-width: 194px;
  height: 44px;
}
.label-template__main {
  display: flex;
  gap: 30px;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 25px;
}
/* mapping-panel (Left Side) */
.mapping-panel {
  flex: 1 1 600px;
}
.mapping-panel__title {
  font-size: 16px;
  padding-bottom: 25px;
  margin-bottom: 25px;
  font-weight: normal;
  border-bottom: 1px solid #333;
}
.mapping-item {
  display: flex;
  max-width: 600px;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px;
}
.mapping-item__label {
  flex: 0 0 100px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Status Dots */
.status-dot { width: 11px; height: 11px; border-radius: 50%; }
.status-dot--blue { background: var(--color-accent); }
.status-dot--green { background: #0F6A57; }
.status-dot--red { background: #D42246; }
.status-dot--orange { background: #D68205; }
.status-dot--purple { background: #813CCF; }

/* label-preview (Right Side) */
.label-preview {
  width: 100%;
  max-width: 650px;
  background-color: var(--color-bg-sub);
  border-radius: 5px;
  padding: 25px;
  display: flex;
  justify-content: center;
}
.label-preview__sheet {
  background-color: #fff;
  width: 100%;
  padding: 25px;
  font-family: sans-serif;
  color: #333;
}
.label-preview__top-section {
  display: flex;
  margin-bottom: 10px;
}
.post-stamp-container {
  flex: 0 0 140px;
  display: flex;
  justify-content: center;
  margin-right: 28px;
  padding-top:24px;
  position: relative;
}
.post-stamp-container::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 140px;
  height: 150px;
  border: 1px dashed #ccc;
}
.post-stamp {
  width: 100px;
  height: 100px;
  border: 1.5px solid #000;
  border-radius: 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.post-stamp__office {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  font-size: 10px;
  margin: 0 0 3px;
  padding: 2px 0;
}
.post-stamp__content {
  border-top: 1px solid #000;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  padding-top: 4px 
}
.address-container {
  flex: 1;
}
.address-container__row {
  display: flex;
  gap: 0;
}
.address-lines__add { 
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.address-lines__name {
  font-size: 18px;
  text-align: center;
  margin: 10px 0;
}
.label-preview__divider {
  border: none;
  border-top: 1.5px solid #000;
  margin: 8px 0;
}
.edit-target {
  border: 1px dashed #aaa;
  padding: 4px 8px;
  position: relative;
  font-size: 14px;
  display: block;
}
/* 各種カラー背景 */
.edit-target--zip { border-color: #3182ce; width: fit-content; margin-bottom: 8px }
.edit-target--blue { background: #BFDFFF; flex: 1; text-align: right; margin-bottom: 8px}
.edit-target--green { background: #C8EBE3; text-align: right; }
.edit-target--pink { background: #F6DAE0; text-align: right; }
.edit-target--orange { background: #FFF4D1; margin-bottom: 4px; }
.edit-target--purple { background: #EAE0F5; line-height: 1.6; }

.label-preview__bottom-section { display: flex; gap: 10px; align-items: stretch; }
.label-preview__bottom-details { flex: 1; }
.qr-code-area {
  flex: 0 0 80px;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-align: center;
}
@media screen and (max-width: 960px) {
  .template-selector {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .template-selector__controls {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .template-selector__controls .form-select {
    flex: 1;
  }
  .template-selector__controls .btn {
    padding: 0 16px;
  }
  .label-template__main {
    flex-direction: column;
    gap: 30px;
  }
  .mapping-panel {
    width: 100%;
    flex: 1;
  }
  .mapping-item__label {
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .label-preview {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 10px;
  }
  .label-preview__sheet {
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 15px;
    box-sizing: border-box;
  }
}

/* =========================================
   other（その他）
   ========================================= */
/* 非活性カラー */
.color-inactive{
  color: var(--color-text-tertiary);
}
/* 水平線スタイル */
.divider {
  border: none;
  border-top: 1px solid var(--color-border-primary);
}
/* 3分割のコンテナ */
.lcr-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}
.lcr-layout__left {
  justify-self: start;
  display: flex;
  align-items: center;
}
.lcr-layout__center {
  justify-self: center;
  display: flex;
  align-items: center;
}
.lcr-layout__right {
  justify-self: end;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .lcr-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto; 
  }
  .lcr-layout__left,
  .lcr-layout__center,
  .lcr-layout__right {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .lcr-layout__center {
    padding: 5px 0;
  }
}
/* 余白 */
.stack-2xl { margin-bottom: 50px; }
.stack-xl { margin-bottom: 40px; }
.stack-l { margin-bottom: 35px; }
.stack-m { margin-bottom: 24px; }
.stack-sm { margin-bottom: 18px; }
.stack-s { margin-bottom: 16px; }
.stack-xs { margin-bottom: 6px; }
.stack-xxs { margin-bottom: 4px; }

.flex-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.gap-l {
  gap: 24px;
}
.gap-m {
  gap: 16px;
}
.gap-s {
  gap: 8px;
}
/* その他 */
.flex-row--grow > * { flex: 1; }
.flex-row--wrap { flex-wrap: wrap; }
.flex-row--between{ justify-content: space-between}
.flex-row--end{ justify-content:flex-end}
.flex-row--align-center { align-items: center;
}
.flex-row--align-start {
  align-items: flex-start;
}
.flex-row--align-end {
  align-items: flex-end;
}
.flex-row--align-stretch {
  align-items: stretch;
}
.flex-row--align-baseline {
  align-items: baseline;
}
.data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #333;
}
.flex-column {
  display: flex;
  flex-direction: column;
}

/* =========================================
   footer
   ========================================= */
.footer {
  margin-top: auto;
}
.footer__copyright{
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.07em;
}
@media screen and (max-width: 767px) {
  .footer{
    text-align: center
  }
}