.cio-name-preview {
   /* ==================================================
     CIO Color
     基準色を変更するとページ全体へ反映
  ================================================== */
   --cio-purple: #7a00df;
   --cio-purple-dark: #6200b3;
   --cio-purple-deep: #4d008d;

   --cio-purple-light: #f7efff;
   --cio-purple-border: #dfc2f7;

   --cio-purple-rgb: 122, 0, 223;

   --text: #222;
   --sub-text: #606060;
   --border: #dedede;

   --error: #c62828;
   --error-bg: #fff1f1;

   /*
   * 背景画像上の名前位置
   * 画像確定後はここだけ微調整
   */
   --preview-name-left: 62%;
   --preview-name-top: 57%;
   --preview-name-width: 65%;

   max-width: 1100px;

   margin: 40px auto;
   padding: 0 20px;

   color: var(--text);

   font-family:
     -apple-system,
     BlinkMacSystemFont,
     "Hiragino Kaku Gothic ProN",
     "Yu Gothic",
     Meiryo,
     sans-serif;

   font-size: 16px;
 }


 .cio-name-preview * {
   box-sizing: border-box;
 }


 /* ==================================================
   Header
================================================== */
 .cio-name-preview__header {
   position: relative;
   overflow: hidden;
   margin-bottom: 24px;
   padding: 14px 20px 16px;
   border-radius: 14px;
   text-align: center;
   background:
     linear-gradient(135deg,
       var(--cio-purple-deep) 0%,
       var(--cio-purple) 52%,
       var(--cio-purple-dark) 100%);
   color: #fff;
   box-shadow:
     0 7px 20px rgba(var(--cio-purple-rgb), 0.16);
 }

 .cio-name-preview__header::before {
   content: "";
   position: absolute;
   inset: 0;
   opacity: 0.14;
   background-image:
     linear-gradient(45deg, rgba(255, 255, 255, .18) 25%, transparent 25%),
     linear-gradient(-45deg, rgba(255, 255, 255, .18) 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .18) 75%),
     linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .18) 75%);
   background-size: 20px 20px;
   background-position: 0 0, 0 10px, 10px -10px, -10px 0;
   pointer-events: none;
 }

 .cio-name-preview__anniversary {
   position: relative;
   z-index: 1;
   margin: 0 0 2px !important;
   color: #fff !important;
   font-size: 14px !important;
   font-weight: 600 !important;
   line-height: 1.4 !important;
   letter-spacing: .04em;
 }

 .cio-name-preview__title {
   position: relative;
   z-index: 1;
   margin: 0 0 4px !important;
   color: #fff !important;
   font-size: 28px !important;
   font-weight: 800 !important;
   line-height: 1.35 !important;
   letter-spacing: .03em;
 }

 .cio-name-preview__description {
   position: relative;
   z-index: 1;
   margin: 0 !important;
   color: rgba(255, 255, 255, .92) !important;
   font-size: 13px !important;
   line-height: 1.55 !important;
 }


 /* ==================================================
   Layout
================================================== */
 .cio-name-preview__container {
   display: grid;

   grid-template-columns:
     minmax(0, .95fr) minmax(0, 1.05fr);

   gap: 28px;
 }


 .cio-name-preview__panel {
   padding: 30px;

   border:
     1px solid var(--border);

   border-radius: 16px;

   background: #fff;
 }


 .cio-name-preview__panel-title {
   margin: 0 0 22px;

   color: var(--cio-purple);

   font-size: 21px;

   font-weight: 700;

   line-height: 1.5;
 }


 /* ==================================================
   Input
================================================== */
 .cio-name-preview__input-line {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   gap: 12px;
   align-items: center;
 }


 .cio-name-preview__label {
   display: block;

   margin: 0;

   font-size: 16px;

   font-weight: 700;

   white-space: nowrap;
 }


 .cio-name-preview__input {
   width: 100%;
   height: 58px;

   padding: 0 15px;

   border:
     1px solid #aaa;

   border-radius: 9px;

   background: #fff;

   color: var(--text);

   font-size: 18px;

   transition:
     border-color .2s,
     box-shadow .2s;
 }


 .cio-name-preview__input:focus {
   border-color:
     var(--cio-purple);

   box-shadow:
     0 0 0 3px rgba(var(--cio-purple-rgb), .14);

   outline: none;
 }


 .cio-name-preview__input.is-error {
   border-color:
     var(--error);
 }


 .cio-name-preview__input::placeholder {
   color: #aaa;
 }


 /* ==================================================
   Counter
================================================== */
 .cio-name-preview__counter {
   display: flex;

   justify-content: flex-end;

   gap: 4px;

   margin-top: 8px;

   color: #777;

   font-size: 14px;

   line-height: 1.5;
 }


 .cio-name-preview__counter.is-limit {
   color: var(--error);

   font-weight: 700;
 }


 /* ==================================================
   Action Buttons
================================================== */
 .cio-name-preview__actions {
   display: grid;

   gap: 10px;

   margin-top: 18px;
 }


 .cio-name-preview__button,
 .cio-name-preview__copy-button {
   width: 100%;

   min-height: 56px;

   padding: 11px 20px;

   border: 0;

   border-radius: 9px;

   font-size: 16px;

   font-weight: 700;

   cursor: pointer;

   transition:
     background .2s,
     border-color .2s,
     color .2s,
     transform .1s,
     opacity .2s;
 }


 /* 完成イメージを表示 */
 .cio-name-preview__button {
   background:
     var(--cio-purple);

   color: #fff;

   box-shadow:
     0 6px 15px rgba(var(--cio-purple-rgb), .20);
 }


 .cio-name-preview__button:hover {
   background:
     var(--cio-purple-dark);
 }


 /* 印字OK文字列をコピー */
 .cio-name-preview__copy-button {
   border:
     2px solid var(--cio-purple);

   background: #fff;

   color:
     var(--cio-purple);
 }


 .cio-name-preview__copy-button:hover:not(:disabled) {
   background:
     var(--cio-purple-light);

   border-color:
     var(--cio-purple-dark);

   color:
     var(--cio-purple-dark);
 }


 .cio-name-preview__copy-button:disabled {
   border-color: #d6d6d6;

   background: #eee;

   color: #9a9a9a;

   cursor: not-allowed;

   box-shadow: none;
 }


 .cio-name-preview__button:active,
 .cio-name-preview__copy-button:active:not(:disabled) {
   transform:
     translateY(1px);
 }


 .cio-name-preview__copy-guide {
   margin:
     9px 0 0;

   color: #000;

   font-size: 13px;

   font-weight: 600;

   line-height: 1.7;
 }


 /* ==================================================
   Error
================================================== */
 .cio-name-preview__error {
   display: none;

   margin-top: 14px;

   padding: 13px 14px;

   border-radius: 8px;

   background:
     var(--error-bg);

   color:
     var(--error);

   font-size: 14px;

   font-weight: 500;

   line-height: 1.7;
 }


 /* ==================================================
   Rules
================================================== */
 .cio-name-preview__rules {
   margin-top: 20px;

   padding: 20px;

   border:
     1px solid var(--cio-purple-border);

   border-radius: 10px;

   background:
     var(--cio-purple-light);
 }


 .cio-name-preview__rules-title {
   margin: 0 0 12px;

   color:
     var(--cio-purple);

   font-size: 16px;

   font-weight: 700;
 }


 .cio-name-preview__rules-list {
   margin: 0;

   padding-left: 1.5em;

   color: #000;

   font-size: 14px;

   line-height: 1.9;
 }


 .cio-name-preview__symbols {
   display: flex;

   flex-wrap: wrap;

   gap: 6px;

   margin: 8px 0 6px;
 }


 .cio-name-preview__symbol-button {
   display: inline-flex;

   align-items: center;

   justify-content: center;

   min-width: 38px;

   min-height: 38px;

   padding: 5px 8px;

   border: 1px solid var(--cio-purple-border);

   border-radius: 7px;

   background: #fff;

   color: #000;

   font-size: 17px;

   font-weight: 700;

   line-height: 1;

   cursor: pointer;
 }


 .cio-name-preview__symbol-button:hover,
 .cio-name-preview__symbol-button:focus-visible {
   border-color: var(--cio-purple);

   background: var(--cio-purple-light);

   outline: none;
 }


 .cio-name-preview__symbol-button:active {
   transform: translateY(1px);
 }


 .cio-name-preview__symbol-status {
   display: block;

   min-height: 1.7em;

   margin-top: 4px;

   color: var(--cio-purple-dark);

   font-size: 13px;

   font-weight: 600;
 }


 /* ==================================================
   Preview
================================================== */
 .cio-name-preview__preview-panel {
   display: flex;

   flex-direction: column;
 }


 .cio-name-preview__preview {
   display: flex;

   flex: 1;

   align-items: center;

   justify-content: center;

   min-height: 340px;

   padding: 30px;

   border-radius: 12px;

   background:
     linear-gradient(135deg,
       var(--cio-purple-light) 0%,
       #f2f2f5 100%);
 }


 .cio-name-preview__product {
   position: relative;

   width:
     min(100%, 540px);

   margin: 0 auto;
 }


 .cio-name-preview__product-image {
   display: block;

   width: 100%;

   height: auto;
 }


 /*
 * 背景画像の設置先：
 *
 * /img/youtube-50k-name-preview/nameplate-preview.png
 */


 /* ==================================================
   Preview Name
================================================== */
 .cio-name-preview__name {
   position: absolute;

   z-index: 2;

   left:
     var(--preview-name-left);

   top:
     var(--preview-name-top);

   width:
     var(--preview-name-width);

   transform:
     translate(-50%, -50%);

   overflow: hidden;

   color: #fff;

   font-size:
     clamp(16px, 2.3vw, 26px);

   font-weight: 700;

   letter-spacing: .08em;

   line-height: 1.2;

   text-align: center;

   white-space: pre;

   text-shadow:
     0 1px 3px rgba(0, 0, 0, .75);

   pointer-events: none;
 }


 .cio-name-preview__note {
   margin: 17px 0 0;

   color: #000;

   font-size: 13px;

   font-weight: 600;

   line-height: 1.8;

   text-align: center;
 }


 /* ==================================================
   Toast
================================================== */
 .cio-name-preview__toast {
   position: fixed;

   left: 50%;

   bottom: 30px;

   z-index: 9999;

   width:
     min(calc(100% - 32px), 520px);

   padding: 14px 18px;

   border-radius: 10px;

   background:
     rgba(30, 30, 30, .96);

   color: #fff;

   font-size: 14px;

   font-weight: 600;

   line-height: 1.7;

   text-align: center;

   box-shadow:
     0 6px 20px rgba(0, 0, 0, .2);

   opacity: 0;

   visibility: hidden;

   transform:
     translate(-50%, 10px);

   transition:
     opacity .25s,
     transform .25s,
     visibility .25s;

   pointer-events: none;
 }


 .cio-name-preview__toast.is-show {
   opacity: 1;

   visibility: visible;

   transform:
     translate(-50%, 0);
 }


 /* ==================================================
   Tablet
================================================== */
 @media (max-width: 820px) {

   .cio-name-preview__container {
     grid-template-columns: 1fr;

     gap: 20px;
   }


   .cio-name-preview__preview {
     min-height: 280px;
   }


   .cio-name-preview__product {
     width:
       min(100%, 600px);
   }

 }


 /* ==================================================
   Smartphone
================================================== */
 @media (max-width: 520px) {

   .cio-name-preview {
     margin: 24px auto;

     padding: 0 14px;

     font-size: 16px;
   }


   .cio-name-preview__header {
     margin-bottom: 18px;
     padding: 12px 14px 14px;
     border-radius: 12px;
   }

   .cio-name-preview__anniversary {
     margin-bottom: 2px !important;
     font-size: 12px !important;
   }

   .cio-name-preview__title {
     margin-bottom: 4px !important;
     font-size: 23px !important;
   }

   .cio-name-preview__description {
     font-size: 12px !important;
     line-height: 1.5 !important;
   }


   .cio-name-preview__panel {
     padding: 22px 18px;

     border-radius: 12px;
   }


   .cio-name-preview__panel-title {
     margin-bottom: 18px;

     font-size: 20px;
   }


   .cio-name-preview__input-line {
     gap: 10px;
   }


   .cio-name-preview__label {
     font-size: 15px;
   }


   .cio-name-preview__input {
     height: 56px;

     padding: 0 13px;

     font-size: 18px;
   }


   .cio-name-preview__counter {
     font-size: 14px;
   }


   .cio-name-preview__button,
   .cio-name-preview__copy-button {
     min-height: 56px;

     font-size: 16px;
   }


   .cio-name-preview__copy-guide {
     font-size: 14px;
   }


   .cio-name-preview__rules {
     padding: 18px;
   }


   .cio-name-preview__rules-title {
     font-size: 16px;
   }


   .cio-name-preview__rules-list {
     font-size: 15px;

     line-height: 1.9;
   }


   .cio-name-preview__error {
     font-size: 14px;
   }


   .cio-name-preview__preview {
     min-height: 230px;

     padding: 20px 10px;
   }


   .cio-name-preview__name {
     font-size:
       clamp(14px, 4.6vw, 22px);
   }


   .cio-name-preview__note {
     font-size: 13px;
   }


   .cio-name-preview__toast {
     bottom: 20px;

     font-size: 14px;
   }

 }