/* v1.2 applied: title-over-icon / left-aligned info / max-height illustration */
/*
 * Commercial Guild Shop Selection — canonical 12-card 9-slice component UI
 * Base: v1.8.148 / 1-frame visual refinement / internal-layout v1.1 / background-integrated direct placement
 * Scope: #commercialGuild only
 * Full completed panel images are intentionally NOT used as card backgrounds.
 * Layer order follows the implementation instruction: A03/A07/illustration/text/A06.
 */
#commercialGuild.commercial-guild-select-page{
  display:none!important; flex-direction:column!important; min-height:0!important; height:auto!important;
  padding:var(--ui-page-top-inset) 8px var(--ui-content-bottom-edge)!important; box-sizing:border-box!important;
  overflow:hidden!important; background-image:none!important;
}
#commercialGuild.commercial-guild-select-page.active{display:flex!important;}
#commercialGuild .commercial-guild-select-head{
  flex:0 0 58px!important; height:58px!important; min-height:58px!important; margin:0 0 5px!important;
  padding:0 64px!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:center!important;
  background:url("../assets/ui/commercial_guild/title/UI_BANNER_TRADE_GUILD_01.webp") center/100% 100% no-repeat!important; overflow:hidden!important;
}
#commercialGuild .commercial-guild-select-head h2{
  margin:0!important; color:#f6d99d!important; font-size:clamp(15px,1.35vw,23px)!important; line-height:1!important;
  white-space:nowrap!important; text-overflow:ellipsis!important; overflow:hidden!important; text-shadow:0 2px 4px #000,0 0 8px #000!important;
}
#commercialGuild .commercial-guild-select-layout{flex:1 1 auto!important; min-height:0!important; height:auto!important; overflow:hidden!important;}
#commercialGuild .commercial-shop-select-grid{
  width:100%!important; height:100%!important; min-height:0!important; display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:auto!important;
  gap:5px!important; padding:1px 2px 3px!important; box-sizing:border-box!important;
  align-content:stretch!important; align-items:stretch!important;
  overflow:hidden!important; overflow-x:hidden!important;
}
#commercialGuild .commercial-choice-card{
  position:relative!important; isolation:isolate!important; min-width:0!important; min-height:0!important; width:100%!important; height:100%!important;
  box-sizing:border-box!important; margin:0!important; padding:0!important; overflow:hidden!important; cursor:default!important;
  border:13px solid transparent!important; border-radius:0!important;
  border-image-source:url("../assets/ui/commercial_guild/card_parts/common/A03_OUTER_FRAME.webp")!important;
  border-image-slice:42 42 42 42 fill!important; border-image-width:13px!important; border-image-outset:0!important; border-image-repeat:stretch!important;
  background:transparent!important; box-shadow:none!important; filter:none!important;
}
#commercialGuild .commercial-choice-card.current{filter:brightness(1.10) saturate(1.05)!important;}
#commercialGuild .commercial-choice-bg{
  position:absolute!important; z-index:0!important; inset:-10px!important;
  /* A07 contains a decorative inner frame. Overscan it beyond the card clipping area
     so only its dark texture remains visible beneath the single A03 outer frame. */
  background:#0b131a url("../assets/ui/commercial_guild/card_parts/common/A07_BACKGROUND_TEXTURE_PANEL.webp") center/100% 100% no-repeat!important;
  pointer-events:none!important;
}
#commercialGuild .commercial-choice-illustration{
  position:absolute!important; z-index:2!important; left:2.2%!important; top:5%!important; width:31.5%!important; height:90%!important;
  display:flex!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; pointer-events:none!important;
}
#commercialGuild .commercial-choice-illustration img{
  display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important;
  object-fit:contain!important; object-position:center center!important; filter:drop-shadow(0 2px 4px rgba(0,0,0,.72))!important;
}
#commercialGuild .commercial-choice-card[data-card-key="hardware-wood-tool"] .commercial-choice-illustration img{width:104%!important;max-width:104%!important;}
#commercialGuild .commercial-choice-info{
  position:absolute!important; z-index:3!important; left:33.5%!important; right:2.6%!important; top:5%!important; bottom:27%!important;
  min-width:0!important; min-height:0!important; box-sizing:border-box!important; padding:0!important; overflow:hidden!important;
  border:0!important; background:transparent!important;
}
#commercialGuild .commercial-choice-title-row{
  min-width:0!important; width:100%!important; height:29%!important; display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:7px!important; overflow:hidden!important;
}
#commercialGuild .commercial-choice-title-row b{
  min-width:0!important; flex:1 1 auto!important; color:#f7d99b!important; font-size:clamp(13px,1.12vw,18px)!important; font-weight:1000!important; line-height:1.05!important;
  white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; text-shadow:0 2px 4px #000!important;
}
#commercialGuild .commercial-choice-title-row small{
  flex:0 1 auto!important; min-width:0!important; color:#f1d79e!important; font-size:clamp(8px,.70vw,11px)!important; font-weight:900!important;
  line-height:1.05!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; text-shadow:0 1px 3px #000!important;
}
#commercialGuild .commercial-choice-description{
  width:100%!important; height:64%!important; margin:1px 0 0!important; padding:0!important; box-sizing:border-box!important;
  color:#e7edf0!important; font-size:clamp(9px,.82vw,13px)!important; line-height:1.18!important; overflow:hidden!important;
  display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:3!important; text-shadow:0 1px 3px #000,0 0 4px #000!important;
}
#commercialGuild .commercial-choice-card button{
  position:absolute!important; z-index:6!important; left:49%!important; right:2.6%!important; bottom:4.5%!important; width:auto!important; height:25%!important; min-height:0!important;
  margin:0!important; padding:0 9px!important; box-sizing:border-box!important; border:7px solid transparent!important; border-radius:0!important;
  border-image-source:url("../assets/ui/commercial_guild/card_parts/common/A06_BUTTON_FRAME.webp")!important;
  border-image-slice:20 48 20 48 fill!important; border-image-width:7px!important; border-image-outset:0!important; border-image-repeat:stretch!important;
  background:transparent!important; background-image:none!important; color:#ffe3a4!important; font-family:inherit!important;
  font-size:clamp(9px,.76vw,12px)!important; font-weight:1000!important; line-height:1!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important;
  text-shadow:0 2px 3px #000!important; box-shadow:none!important; cursor:pointer!important;
}
#commercialGuild .commercial-choice-card button>span{position:relative!important;z-index:1!important;}
#commercialGuild .commercial-choice-card button:hover{filter:brightness(1.13)!important;}
#commercialGuild .commercial-choice-card button:active{filter:brightness(.92)!important;}
#commercialGuild .commercial-choice-card button:disabled{opacity:.62!important;cursor:default!important;filter:none!important;}
#commercialGuild .commercial-choice-info,
#commercialGuild .commercial-choice-description{border:0!important;background:transparent!important;}

