@charset "utf-8";

/* // キャラクター
---------------------------------------------------------------------------------------------------- */
#area-status {
  min-height: 0%;
  margin: var(--box-v-gap) 0;
  grid-template-columns: .71fr 1.25fr 1.4fr;
  grid-template-areas:
    "HED HED IMG"
    "PRF PRF IMG"
    "STT ST2 IMG"
    "SKL SPE SPE"
    "SKL WPN WPN"
    "SKL ARM ARM"
    "SKL FSN FSN"
    "ART ART ART"
  ;
}
@media screen and (width <= 735px){
  #area-status {
    grid-template-columns: 1fr;
    grid-gap: var(--box-v-gap) var(--box-h-gap);
    grid-template-rows: auto auto auto;

    grid-template-areas:
    "HED HED IMG"
    "PRF PRF IMG"
    "STT ST2 ST2"
    "SKL WPN WPN"
    "SKL WPN WPN"
    "SKL ARM ARM"
    "SPE FSN FSN"
    "ART ART ART"
    ;
  }
}

#profile input {
  max-width: 10.5em;
}
/*
#clan {
  grid-area: CLN;
  display: grid;
  grid-template-columns: 1fr 2fr;
}

#level dl {
  display: grid;
  grid-template-rows: max-content 1fr;
  > dd {
    line-height: 1.4;
    font-size: 100%;
  }
  > dd input {
    width: 4em;
  }
  > dd b {
    font-size: 120%;
  }
}*/
#status {
  overflow-x: auto;
  > dl > dd.status {
    > dl dd {
      font-size: 100%;
    }
    > dl dd.base {
      width: 1em;
    }
    > dl dd.add {
      margin-left: 0px;
      grid-column: 3;
      display: grid;
      grid-template-columns: max-content 1fr;
      align-items: center;
      font-size: 90%;
    }
  }

  .add-del-button,
  .annotate {
    grid-column: span 3;
  }
}

#status2 {
  overflow-x: auto;
}
#status2 > table {
  & tbody {
    .value { font-size: 90% }
    .calc  { font-size: 70% }
    .add   { font-size: 90% }
  }

}

#magi {
  overflow-x: auto;
}
#magi table colgroup {
  .name   { width: 9.2em; }
  .timing { width: 7.5em; }
  .target { width: 7.5em; }
  .cond   { width: 7.5em; }
  @media screen and (width <= 735px){
    .note   { width: 17.5em; }
  }
}
#magi table td.name input {
  width: calc(100% - 2em);
}

#history > table {
  & thead {
    & th:first-child { width: 1.4em; }
    .date        { width:   6em; }
    .title       { width:  12em; }
    .gm          { width:   6em; }
    .member      { width:  auto; }
  }
  @media screen and (width <= 735px){
    & { table-layout: fixed; }
    & thead .title  { width: 12em; }
    & thead .member { width: 16em; }
  }
  
}
/*
form#mode-clan #area-status {
  min-height: 0%;
  margin: var(--box-v-gap) 0;
  grid-template-columns: 1.56fr .4fr 1.4fr;
  grid-template-areas:
    "PRF LVL IMG"
    "MEM MEM IMG"
    "STT STT IMG"
  ;
  @media screen and (width <= 735px){
    grid-template-columns: 1.56fr .4fr;
    grid-template-areas:
      "IMG IMG"
      "PRF LVL"
      "MEM MEM"
      "STT STT"
    ;
  }
}
form#mode-clan #profile #rule {
  grid-column: span 2;
  & input {
    max-width: calc(100% - 2em);
  }
}

form#mode-clan #member {
  & .name { width: 40% }
  & .url  { width: auto }
  & table:first-of-type {
    margin-top: -1.2em;
  }
  & table:nth-of-type(2) {
    margin-top: -2.2em;
  }
}
form#mode-clan #attribute li {
  grid-template-columns: max-content auto max-content;
  align-items: center;
}
*/