@charset "utf-8";
/* CSS Document */

/* ===== ① 表示まわり ===== */

#jobposter_stage{
  width:100%;
  overflow:hidden;
  position:relative;
  margin:0 auto;
}

#jobposter_scale{
  width:900px;
  height:1200px;
  transform-origin:top left;
}

/* ===== ② キャンバス本体 ===== */

#jobposter_canvas{
  width:900px;
  height:1200px;
  position:relative;
  overflow:hidden;
  box-sizing:border-box;

  background-image:url("https://ffxivfave.com/wp-content/uploads/2026/04/smple.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  cursor:grab;
  touch-action:none;

  --line-color:#ffffff;
  --line-top-h:180px;
  --line-top-v:180px;
  --line-bottom-h:180px;
  --line-bottom-v:180px;
}


#jobposter_canvas::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(0,0,0,0);
  pointer-events:none;
}

/* ===== ③ ライン ===== */

#jobposter_lines{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.jobposter_line{
  position:absolute;
  background:var(--line-color);
}

.top_h{
  top:55px;
  left:55px;
  width:var(--line-top-h);
  height:2px;
}

.top_v{
  top:55px;
  left:55px;
  width:2px;
  height:var(--line-top-v);
}

.bottom_h{
  right:55px;
  bottom:55px;
  width:var(--line-bottom-h);
  height:2px;
}

.bottom_v{
  right:55px;
  bottom:55px;
  width:2px;
  height:var(--line-bottom-v);
}

/* ===== ④ アイコン・文字 ===== */

#jobposter_content{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  color:#ffffff;
}

#jobposter_jobarea{
  position:absolute;
  top:30px;
  right:10px;
  width:140px;
  height:600px;
}

#jobposter_jobicon{
  position:absolute;
  top:0;
  left:0;
  width:130px;
  height:130px;
  background:#ffffff;
  background:transparent !important;
  overflow:hidden;
}

#jobposter_jobicon svg{
  display:block;
  width:100%;
  height:100%;
}

#jobposter_jobicon svg *{
  fill:inherit;
}

#jobposter_jobarea.icon-only{
  top:-15px;
  right:-30px;
  width:260px;
  height:260px;
}

#jobposter_jobarea.icon-only #jobposter_jobicon{
  width:260px;
  height:260px;
  mask-size:260px auto;
  -webkit-mask-size:260px auto;
  mask-position:center top;
  -webkit-mask-position:center top;
}

#jobposter_jobtext{
  position:absolute;
  top:150px;
  left:112px;

  display:none;
  width:max-content;
  white-space:nowrap;

  writing-mode:horizontal-tb;
  text-orientation:initial;

  font-size:50px;
  line-height:1;
  letter-spacing:0.08em;
  text-align:left;

  color:var(--jobposter-main-color);

  transform:rotate(90deg);
  transform-origin:left top;
}

#jobposter_jobtext.show{
  display:block;
}

#jobposter_jobabbr{
  position:absolute;
  top:18px;
  left:132px;
  width:auto;
  white-space:nowrap;
  display:none;

  writing-mode:horizontal-tb;
  text-orientation:initial;

  font-size:160px;
  line-height:1;
  letter-spacing:0.04em;
  text-align:left;

  transform:rotate(90deg);
  transform-origin:left top;
}

#jobposter_jobabbr.show{
  display:inline-block;
}


#jobposter_textarea{
  position:absolute;
  left:52px;
  bottom:46px;
}

#jobposter_freetext{
  font-size:52px;
  line-height:1.2;
  letter-spacing:0.04em;
  white-space:pre-line;
}

#jobposter_credit{
  margin-top:16px;
  font-size:20px;
  line-height:1;
  letter-spacing:0.3px;
  opacity:0.92;
}


/* ===== 色変更 ===== */

#jobposter_canvas{
  --jobposter-main-color:#ffffff;
  --jobposter-icon-color-1:#ffffff;
  --jobposter-icon-color-2:#ffffff;
}

.jobposter_line{
  background:var(--jobposter-main-color);
}

#jobposter_content{
  color:var(--jobposter-main-color);
}