@media (max-width:1200px) and (orientation:landscape){
  #commercialGuild .commercial-guild-select-head{flex-basis:46px!important;height:46px!important;min-height:46px!important;padding:0 42px!important;}
  #commercialGuild .commercial-guild-select-head h2{font-size:13px!important;}
  #commercialGuild .commercial-shop-select-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
    gap:3px!important;
    overflow:hidden!important;
  }
  #commercialGuild .commercial-choice-card{min-height:0!important;height:100%!important;border-width:10px!important;border-image-width:10px!important;}
  #commercialGuild .commercial-choice-info{border:0!important;padding:0!important;left:33.5%!important;right:2.6%!important;top:5%!important;bottom:27%!important;}
  #commercialGuild .commercial-choice-title-row b{font-size:12px!important;} #commercialGuild .commercial-choice-title-row small{font-size:7px!important;}
  #commercialGuild .commercial-choice-description{font-size:8.5px!important;line-height:1.16!important;-webkit-line-clamp:3!important;}
  #commercialGuild .commercial-choice-card button{border-width:5px!important;border-image-width:5px!important;font-size:8px!important;padding:0 4px!important;}
}
@media (max-width:800px) and (orientation:portrait){
  #commercialGuild.commercial-guild-select-page{padding-left:4px!important;padding-right:4px!important;overflow:hidden!important;}
  #commercialGuild .commercial-guild-select-head{flex-basis:48px!important;height:48px!important;min-height:48px!important;padding:0 34px!important;}
  #commercialGuild .commercial-guild-select-head h2{font-size:13px!important;}
  #commercialGuild .commercial-shop-select-grid{
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    grid-auto-rows:minmax(124px,auto)!important;
    gap:5px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  #commercialGuild .commercial-choice-card{min-height:124px!important;height:auto!important;border-width:11px!important;border-image-width:11px!important;}
  #commercialGuild .commercial-choice-title-row b{font-size:12px!important;} #commercialGuild .commercial-choice-title-row small{font-size:8px!important;}
  #commercialGuild .commercial-choice-description{font-size:9px!important;line-height:1.22!important;}
  #commercialGuild .commercial-choice-card button{font-size:9px!important;}
}
@media (max-width:900px) and (orientation:landscape) and (pointer:coarse){
  /* Smartphone landscape: use the same 4-column x 3-row arrangement as PC. */
  #commercialGuild .commercial-shop-select-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
    gap:3px!important;
    overflow:hidden!important;
    overflow-y:hidden!important;
    overflow-x:hidden!important;
  }
  #commercialGuild .commercial-choice-card{min-height:0!important;height:100%!important;}
}

/* v1.8.148 ISSUE020 / internal-content-layout v1.0
 * The A03 outer frame is the only visible decorative frame. Internal content uses
 * the full safe area inside that frame; no secondary text/info frame is allowed.
 */
#commercialGuild .commercial-choice-info,
#commercialGuild .commercial-choice-description,
#commercialGuild .commercial-choice-title-row{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#commercialGuild .commercial-choice-info > *{max-width:none!important;}
#commercialGuild .commercial-choice-title-row b,
#commercialGuild .commercial-choice-title-row small,
#commercialGuild .commercial-choice-description,
#commercialGuild .commercial-choice-card button{
  font-family:inherit!important;
}


/* ============================================================
 * v1.1 FINAL — background-integrated direct placement
 * Visual reference: 職業一覧2(3).png
 * Scope: #commercialGuild only
 * ============================================================ */

/* A07 is the existing source texture. Its own decorative inner frame
   must NOT remain visible. Overscan is intentional: the source frame
   is pushed outside the card viewport, leaving only the dark texture. */
