/* XLarge */

@media screen and (max-width: 3840px) {

	/*命名區塊 */
        .nameInput{
			width: 100%;
			height: auto;
			background-color: var(--theme-color);
			padding: 2rem 0;
			text-align: center;
			display: flex;
			justify-content: center;
			gap: 10px;
            flex-direction:column;
            color: white;
		}
        .inputItems{
            display: flex;
			justify-content: center;
			gap: 10px;
            flex-direction:row;
        }
        #familyName{
            font-size: 1.2rem;
            width: 100px;
            line-height: 1rem;
        }
    /*三才清單*/
    .typeDes{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 1rem;
    }
    .typeSec{
        background: white;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;

    }
    .typeSec .selected .typeTitle,.typeSec .typeTextSec:hover .typeTitle{
        background-color: var(--light-bg-yellow);
    }
    .typeSec .selected .typeTitle .typeSet,.typeSec .typeTextSec:hover .typeTitle .typeSet{
        color: var(--basic-font-color);
    }
    .typeTextSec{
        display: flex;
        flex-direction: column;
        flex-wrap:wrap;
        align-items: center;
        border-bottom: 1px dotted;
        margin: 20px;
    }
    .typeTextSec .listSec{
        display: flex;
        flex-direction: row;
        flex-wrap:wrap;
        align-items: center;
        justify-content:flex-start;
        padding: 1rem 0.5rem;
    }
    .typeSummary{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        margin: 10px;
        gap: 10px;
        border: var(--light-border);
        border-radius: 10px;
        width: 10%;
        min-width: fit-content;
    }
    .typeSummary:hover{
        border: var(--theme-border);
    }
    .typeTitle{
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items:center;
        width: 100%;
        justify-content: center;
        background-color: var(--gray-bg-color);
        box-shadow:var(--shadow-s);
        border-radius:10px 10px 0 0;
        padding: 0.5rem 0rem;
        cursor: pointer;
    }
    .typeTitle .row{
        display: flex;
        flex-direction: row;
        align-items:center;
        gap: 5px;
    }
    .typeSet{
        font-size: var(--font-h4);
        letter-spacing: 2px;
    }
    .totalInfo{
        display: flex;
        gap: 0px;
        align-items:center;
        flex-direction: column;
    }
    .strokInfo{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap:15px;
    }
    .strokMean{
        color: var(--highlight-color);
    }
    .strokDetail{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 5px;
        min-width: fit-content;
    }
    .typeInfo{
        display: flex;
        gap: 5px;
        align-items:center;
        flex-direction: row;
        font-size: var(--font-small);
        flex-wrap: nowrap;
    }
    .totalStrok{
        font-size: var(--font-h3);
        color: var(--highlight-color);
        display: flex;
        align-items:flex-end;
    }
    .checkNote{
        font-size: 0.8rem;
        padding-bottom: 10px;
    }
    /*名字清單頁*/
    .nameSummary{
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color:var(--bg-color);
        justify-content:center;
    }
    .summaryCol{
        margin: 0.5rem;
        gap: 5px;
    }

    /*名字選擇*/
    .birthAttr{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0.5rem;
        padding: 1rem;
        font-size: var(--font-small);
        gap: 0.5rem;
    }
    .listTitle{
        font-size: var(--font-h4);
        padding: 0 2rem;
        cursor: pointer;
        gap: 10px;
        display: flex;
        align-items: center;
        flex-direction: row;
    }
    .partCol,.attrCol{
        display: flex;
        gap: 5px;
        padding: 0.5rem;
        font-size: var(--font-basic);
        border-bottom:1px dotted var(--basic-font-color);
        flex-direction: column;
        align-items:center;
    }
    .charCol{
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: var(--font-basic);
        margin: 0.5rem;
        align-items:center;
        width: 100%;
    }
    .checkItem{
        display: flex;
        margin-right: 5px;
        flex-wrap: nowrap;
        width: fit-content;
        border:1px solid var(--gray-bg-color);
        border-radius: 10px;
        padding:0.5rem;
        cursor: pointer;
    }
    .charFilter{
        max-height: 400px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        height: 60%;
        box-shadow: var(--shadow-in);
        padding: 1rem 0;
        margin: 1rem 0;
        background-color:var(--bg-color);
        width: 100%;
    }
    .soundNote{
        display: flex;position: absolute;font-size: var(--font-small);float: inline-end;background-color: var(--gray-bg-color);color: var(--theme-color);padding: 5px;border-radius: 5px;
    }
    .nameSec{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0.5rem 1rem;
        border-bottom:1px solid var(--gray-bg-color);
    }
    .nameSec .charPartList,.nameSec .charAttrList{
        display: flex;
        gap: 10px;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 90%;
        color: var(--gray-bg-color);
    }

    .nameSec .charList{
        display: flex;
        gap: 5px;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 90%;
        min-width: 60%;
        justify-content:center;
        margin-bottom: 1rem;

    }
    .charInput {
        font-size: var(--font-h4);
        padding:0.5rem 1rem;
        border: 1px solid var(--gray-bg-color);
        border-radius: 10px;
    }
    .nameSec .charInput{
        cursor: pointer;
        padding: 1rem;
    }
    .nameSec .charInput:hover{
        color: var(--second-color);
        border: 1px solid var(--theme-color);
    }
    .nameSec .checked,.fullNameSec .checked,.sNameList .checked{
        color: var(--highlight-color);
        border: 1px solid var(--highlight-color);
        background-color: var(--bg-gray);
    }
    .charPartList .selected,.charAttrList .selected{
        color: var(--highlight-color);
        border: 1px solid var(--highlight-color);
        background-color: var(--bg-gray);
    }

    /*名字結果列表*/
    .nameSet{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin:1rem;
        padding: 0.5rem;
        gap: 1rem;
    }
    .n2Sec{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .fullNameSec{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        padding:0.5rem;
    
    }
    .fullName{
        display: flex;
        flex-direction: column;
        align-items: center;
        letter-spacing: 1px;
        border: 1px solid var(--gray-bg-color);
        padding:3px 12px;
        cursor: pointer;
        border-radius: 10px;
    }
    .fullName:hover{
        color: var(--second-color);
        border:1px solid var(--theme-color);
    }
    .shareFunc{
        display: flex;
        background-color: var(--theme-color);
        color: white;
        padding: 0 1rem;
        align-items:center;
        justify-content: center;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    .pcshareIcon{
        display: flex;
        color: white;
        cursor: pointer;
        flex-direction: row;
        padding: 0.5rem 1rem;
        width: fit-content;
        align-items: center;
        gap: 0.5rem;
        margin: 1rem 2rem;
        border: var(--light-border);
        border-radius: 10px;
    }
    .pcshareIcon:hover{
        border: var(--green-border);
        color: var(--dark-green);
        background-color: var(--bg-gray);
    }
    .nameSaved{
        z-index: 10;
        position: fixed;
        right: 20px;
        bottom: 10%;
        display: flex;
        vertical-align: bottom;
        align-items: flex-end;
        flex-direction: column;
        gap: 1rem;
        max-height: 60%;
    }
    .nameSaved .nameFolder{
        font-size: var(--font-basic);
        color: var(--highlight-color);
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        background-color: white;
        border-radius: 50%;
        width: 3.5rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
    }
    .nameSaved .nameFolder:hover{
        box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 10px;
        background-color: var(--gray-bg-color);
        margin-top: 1px;
    }
    .nameSaved .active{
        color: var(--theme-color);
    }
    .folderNameList{
        display: flex;
        padding: 1rem;
        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        border-radius: 10px;
        flex-direction:column;
        overflow-y: auto;
    }
    .nameSavedTitle{
        display: flex;
        justify-content: center;
        font-size: var(--font-small);
        margin-bottom: 0.5rem;
    }
    .nameSavedList{
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: 70%;
        overflow-y: scroll;
    }
    .showIcon{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 5rem;
    }
    .listNote{
        position: relative;
        bottom: -0.5rem;
        color: var(--highlight-color);
        text-shadow: var(--shadow-m);
    }
    .nameGroup{
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .groupName{
        font-size: var(--font-small);
        color: var(--highlight-color);
    }
    .groupNameSet{
        font-size: var(--font-basic);
        color: var(--main-font-color);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        cursor: pointer;
    }
    .groupNameSet:hover{
        background-color: var(--bg-gray);
    }
    .groupNameSet .remove{
        color: var(--theme-color);
        font-size: var(--font-small);
        background-color: var(--bg-color);
        border-radius: 50%;
        height: 30px;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .groupNameSet .remove:hover{
        color: var(--highlight-color);
    }
    .nameSavedFunc{
        display: flex;
        height: fit-content;
        flex-direction: row;
        justify-content: space-around;
        padding: 0.5rem;
    }
    /*名字組合頁*/
    .nameGroupSec{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 1rem 0 2rem 0;
    }
    .namesSec{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }
    .nameGroupSec .groupNameSet{
        padding: 0.5rem 1rem;
        border: 1px solid white;
    }
    .nameGroupSec .groupNameSet:hover{
        border: 1px solid var(--theme-color);
        color: var(--hight-font-color);
        border-radius: 10px;
    }
    /*名字組合列表*/
    .nameCharSec{
        width: 80%;
        margin:0 auto 2rem;
        gap: 1rem;
    }
    .nameCharSec .active{
        background-color: var(--light-bg-yellow);
    }
    .charTopBar {
        position: fixed;
        top: 0px;
        left: 0px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items:center;
        width: 100%;
        justify-content: center;
        background-color: var(--gray-bg-color);
        box-shadow:var(--shadow-s);
        border-radius:10px 10px 0 0;
        padding: 0.5rem 0rem;
        cursor: pointer;
    }
    .nameChoice{
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items:center;
        width: 100%;
        justify-content: center;
        background-color: var(--gray-bg-color);
        box-shadow:var(--shadow-s);
        border-radius:10px 10px 0 0;
        padding: 0.5rem 0rem;
        cursor: pointer;
    }
    .sNameList{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 1.5rem;
        gap: 2rem;
    }
    .shareNameSec {
        display: flex;
        flex-direction: column;
        width: 28%;
        padding: 1rem;
        border-bottom: 1px dotted var(--light-gray);
        border-top: 1px dotted transparent;
        border-left: 1px dotted transparent;
        border-right: 1px dotted transparent;
    }
    .bigNameItem{
        display: flex;
        flex-direction: row;
        color: var(--dark-green);
    }
    .nameInfoItem{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }
    .countS{
        margin-left: 5px;
        margin-bottom: 3px;
        display: flex;
        align-items:flex-end;  
    }
    .stroksForm {
        gap: 1rem;
        margin: 1rem 0.5rem;
    }
    .animalForm {
        gap: 1rem;
        margin: 1rem 0.5rem;
        
    }
    .animalCol {
        gap: 1rem;
        display: flex;
        align-items:center;
        border-bottom: 1px dotted var(--light-gray);
        padding:1rem 0;
    }
    .parts {
        gap: 0.5rem;
    }
    .中{
        display: none;
    }
    .兇{
        display: none;
    }
    .shareBar{
        display: none;
    }
    .isLike{
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 1rem;
        font-size: var(--font-small);
        padding-left: 2rem;
        padding-bottom: 5px;

    }
    .isLike a{
        width: 3rem;
        text-align: center;
        border: 1px solid transparent;
        cursor: pointer;
    }
    .isLike a:hover{
        border: 1px solid var(--gray-bg-color);
        border-radius:10px;
    }
    .disLikeName{ 
        color: rgba(180,180,180,0.7);
    }
}

/* Large */
@media screen and (max-width: 1920px) {


}

/* Medium */

@media screen and (max-width: 1280px) {


}
/* XLarge */
@media screen and (max-width: 540px) {
    .sNameList{
        justify-content: center;
        padding: 0.5rem;
        width: 100%;
        margin: 0 auto;
    }
    .shareNameSec {
        display: flex;
        flex-direction: column;
        width: 95%;
    }
    .strokDetail,.strokMean{
        font-size: var(--font-small);
    }
    .nameSavedFunc{
        justify-content: space-around;
        padding: 0.5rem;
    }
    .nameCharSec{
        width: 90%;
        gap: 1.5rem;
        display: flex;
        flex-direction: column;
    }
    .listTitle{
        display: flex;
        flex-direction: row;
    }
    .filter{
        text-align:center;
    }
    .typeSummary{
        margin: 0px;
        width: fit-content;
    }
    .typeTextSec .listSec{
        justify-content:space-around;
    }
    .inputItems{
        flex-direction: column;
        align-items:center;
    }
    .shareBar{
        display: flex;
        background-color: var(--theme-color);
        color: white;
        padding: 0.5rem;
        align-items:center;
        justify-content: center;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        gap: 1rem;
    }
    .charList{
        max-width:100%!important;
    }
    .shareFunc{
        display: none;
    }
}