/* ===== フォント ===== */

.font-retro{
  font-family:'Limelight', serif;
}

.font-solid{
  font-family:'Gasoek One', sans-serif;
}

.font-classic{
  font-family:'Merriweather', serif;
}

.font-modern{
  font-family:'Stack Sans Headline', sans-serif;
}

/* クレジット補正 */

.credit-retro{
  font-family:'Merriweather', serif;
}

.credit-solid{
  font-family:'Stack Sans Headline', sans-serif;
}

/* 可読補助：グレー */
.text-assist-gray #jobposter_jobtext,
.text-assist-gray #jobposter_jobabbr,
.text-assist-gray #jobposter_freetext,
.text-assist-gray #jobposter_credit{
  -webkit-text-stroke: 1.2px rgba(0,0,0,0.7);

    text-shadow:
      0 0 4px rgba(0,0,0,0.4),
      0 0 10px rgba(0,0,0,0.25);
  paint-order: stroke fill;
}

.text-assist-gray #jobposter_jobicon svg{
  filter:
    drop-shadow(1px 0 0 rgba(0,0,0,0.45))
    drop-shadow(-1px 0 0 rgba(0,0,0,0.45))
    drop-shadow(0 1px 0 rgba(0,0,0,0.45))
    drop-shadow(0 -1px 0 rgba(0,0,0,0.45))
    drop-shadow(0 0 4px rgba(0,0,0,0.18));
}

/* 可読補助：白 */
.text-assist-white #jobposter_jobtext,
.text-assist-white #jobposter_jobabbr,
.text-assist-white #jobposter_freetext,
.text-assist-white #jobposter_credit{
  -webkit-text-stroke: 1.2px rgba(255,255,255,0.7);
  text-shadow:
    0 0 4px rgba(255,255,255,0.4),
    0 0 10px rgba(255,255,255,0.25);
  paint-order: stroke fill;
}

.text-assist-white #jobposter_jobicon svg{
  filter:
    drop-shadow(1px 0 0 rgba(255,255,255,0.7))
    drop-shadow(-1px 0 0 rgba(255,255,255,0.7))
    drop-shadow(0 1px 0 rgba(255,255,255,0.7))
    drop-shadow(0 -1px 0 rgba(255,255,255,0.7))
    drop-shadow(0 0 4px rgba(255,255,255,0.25));
}

/* クレジットだけ細め */
.text-assist-gray #jobposter_credit{
  -webkit-text-stroke-width: 0.7px;
}

.text-assist-white #jobposter_credit{
  -webkit-text-stroke-width: 0.7px;
}


/* ===== 操作画面レイアウト ===== */

.jobposter_lineControls{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:12px;
  width:100%;
}

.jobposter_lineControls .linecontrol_unit{
  min-width:0;
}

.jobposter_lineControls .linecontrol_unit label{
  display:block;
  margin-bottom:6px;
}

.jobposter_lineControls input[type="range"]{
  display:block;
  width:100% !important;
  min-width:0;
  margin-bottom:8px;
}

.jobposter_lineControls input[type="text"]{
  display:block;
  width:100% !important;
  min-width:0;
  box-sizing:border-box;
}

/* スマホだけ2列 */
@media (max-width: 600px){
  .jobposter_lineControls{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

.jobposter_slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  background:transparent;
}

#jobposter_canvas ~ .color-control,
.color-control{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}

.color-control input[type="color"]{
  width:42px;
  height:32px;
  padding:2px;
  flex:0 0 42px;
}

.color-control input[type="text"]{
  flex:1;
  min-width:0;
  height:40px;
  padding-right:10px;
  box-sizing:border-box;
}

.wp-block-columns.are-vertically-aligned-center.is-not-stacked-on-mobile{
  gap:10px;
}

/* つまみ */
.jobposter_slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;

  width:18px;
  height:18px;
  border-radius:50%;

  background:#9f8bb3;
  border:none;

  cursor:pointer;
  margin-top:-6px;
}

/* バー */
.jobposter_slider::-webkit-slider-runnable-track{
  height:6px;
  background:#ddd6e6;
  border-radius:999px;
}