#commercialGuild .commercial-choice-bg{
  inset:0!important;
  background:#0b131a url("../assets/ui/commercial_guild/card_parts/common/A07_BACKGROUND_TEXTURE_PANEL.webp") center/135% 135% no-repeat!important;
}

/* Full usable content area inside the single A03 outer 9-slice frame. */
#commercialGuild .commercial-choice-illustration{
  left:2.5%!important;
  top:6%!important;
  width:31%!important;
  height:88%!important;
}
#commercialGuild .commercial-choice-illustration img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
}
#commercialGuild .commercial-choice-card[data-card-key="hardware-wood-tool"] .commercial-choice-illustration img{
  width:100%!important;
  max-width:none!important;
}

/* Right-side information is placed directly on the card background.
   No secondary information panel or text background is permitted. */
#commercialGuild .commercial-choice-info{
  left:34%!important;
  right:2.8%!important;
  top:5.5%!important;
  bottom:27%!important;
  padding:0!important;
}

/* Reference-like hierarchy: shop name first, status/cost on the same line,
   then a readable 2–3 line description. */
#commercialGuild .commercial-choice-title-row{
  height:27%!important;
  gap:6px!important;
  align-items:center!important;
}
#commercialGuild .commercial-choice-title-row b{
  font-size:clamp(14px,1.18vw,19px)!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
#commercialGuild .commercial-choice-title-row small{
  font-size:clamp(9px,.74vw,12px)!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
#commercialGuild .commercial-choice-description{
  height:68%!important;
  margin:1px 0 0!important;
  font-size:clamp(10px,.86vw,14px)!important;
  line-height:1.16!important;
  -webkit-line-clamp:3!important;
}

/* Existing A06 registration button remains the only internal framed control.
   It is enlarged to use the available lower-right area. */
#commercialGuild .commercial-choice-card button{
  left:46%!important;
  right:2.8%!important;
  bottom:4.5%!important;
  height:24%!important;
  padding:0 8px!important;
  font-size:clamp(9px,.78vw,12px)!important;
}

/* Do not let generic component rules reintroduce a hidden inner frame. */
#commercialGuild .commercial-choice-card,
#commercialGuild .commercial-choice-info,
#commercialGuild .commercial-choice-description{
  box-shadow:none!important;
  background-color:transparent!important;
}
#commercialGuild .commercial-choice-info::before,
#commercialGuild .commercial-choice-info::after,
#commercialGuild .commercial-choice-description::before,
#commercialGuild .commercial-choice-description::after{
  content:none!important;
  display:none!important;
}

/* Compact landscape: keep the same visual hierarchy without reverting
   to the old small text-box layout. */
@media (max-width:1200px) and (orientation:landscape){
  #commercialGuild .commercial-choice-illustration{
    left:2.5%!important; top:6%!important; width:31%!important; height:88%!important;
  }
  #commercialGuild .commercial-choice-info{
    left:34%!important; right:2.8%!important; top:5.5%!important; bottom:27%!important;
  }
  #commercialGuild .commercial-choice-title-row{
    height:27%!important; gap:5px!important;
  }
  #commercialGuild .commercial-choice-title-row b{
    font-size:clamp(12px,1.25vw,16px)!important;
  }
  #commercialGuild .commercial-choice-title-row small{
    font-size:clamp(8px,.82vw,10px)!important;
  }
  #commercialGuild .commercial-choice-description{
    height:68%!important;
    font-size:clamp(8.8px,.9vw,11px)!important;
    line-height:1.16!important;
  }
  #commercialGuild .commercial-choice-card button{
    left:46%!important; right:2.8%!important; height:24%!important;
    font-size:clamp(8px,.82vw,10px)!important;
  }
}

/* Portrait/mobile: preserve the same single-frame composition; only the
   component proportions adapt. The inner text/background frame must not return. */
@media (max-width:800px) and (orientation:portrait){
  #commercialGuild .commercial-choice-bg{
    background-size:135% 135%!important;
  }
  #commercialGuild .commercial-choice-illustration{
    left:2.5%!important; top:7%!important; width:31%!important; height:86%!important;
  }
  #commercialGuild .commercial-choice-info{
    left:34%!important; right:2.8%!important; top:6%!important; bottom:27%!important;
  }
  #commercialGuild .commercial-choice-title-row{
    height:27%!important;
  }
  #commercialGuild .commercial-choice-title-row b{
    font-size:clamp(11px,3.6vw,15px)!important;
  }
  #commercialGuild .commercial-choice-title-row small{
    font-size:clamp(7.5px,2.4vw,10px)!important;
  }
  #commercialGuild .commercial-choice-description{
    height:68%!important;
    font-size:clamp(8.5px,2.8vw,11px)!important;
    line-height:1.18!important;
  }
  #commercialGuild .commercial-choice-card button{
    left:46%!important; right:2.8%!important; height:24%!important;
    font-size:clamp(8px,2.5vw,10px)!important;
  }
}

/* ============================================================
 * v1.2 FINAL — title-over-icon / left-aligned info / max-height illustration
 * Scope: #commercialGuild only
 * Base: v1.8.148 + internal-layout v1.1
 * ============================================================ */

/* Keep the card as a single visual canvas. */
#commercialGuild .commercial-choice-card{
  position:relative!important;
  overflow:hidden!important;
}

/* A07 remains only as a texture source. Its source border is overscanned away. */
#commercialGuild .commercial-choice-bg{
  inset:0!important;
  background-color:#0b131a!important;
  background-image:url("../assets/ui/commercial_guild/card_parts/common/A07_BACKGROUND_TEXTURE_PANEL.webp")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:145% 145%!important;
}

/* Make the illustration nearly the full inner-frame height. */
#commercialGuild .commercial-choice-illustration{
  left:1.5%!important;
  top:1.5%!important;
  width:33%!important;
  height:97%!important;
  z-index:2!important;
  overflow:hidden!important;
}
#commercialGuild .commercial-choice-illustration img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
}
#commercialGuild .commercial-choice-card[data-card-key="hardware-wood-tool"] .commercial-choice-illustration img{
  width:100%!important;
  max-width:none!important;
}

/* Information is no longer trapped in a narrow right-side box.
   It begins over the illustration so the title can overlap the icon. */
#commercialGuild .commercial-choice-info{
  left:24%!important;
  right:2.8%!important;
  top:4.5%!important;
  bottom:27%!important;
  padding:0!important;
  overflow:visible!important;
  z-index:4!important;
}

/* One left-aligned information line. */
#commercialGuild .commercial-choice-title-row{
  position:relative!important;
  width:max-content!important;
  max-width:100%!important;
  height:auto!important;
  min-height:25%!important;
  display:flex!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  gap:8px!important;
  overflow:visible!important;
  white-space:nowrap!important;
}

/* Shop name: intentionally allowed to sit on top of the illustration. */
#commercialGuild .commercial-choice-title-row b{
  position:relative!important;
  z-index:5!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  color:#f7d99b!important;
  font-size:clamp(15px,1.30vw,20px)!important;
  font-weight:1000!important;
  line-height:1.05!important;
  text-shadow:0 2px 5px #000,0 0 6px #000!important;
}

/* Weapon shop is the visual reference and may be slightly larger. */
#commercialGuild .commercial-choice-card[data-card-key="weapon"] .commercial-choice-title-row b{
  font-size:clamp(17px,1.42vw,22px)!important;
}

/* Long shop names are reduced slightly rather than truncated. */
#commercialGuild .commercial-choice-card[data-card-key="adventurer-guild"] .commercial-choice-title-row b,
#commercialGuild .commercial-choice-card[data-card-key="accessory"] .commercial-choice-title-row b,
#commercialGuild .commercial-choice-card[data-card-key="hardware-wood-tool"] .commercial-choice-title-row b,
#commercialGuild .commercial-choice-card[data-card-key="bookbinding"] .commercial-choice-title-row b{
  font-size:clamp(12px,1.05vw,17px)!important;
}

/* Status / required G remains on the same left-aligned line when it fits. */
#commercialGuild .commercial-choice-title-row small{
  position:relative!important;
  z-index:5!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  color:#f1d79e!important;
  font-size:clamp(9px,.80vw,12px)!important;
  font-weight:900!important;
  line-height:1.05!important;
  text-shadow:0 1px 4px #000,0 0 5px #000!important;
}

/* Description is deliberately smaller; full text should remain readable. */
#commercialGuild .commercial-choice-description{
  width:76%!important;
  height:auto!important;
  min-height:0!important;
  margin:3px 0 0!important;
  padding:0!important;
  color:#e7edf0!important;
  font-size:clamp(8.8px,.72vw,11.5px)!important;
  line-height:1.18!important;
  overflow:visible!important;
  display:block!important;
  -webkit-line-clamp:unset!important;
  text-overflow:clip!important;
  white-space:normal!important;
  text-shadow:0 1px 3px #000,0 0 4px #000!important;
}

/* Keep the action button as the only other framed internal element. */
#commercialGuild .commercial-choice-card button{
  left:44%!important;
  right:2.8%!important;
  bottom:4.2%!important;
  width:auto!important;
  height:23%!important;
  z-index:6!important;
  padding:0 8px!important;
  font-size:clamp(8.5px,.72vw,11px)!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#commercialGuild .commercial-choice-card button>span{
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Compact landscape: preserve overlap and maximum icon height. */
@media (max-width:1200px) and (orientation:landscape){
  #commercialGuild .commercial-choice-illustration{
    left:1.5%!important; top:1.5%!important; width:33%!important; height:97%!important;
  }
  #commercialGuild .commercial-choice-info{
    left:23%!important; right:2.8%!important; top:4.5%!important; bottom:27%!important;
  }
  #commercialGuild .commercial-choice-title-row{gap:5px!important; min-height:25%!important;}
  #commercialGuild .commercial-choice-title-row b{font-size:clamp(12px,1.30vw,17px)!important;}
  #commercialGuild .commercial-choice-card[data-card-key="weapon"] .commercial-choice-title-row b{font-size:clamp(13px,1.42vw,18px)!important;}
  #commercialGuild .commercial-choice-title-row small{font-size:clamp(7.5px,.80vw,10px)!important;}
  #commercialGuild .commercial-choice-description{width:78%!important;font-size:clamp(8px,.72vw,10px)!important;line-height:1.16!important;}
  #commercialGuild .commercial-choice-card button{left:44%!important;right:2.8%!important;height:23%!important;font-size:clamp(7.5px,.72vw,9.5px)!important;}
}