.jobposter_imageRow{
  display:flex;
  align-items:center;
  gap:24px;
  width:100%;
}

.jobposter_imageRow input[type="file"]{
  flex:0 0 auto;
}

.jobposter_zoomWrap{
  display:flex;
  align-items:center;
  gap:16px;
  flex:1;
  margin-top:0;
}

.jobposter_zoomWrap span{
  white-space:nowrap;
}

#jobposter_zoom{
  flex:1;
}

#jobposter_saveButton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 32px;
  border-radius:999px;
  border:1px solid #b2a5c1;
  background:#b2a5c1;
  color:#ffffff;
  font-size:16px;
  font-weight:400;
  letter-spacing:0.02em;
  line-height:1;
  cursor:pointer;
  transition:0.25s ease;
  box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

#jobposter_saveButton .btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

#jobposter_saveButton .after {
  font-size: 12px;
}

#jobposter_saveButton i {
  position: relative;
  top: -1px;
}

#jobposter_saveButton:hover {
  background: #ffffff;
  color: #b2a5c1;
  border-color: #b2a5c1;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}

#jobposter_saveButton:hover i {
  color: #b2a5c1;
}

#jobposter_saveButton:active {
  transform: translateY(0);
}




/* ===== フォント個別補正 ===== */

/* レトロ Limelight */
#jobposter_content.font-retro #jobposter_jobtext{
  top:144px; 
  left:110px;
}
#jobposter_content.font-retro #jobposter_jobabbr{
  top:12px;
  left:130px;
  font-size:160px;
}
#jobposter_content.font-retro #jobposter_freetext{
}

/* ソリッド Gasoek One */
#jobposter_content.font-solid #jobposter_jobtext{
  left:116px;
}
#jobposter_content.font-solid #jobposter_jobabbr{
  top:16px;
}
#jobposter_content.font-solid #jobposter_freetext{
}


/* ===== アイコンオンリー個別補正 ===== */

#jobposter_jobarea.job-pld.icon-only{
  top:-5px;
  right:-45px;
}
#jobposter_jobarea.job-drk.icon-only{
  top:-5px;
  right:-55px;
}
#jobposter_jobarea.job-gnb.icon-only{
  top:-25px;
  right:-40px;
}
#jobposter_jobarea.job-whm.icon-only{
  top:5px;
  right:-55px;
}
#jobposter_jobarea.job-sch.icon-only{
  top:-40px;
  right:-30px;
}
#jobposter_jobarea.job-mnk.icon-only{
  top:-25px;
  right:-30px;
}
#jobposter_jobarea.job-drg.icon-only{
  top:-20px;
  right:-55px;
}
#jobposter_jobarea.job-brd.icon-only{
  top:-10px;
  right:-35px;
}
#jobposter_jobarea.job-mch.icon-only{
  top:-5px;
  right:-40px;
}
#jobposter_jobarea.job-dnc.icon-only{
  top:-25px;
  right:-35px;
}
#jobposter_jobarea.job-smn.icon-only{
  top:-30px;
  right:-50px;
}
#jobposter_jobarea.job-rdm.icon-only{
  top:-5px;
  right:-50px;
}
#jobposter_jobarea.job-pct.icon-only{
  top:-40px;
  right:-25px;
}
#jobposter_jobarea.job-blu.icon-only{
  top:-40px;
  right:-25px;
}
#jobposter_jobarea.job-crp.icon-only{
  top:-30px;
  right:-25px;
}
#jobposter_jobarea.job-bsm.icon-only{
  top:-50px;
  right:-30px;
}
#jobposter_jobarea.job-gsm.icon-only{
  top:-50px;
  right:-20px;
}
#jobposter_jobarea.job-wvr.icon-only{
  top:-25px;
  right:-25px;
}
#jobposter_jobarea.job-cul.icon-only{
  top:-40px;
  right:-25px;
}
#jobposter_jobarea.job-min.icon-only{
  top:-15px;
  right:-25px;
}
/* =====
  top:-15px;
  right:-30px;
  width:260px;
  height:260px;
*/