/* Portrait/mobile: keep the same composition, but allow a smaller overlap. */
@media (max-width:800px) and (orientation:portrait){
  #commercialGuild .commercial-choice-illustration{
    left:1.5%!important; top:2%!important; width:33%!important; height:96%!important;
  }
  #commercialGuild .commercial-choice-info{
    left:23%!important; right:2.8%!important; top:5%!important; bottom:27%!important;
  }
  #commercialGuild .commercial-choice-title-row{gap:4px!important;min-height:25%!important;}
  #commercialGuild .commercial-choice-title-row b{font-size:clamp(11px,3.5vw,15px)!important;}
  #commercialGuild .commercial-choice-card[data-card-key="weapon"] .commercial-choice-title-row b{font-size:clamp(12px,3.8vw,16px)!important;}
  #commercialGuild .commercial-choice-title-row small{font-size:clamp(7px,2.2vw,9px)!important;}
  #commercialGuild .commercial-choice-description{width:78%!important;font-size:clamp(8px,2.5vw,10px)!important;line-height:1.16!important;}
  #commercialGuild .commercial-choice-card button{left:43%!important;right:2.8%!important;height:23%!important;font-size:clamp(7.5px,2.3vw,9px)!important;}
}


/* ============================================================
 * v1.0 FINAL — outer 9-slice inner-canvas maximization
 * Scope: #commercialGuild only
 * Base: v1.8.148 + v1.2 title-over-icon / max-icon implementation
 *
 * Purpose:
 *   Use the entire safe area immediately inside the single A03
 *   outer 9-slice frame. The previous top/left/right/bottom
 *   content gaps are not treated as a second panel or margin.
 *   Existing assets are reused; no new visual frame is introduced.
 * ============================================================ */

/* The card itself is the single positioning canvas.
   Its border remains the only visible outer frame. */
#commercialGuild .commercial-choice-card{
  position:relative!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  padding:0!important;
}

/* A07 is texture only. Overscan hides its source inner frame. */
#commercialGuild .commercial-choice-bg{
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  margin:0!important;
  background-color:#0b131a!important;
  background-image:url("../assets/ui/commercial_guild/card_parts/common/A07_BACKGROUND_TEXTURE_PANEL.webp")!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:150% 150%!important;
  pointer-events:none!important;
}

/* Illustration: start at the actual inner edge of the A03 border.
   The final v1.6 override below intentionally bleeds it over the frame. */
#commercialGuild .commercial-choice-illustration{
  position:absolute!important;
  z-index:2!important;
  left:0!important;
  top:0!important;
  width:36%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
#commercialGuild .commercial-choice-illustration img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.72))!important;
}
#commercialGuild .commercial-choice-card[data-card-key="hardware-wood-tool"] .commercial-choice-illustration img{
  width:100%!important;
  max-width:none!important;
}

/* Full-width information canvas.
   left:19% intentionally lets the title/status overlap the icon.
   right:0/top:0/bottom:27% removes the old right/top inset. */
#commercialGuild .commercial-choice-info{
  position:absolute!important;
  z-index:4!important;
  left:19%!important;
  right:0!important;
  top:0!important;
  bottom:27%!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Title/status share one left-aligned information line.
   Wrapping is allowed only when the pair cannot fit. */
#commercialGuild .commercial-choice-title-row{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  align-content:flex-start!important;
  column-gap:7px!important;
  row-gap:1px!important;
  overflow:visible!important;
  white-space:normal!important;
}
#commercialGuild .commercial-choice-title-row b{
  position:relative!important;
  z-index:5!important;
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  color:#f7d99b!important;
  font-size:clamp(14px,1.18vw,19px)!important;
  font-weight:1000!important;
  line-height:1.05!important;
  text-shadow:0 2px 5px #000,0 0 6px #000!important;
}
#commercialGuild .commercial-choice-title-row small{
  position:relative!important;
  z-index:5!important;
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  color:#f1d79e!important;
  font-size:clamp(8.5px,.76vw,12px)!important;
  font-weight:900!important;
  line-height:1.05!important;
  text-shadow:0 1px 4px #000,0 0 5px #000!important;
}

/* The weapon shop remains the visual reference and is slightly larger. */
#commercialGuild .commercial-choice-card[data-card-key="weapon"] .commercial-choice-title-row b{
  font-size:clamp(16px,1.30vw,21px)!important;
}

/* Long names get smaller rather than being truncated. */
#commercialGuild .commercial-choice-card[data-card-key="adventurer-guild"] .commercial-choice-title-row b,
#commercialGuild .commercial-choice-card[data-card-key="accessory"] .commercial-choice-title-row b,
#commercialGuild .commercial-choice-card[data-card-key="hardware-wood-tool"] .commercial-choice-title-row b,
#commercialGuild .commercial-choice-card[data-card-key="bookbinding"] .commercial-choice-title-row b{
  font-size:clamp(11px,.98vw,16px)!important;
}

/* Description uses the widened canvas. No line clamp or hidden overflow. */
#commercialGuild .commercial-choice-description{
  position:relative!important;
  width:82%!important;
  height:auto!important;
  min-height:0!important;
  margin:3px 0 0!important;
  padding:0!important;
  box-sizing:border-box!important;
  color:#e7edf0!important;
  font-size:clamp(8.8px,.72vw,11.5px)!important;
  line-height:1.18!important;
  overflow:visible!important;
  display:block!important;
  -webkit-line-clamp:unset!important;
  -webkit-box-orient:initial!important;
  text-overflow:clip!important;
  white-space:normal!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-shadow:0 1px 3px #000,0 0 4px #000!important;
}

/* Existing A06 button: eliminate the old bottom/right inset and use
   the full lower-right canvas. */
#commercialGuild .commercial-choice-card button{
  position:absolute!important;
  z-index:6!important;
  left:43%!important;
  right:0!important;
  bottom:0!important;
  width:auto!important;
  height:24%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 8px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  border:7px solid transparent!important;
  border-radius:0!important;
  border-image-source:url("../assets/ui/commercial_guild/card_parts/common/A06_BUTTON_FRAME.webp")!important;
  border-image-slice:20 48 20 48 fill!important;
  border-image-width:7px!important;
  border-image-outset:0!important;
  border-image-repeat:stretch!important;
  background:transparent!important;
  background-image:none!important;
  color:#ffe3a4!important;
  font-family:inherit!important;
  font-size:clamp(8.5px,.72vw,11px)!important;
  font-weight:1000!important;
  line-height:1!important;
  text-shadow:0 2px 3px #000!important;
  box-shadow:none!important;
}
#commercialGuild .commercial-choice-card button>span{
  position:relative!important;
  z-index:1!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Compact landscape keeps the same full-canvas concept. */
@media (max-width:1200px) and (orientation:landscape){
  #commercialGuild .commercial-choice-illustration{
    left:0!important; top:0!important; width:36%!important; height:100%!important;
  }
  #commercialGuild .commercial-choice-info{
    left:19%!important; right:0!important; top:0!important; bottom:27%!important;
  }
  #commercialGuild .commercial-choice-title-row{column-gap:5px!important;row-gap:1px!important;}
  #commercialGuild .commercial-choice-title-row b{font-size:clamp(11.5px,1.22vw,17px)!important;}
  #commercialGuild .commercial-choice-card[data-card-key="weapon"] .commercial-choice-title-row b{font-size:clamp(13px,1.30vw,18px)!important;}
  #commercialGuild .commercial-choice-card[data-card-key="adventurer-guild"] .commercial-choice-title-row b,
  #commercialGuild .commercial-choice-card[data-card-key="accessory"] .commercial-choice-title-row b,
  #commercialGuild .commercial-choice-card[data-card-key="hardware-wood-tool"] .commercial-choice-title-row b,
  #commercialGuild .commercial-choice-card[data-card-key="bookbinding"] .commercial-choice-title-row b{
    font-size:clamp(9.5px,1.00vw,14px)!important;
  }
  #commercialGuild .commercial-choice-title-row small{font-size:clamp(7px,.78vw,10px)!important;}
  #commercialGuild .commercial-choice-description{width:82%!important;font-size:clamp(8px,.72vw,10px)!important;line-height:1.16!important;}
  #commercialGuild .commercial-choice-card button{left:43%!important;right:0!important;bottom:0!important;height:24%!important;font-size:clamp(7.5px,.72vw,9.5px)!important;}
}

/* Portrait/mobile keeps the existing one-column page behavior, but the
   card itself still uses its entire inner 9-slice canvas. */
@media (max-width:800px) and (orientation:portrait){
  #commercialGuild .commercial-choice-illustration{
    left:0!important; top:0!important; width:36%!important; height:100%!important;
  }
  #commercialGuild .commercial-choice-info{
    left:19%!important; right:0!important; top:0!important; bottom:27%!important;
  }
  #commercialGuild .commercial-choice-title-row{column-gap:4px!important;row-gap:1px!important;}
  #commercialGuild .commercial-choice-title-row b{font-size:clamp(11px,3.5vw,15px)!important;}
  #commercialGuild .commercial-choice-card[data-card-key="weapon"] .commercial-choice-title-row b{font-size:clamp(12px,3.8vw,16px)!important;}
  #commercialGuild .commercial-choice-card[data-card-key="adventurer-guild"] .commercial-choice-title-row b,
  #commercialGuild .commercial-choice-card[data-card-key="accessory"] .commercial-choice-title-row b,
  #commercialGuild .commercial-choice-card[data-card-key="hardware-wood-tool"] .commercial-choice-title-row b,
  #commercialGuild .commercial-choice-card[data-card-key="bookbinding"] .commercial-choice-title-row b{
    font-size:clamp(9px,3.1vw,13px)!important;
  }
  #commercialGuild .commercial-choice-title-row small{font-size:clamp(7px,2.2vw,9px)!important;}
  #commercialGuild .commercial-choice-description{width:82%!important;font-size:clamp(8px,2.5vw,10px)!important;line-height:1.16!important;}
  #commercialGuild .commercial-choice-card button{left:43%!important;right:0!important;bottom:0!important;height:24%!important;font-size:clamp(7.5px,2.3vw,9px)!important;}
}


/* ============================================================
 * v1.6 FINAL — outer-edge illustration bleed / last-gap removal
 * Scope: #commercialGuild only
 * Base: v1.5 inner-canvas maximization
 *
 * The A03 border is 13px. The illustration intentionally bleeds by that
 * amount so its visible artwork can touch/overlap the corner ornament.
 * No new asset is introduced.
 * ============================================================ */
#commercialGuild .commercial-choice-card{
  overflow:visible!important;
}
#commercialGuild .commercial-choice-illustration{
  left:-13px!important;
  top:-13px!important;
  width:calc(38% + 13px)!important;
  height:calc(100% + 26px)!important;
  z-index:7!important;
}
#commercialGuild .commercial-choice-illustration img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
}
/* Keep text above the artwork; only the artwork is allowed to bleed. */
#commercialGuild .commercial-choice-info{z-index:8!important;}
#commercialGuild .commercial-choice-card button{z-index:9!important;}
@media (max-width:1200px) and (orientation:landscape){
  #commercialGuild .commercial-choice-illustration{
    left:-10px!important; top:-10px!important;
    width:calc(38% + 10px)!important; height:calc(100% + 20px)!important;
  }
}
@media (max-width:800px) and (orientation:portrait){
  #commercialGuild .commercial-choice-illustration{
    left:-11px!important; top:-11px!important;
    width:calc(38% + 11px)!important; height:calc(100% + 22px)!important;
  }
}

/* ============================================================
 * v1.6 FINAL — outer-edge illustration + reference tightening
 * Scope: #commercialGuild only
 *
 * Reference intent:
 *   - title/status line begins around the icon's upper-right area
 *   - description begins after the icon, not over the artwork
 *   - action button keeps the full lower-right width
 *   - illustration remains allowed to touch/overlap the outer corners
 * ============================================================ */
#commercialGuild .commercial-choice-info{
  left:24%!important;
  right:0!important;
  top:0!important;
  bottom:27%!important;
}
#commercialGuild .commercial-choice-title-row{
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
}
#commercialGuild .commercial-choice-description{
  width:86%!important;
  margin:3px 0 0 14%!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  display:block!important;
  -webkit-line-clamp:unset!important;
  text-overflow:clip!important;
  white-space:normal!important;
}
@media (max-width:1200px) and (orientation:landscape){
  #commercialGuild .commercial-choice-info{left:24%!important;right:0!important;top:0!important;bottom:27%!important;}
  #commercialGuild .commercial-choice-description{width:86%!important;margin-left:14%!important;}
}
@media (max-width:800px) and (orientation:portrait){
  #commercialGuild .commercial-choice-info{left:23%!important;right:0!important;top:0!important;bottom:27%!important;}
  #commercialGuild .commercial-choice-description{width:88%!important;margin-left:12%!important;}
}


/* ============================================================
 * v1.7 FINAL — weapon-reference alignment applied to all cards
 * Scope: #commercialGuild only
 *
 * Reference:
 *   Weapon shop card:
 *   - title + status/cost right-aligned as one group
 *   - description smaller and unobtrusive
 *   - A06 action frame widened and aligned with its button hit area
 *   - same composition rules applied consistently to every shop card
 * ============================================================ */

/* All shop titles/statuses form one right-aligned group. */
#commercialGuild .commercial-choice-title-row{
  width:100%!important;
  max-width:none!important;
  justify-content:flex-end!important;
  align-items:baseline!important;
  flex-wrap:nowrap!important;
  column-gap:8px!important;
  row-gap:0!important;
  text-align:right!important;
  overflow:visible!important;
}

/* Shop name stays prominent; status/cost sits to its right. */
#commercialGuild .commercial-choice-title-row b{
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:72%!important;
  text-align:right!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Registered / change / required G is right-aligned with the title group. */
#commercialGuild .commercial-choice-title-row small{
  flex:0 0 auto!important;
  max-width:42%!important;
  text-align:right!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Keep long shop names readable rather than allowing the title group
   to push status/cost outside the card. */
#commercialGuild .commercial-choice-card[data-card-key="adventurer-guild"] .commercial-choice-title-row b{
  font-size:clamp(10.5px,.94vw,15px)!important;
}
#commercialGuild .commercial-choice-card[data-card-key="accessory"] .commercial-choice-title-row b{
  font-size:clamp(10.5px,.94vw,15px)!important;
}
#commercialGuild .commercial-choice-card[data-card-key="hardware-wood-tool"] .commercial-choice-title-row b{
  font-size:clamp(10px,.90vw,14.5px)!important;
}
#commercialGuild .commercial-choice-card[data-card-key="bookbinding"] .commercial-choice-title-row b{
  font-size:clamp(10.5px,.94vw,15px)!important;
}

/* Weapon shop is the reference card. */
#commercialGuild .commercial-choice-card[data-card-key="weapon"] .commercial-choice-title-row b{
  font-size:clamp(16px,1.30vw,21px)!important;
}

/* Descriptions are deliberately smaller so the title/status line dominates. */
#commercialGuild .commercial-choice-description{
  width:86%!important;
  margin:2px 0 0 14%!important;
  font-size:clamp(8px,.66vw,10.5px)!important;
  line-height:1.16!important;
  text-align:left!important;
}

/* Widen and align the A06 action frame. The frame is the button itself,
   so the visual frame and click area always share exactly the same box.
   v1.8.148 reference adjustment: increase frame height to 1.30x. */
#commercialGuild .commercial-choice-card button{
  left:42%!important;
  right:1.5%!important;
  bottom:0!important;
  height:32.5%!important;
  min-width:0!important;
  width:auto!important;
  padding:0 10px!important;
  box-sizing:border-box!important;
  border-image-width:8px!important;
  font-size:clamp(8.5px,.74vw,11.5px)!important;
  line-height:1!important;
  text-align:center!important;
}

/* Keep the button label centered inside the widened frame. */
#commercialGuild .commercial-choice-card button>span{
  display:flex!important;
  width:100%!important;
  height:100%!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

/* Preserve the same reference composition in compact landscape. */
@media (max-width:1200px) and (orientation:landscape){
  #commercialGuild .commercial-choice-title-row{
    justify-content:flex-end!important;
    column-gap:5px!important;
    flex-wrap:nowrap!important;
  }
  #commercialGuild .commercial-choice-title-row b{
    max-width:72%!important;
    text-align:right!important;
    font-size:clamp(11px,1.20vw,16px)!important;
  }
  #commercialGuild .commercial-choice-card[data-card-key="weapon"] .commercial-choice-title-row b{
    font-size:clamp(13px,1.30vw,18px)!important;
  }
  #commercialGuild .commercial-choice-card[data-card-key="adventurer-guild"] .commercial-choice-title-row b,
  #commercialGuild .commercial-choice-card[data-card-key="accessory"] .commercial-choice-title-row b,
  #commercialGuild .commercial-choice-card[data-card-key="hardware-wood-tool"] .commercial-choice-title-row b,
  #commercialGuild .commercial-choice-card[data-card-key="bookbinding"] .commercial-choice-title-row b{
    font-size:clamp(9px,.96vw,13.5px)!important;
  }
  #commercialGuild .commercial-choice-title-row small{
    max-width:42%!important;
    font-size:clamp(7px,.78vw,10px)!important;
  }
  #commercialGuild .commercial-choice-description{
    width:86%!important;
    margin-left:14%!important;
    font-size:clamp(7.5px,.66vw,9.5px)!important;
    line-height:1.14!important;
  }
  #commercialGuild .commercial-choice-card button{
    left:42%!important;
    right:1.5%!important;
    bottom:0!important;
    height:32.5%!important;
    border-image-width:6px!important;
    font-size:clamp(7.5px,.74vw,10px)!important;
  }
}

/* Portrait/mobile keeps the same semantic hierarchy without forcing the
   desktop proportions. */
@media (max-width:800px) and (orientation:portrait){
  /* Mobile portrait: keep the same 4-column x 3-row shop layout as PC. */
  #commercialGuild .commercial-shop-select-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
    gap:3px!important;
    padding:1px 1px 2px!important;
    overflow:hidden!important;
    overflow-y:hidden!important;
    overflow-x:hidden!important;
  }
  #commercialGuild .commercial-choice-card{
    min-height:0!important;
    height:100%!important;
    border-width:7px!important;
    border-image-width:7px!important;
  }
  #commercialGuild .commercial-choice-title-row{
    justify-content:flex-end!important;
    column-gap:2px!important;
    flex-wrap:nowrap!important;
  }
  #commercialGuild .commercial-choice-title-row b{
    max-width:72%!important;
    text-align:right!important;
    font-size:clamp(10px,3.3vw,14px)!important;
  }
  #commercialGuild .commercial-choice-card[data-card-key="weapon"] .commercial-choice-title-row b{
    font-size:clamp(11px,3.6vw,15px)!important;
  }
  #commercialGuild .commercial-choice-card[data-card-key="adventurer-guild"] .commercial-choice-title-row b,
  #commercialGuild .commercial-choice-card[data-card-key="accessory"] .commercial-choice-title-row b,
  #commercialGuild .commercial-choice-card[data-card-key="hardware-wood-tool"] .commercial-choice-title-row b,
  #commercialGuild .commercial-choice-card[data-card-key="bookbinding"] .commercial-choice-title-row b{
    font-size:clamp(8.5px,2.9vw,12px)!important;
  }
  #commercialGuild .commercial-choice-title-row small{
    max-width:42%!important;
    font-size:clamp(6.5px,2.1vw,9px)!important;
  }
  #commercialGuild .commercial-choice-description{
    width:86%!important;
    margin-left:14%!important;
    font-size:clamp(7.5px,2.35vw,10px)!important;
    line-height:1.14!important;
  }
  #commercialGuild .commercial-choice-card button{
    left:42%!important;
    right:1.5%!important;
    bottom:0!important;
    height:32.5%!important;
    border-image-width:7px!important;
    font-size:clamp(7.5px,2.3vw,10px)!important;
  }
}

/* ============================================================
 * UI-LAYOUT-007 — Commercial Guild follows the common physical page bottom.
 * The page shell now stops at the visible bottom-navigation top edge, so the
 * former internal navigation-height reserve would create a duplicate gap.
 * Scope: #commercialGuild only. No card order / logic / asset change.
 * ============================================================ */
.main .center #commercialGuild.page.commercial-guild-select-page.active:not(#home):not(#armorShop):not(#dungeonRun){
  padding-bottom:0!important;
}
#commercialGuild .commercial-guild-select-layout{
  flex:1 1 0!important;
  min-height:0!important;
  height:auto!important;
}
#commercialGuild .commercial-shop-select-grid{
  height:100%!important;
  min-height:0!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  align-content:stretch!important;
  align-items:stretch!important;
}