/* 網站環境設定 */
html, body{
    font-family: 'Arial', '微軟正黑體', '黑體', '黑體-繁', '新細明體';

    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color:    transparent;
    tap-highlight-color:         transparent;

    -ms-user-select:none;
}

::-webkit-selection {background: transparent;}
::-moz-selection {background: transparent;}
::selection {background: transparent;}

html, body {
  height: 100%;
  overflow: auto; /* 外層不滾動 */
}
#content_area {
  height: 100vh;
  overflow: auto; /* ✅ 可滾 */
  -webkit-overflow-scrolling: touch;
}

html {
    position: relative;
    min-height: 100%;
}

a{color: #FFF;}

::-moz-selection { /* Code for Firefox */
    background: transparent;
}

::selection {
    background: transparent;
}

*{margin: 0; padding: 0;}

/* 等候下載頁面 */
#loading-page{position:fixed; width:100%; height:100%; top: 0; z-index:999999; background:none repeat scroll 0 0 #fff;}
.loading-anime{
    left: 50%;
    top: 40%;
    margin-left: -200px;
    margin-top: -150px;
    position: absolute;
    z-index: 9999;
}

ul, li, ol{list-style: none; padding: 0; margin: 0; font-size: 0;}

a{text-decoration:none;}

/* position & local */
.pr{position: relative;}
.pf{position: fixed;}
.pa{position: absolute;}

/* float */
.fl{ float:left; }
.fr{ float:right; }
.fi{ float:inherit; text-align: center;}

/* Bootstrap 設定 */
#header .container {
	padding: 0;
    margin: 0;
}

/* 頁面基礎設定 */
body{color: #666; font-size: 0;}

a,
a:visited,
a:link,
a:hover,
a:active{color: #666; text-decoration: none;}

html{
    position: relative;
    min-height: 100%;
}

body {background-color: #FFF;}

.color1{/*color:coral;*/}
.color2{color:coral;}

.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus{
  background-color: #ef8200;
  border-color: #ef8200;
}

#header{
    padding: 10px 20px;
    font-size: 16pt;
    border-bottom: #eee 1px solid;
    line-height: ;
    
    display: block;
    overflow: auto;
    
    font-weight: bolder;
    
    text-align: center;
    background-color: #f9c009;
}

#header .title{
    float: left; 
    font-weight: 600;
    margin-top: 10px;
}

@media only screen and (max-device-width: 960px){
    #header .title{
        margin-top: 0px;
    }
    
    #header .line{display:none;}
}

#header button{
    float: right;
    font-size: 100%;
   /* width: 100px;*/
}

#container{
    background-image: url(../images/img_logo.png);
    background-position: center 50px;
    background-repeat: no-repeat;
}

table{background-color: #fff;}

.container h1 span{margin-right: 0.2em;}

@media only screen and (max-device-width: 960px){
    .container h1 span{display: block;}
}

.recaptcha{
    margin-bottom: 20px; 
}

.footer{
    font-size: 12pt;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 15px 0;
    /*border-top: #666 1px solid;*/
    text-align: center;
    
    background-color: #ef8200; 
    color: #FFF;
}

.list-footer{text-align: center; margin: 30px 0 0 0;}
.list-footer button{width: 100%; font-size: 21pt; margin-bottom: 30px;}

.edit .list-footer button:nth-child(2),
.view .list-footer button:nth-child(2){margin-left: 10%;}
.edit .list-footer button,
.view .list-footer button{width: 40%; font-size: 100%; display: inline-block;}

@media only screen and (max-device-width: 960px){
    .view .list-footer button{font-size: 80%;}
}

@media only screen and (max-device-width: 560px){
    #header .span-br{display: block; text-align: left;}
}

@media only screen and (max-device-width: 320px){
    #header{padding-right: 10px; padding-left: 10px;}
    .footer .span-br{display: block; text-align: center;}
}

/* Google 驗證器RWD */
#rc-imageselect, 
.g-recaptcha {
    transform:scale(0.99);
    -webkit-transform:scale(0.99);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
}

@media only screen and (max-device-width: 320px){
    #rc-imageselect, 
    .g-recaptcha {
        transform:scale(0.86);
        -webkit-transform:scale(0.86);
        transform-origin:0 0;
        -webkit-transform-origin:0 0;
    }
}

/* 登入頁面 & 設定密碼頁面 | 表單設定 */
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 15% auto 0 auto;
}

.form-signin .form-signin-heading,
.form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* 主頁面 */
.main-page .container .row{
    text-align: center;
    margin-top: 10%; 
}

.main-page .container button{
    font-size: 16pt;
    width: 80%;
    padding: 10px 0;
    margin: 30px 0;
}

@media only screen and (orientation: landscape) {
    .main-page .container .row{
        margin-top: 3%; 
        padding-bottom: 3%;
    }
    .main-page .container button{
        width: 100%; 
        margin: 10px 0;
    }
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
    .footer{position: relative;}
}

@media only screen and (max-device-width: 560px){
    .main-page .container button{width: 100%;}
    .main-page .container .row{margin-top: 10%;}
    .main-page .container button{margin: 30px 0;}
}

@media only screen and (max-device-width: 320px){
    .main-page .container .row{margin-top: 3%;}
    .main-page .container button{margin: 10px 0;}
}

@media only screen and (min-device-width: 960px){
    .main-page .container .row{
        margin-top: 10%; 
    }
    .main-page .container button{
        width: 80%;
        margin: 30px 0;
    }
}

/* 我的策略方向書 & 所有的策略方向書 */
.my-page .container.main-block{
    width: 1000px;
    padding: 80px 0;
    text-align: center;
}

.my-page .title{overflow: auto;}

.my-page h1{
    margin-bottom: 30px;
}

.my-page .page{
    font-size: 14pt;
    margin-bottom: 30px;
}

.my-page .row{
    background-color: #fff;
}

.my-page .row div{
    display: table-cell;
    border: #111 1px solid;
    margin: 0; 
    padding: 10px 5px; 
    font-size: 16pt;
    vertical-align: middle;
}

.my-page .row .num{width: 5%; border-right: none;}
.my-page .row .date{width: 15%; border-right: none;}
.my-page .row .customer{width: 25%; border-right: none;}
.my-page .row .plan{width: 24%; border-right: none;}
.my-page .row .sales{width: 24%; border-right: none;}
.my-page .row .tool{width: 7%;}

.my-page .row.pc-title .num{width: 52px;}
.my-page .row.pc-title .date{width: 155px;}
.my-page .row.pc-title .customer{width: 257px;}
.my-page .row.pc-title .plan{width: 247px;}
.my-page .row.pc-title .sales{width: 247px;}
.my-page .row.pc-title .tool{width: 72px;}

.my-page .tool button{font-size: 12pt;}
.my-page .tool a:first-child button{margin-bottom: 10px;}

.pc-title{display: block;}
.sp-title{display: none;}

@media only screen and (max-device-width: 960px){
    .pc-title{display: none;}
    .sp-title{display: block; background-color: #fceba3;}

    .my-page .container.main-block{
        width: auto;
        padding: 80px 0;
        text-align: center;
        overflow: auto;
    }
    .my-page .container{padding: 0;}
    .my-page .row{
        margin-bottom: 50px; 
        width: 90%; 
        margin: 0 auto; 
        margin-bottom: 50px;
        border: #ccc 1px solid;
    }
    .my-page .row div{
        display: inline-block; 
        border: none;
        padding: 10px 30px;
    }
    .my-page .row .num{width: 100%; border-right: none;}
    .my-page .row .date{width: 100%; border-right: none;}
    
    .my-page .row .customer{width: 100%; border-right: none;}
    .my-page .row .plan{width: 100%; border-right: none;}
    .my-page .row .sales{width: 100%;}
    .my-page .row .tool{width: 100%; border-top: #111 1px solid;} 
    
    .my-page .tool a:first-child button{margin-bottom: 0px; margin-right: 16px;}
}

.my-page .back{
    font-size: 16pt;
    margin: 50px auto;
    width: 50%;
}

.my-page .footer{
	position: relative;
}

/* 製作策略方向書 */
.edit{font-size: 16pt;}
.edit-block{padding: 80px;}
.edit-block .inner-block{
    display: block;
    overflow: auto;
    padding-bottom: 20px;
}

.edit-block .inner-block>div{padding: 5px 0;}

.edit-block .row{
    border: #aaa 1px solid;
    padding: 10px 30px;
}
.edit .edit-block .title{
    padding: 15px 0;
    border-bottom: #aaa 1px solid;
    margin-bottom: 30px;
    font-size: 24pt;
    
    display: block;
    overflow: auto;
}

.edit .edit-block .title .btn-block{width: auto; float: right;}
.edit .edit-block .title button{font-size: 16pt;}

.edit input{width: 100%;}
.edit textarea{width: 100%; height: 300px; resize: none;}
.edit .footer{position: relative;}

@media only screen and (max-device-width: 960px){
    .edit-block{padding: 0;}
    .edit-block .row{border: none;}
    .edit .edit-block .title{padding: 15px 0; text-align: center;}
    .edit .edit-block .title .btn-block{float: none; margin-top: 10px;}
    .edit textarea{height: 100px;}
    .edit .list-footer button{margin-top: 0px;}
}

@media only screen and (max-device-width: 320px){
    .edit .edit-block .title{font-size: 16pt;}
    .edit .edit-block .title button{}
}

/* 預覽 */
.view{font-size: 16pt;}
.view #header button{
    width: auto;
}
.view #header button.print{margin-left: 20px; margin-right: 20px;}

.view table{width: 100%; margin: 50px 0;}

.view table.table>tbody>tr>th,
.view table.table>thead:first-child>tr:first-child>th,
.view table.table>thead>tr>th{border: #111 1px solid;}

.view table.table>thead>tr>th{padding: 30px; font-size: 24pt;}
.view table.table>thead>tr>th .logo{margin-right: 30px;}
.view table.table>thead>tr>th>span{margin-left: 10px;}

@media only screen and (max-width: 960px){
    .view table.table>thead>tr>th{font-size: 125%; text-align: center; padding: 20px 0 10px 0;}
    .view table.table>thead>tr>th>span{display: block; margin: 0;}
    .view table.table>thead>tr>th .logo{
        margin: 0px auto 20px auto;
        display: block;
        width: 50%;
    }
}

.view th,
.view td{
    border: #111 1px solid;
    padding: 18px;
}

.view .list_date th span{margin-left: 10px; letter-spacing: 3px;}
.view .list_date th span.block{margin-left: 0px; letter-spacing: inherit; display: block;}

.view td.text{height: 150px;}

.view td{width: 25%;}

.view .sign-block th,
.view .sign-block td{text-align: center;}
.view .sign-block td button{font-size: 16pt; padding: 10px 30px; font-weight: bolder;}
.view .sign-block td button.check{background-color: darkorange; border: none;}

.view .footer{position: relative;}


@media only screen and (max-device-width: 960px){
    .view #header{
        padding: 10px;
    }
    
    .view #header button.print{margin-right: 0px;}
    
    .view .container.view-block {
        width: 100%;
        display: block;
        overflow-x: auto; /* ✅ 明確允許左右滾動 */
        overflow-y: hidden; /* 如果不希望上下滾動 */
        -webkit-overflow-scrolling: touch; /* ✅ iOS 專用 */
        touch-action: pan-x; /* ✅ 明確告訴瀏覽器允許橫向滑動 */
        white-space: nowrap; /* ✅ 若內容是 inline-block，避免自動換行 */
    }

    .view .container.view-block table {
    width: max-content; /* ✅ 讓表格可超出容器寬度 */
    min-width: 100%; /* 保證至少跟容器一樣寬 */
    }
    
    .view .view-tool{
        clear: both;
        padding-top: 10px;
    }
    
    .view .sign-block th,
    .view .sign-block td{font-size: 14pt; padding-left: 5px; padding-right: 5px;}
    .view .sign-block td button{font-size: 14pt; padding: 5px; font-weight: bolder;}
    .view .sign-block td button.check{background-color: darkorange; border: none;}
}

@media only screen and (max-device-width: 320px){
    .view .list_date th{font-size: 12pt;}
    .view .list_date th span,
    .view .list_date th span.block{margin-left: 0px; letter-spacing: inherit; display: block;}
    
    .view .sign-block th,
    .view .sign-block td{text-align: center; font-size: 11pt; padding: 5px;}
    .view .sign-block td button{font-size: 12pt; padding: 5px; font-weight: bolder;}
    .view .sign-block td button.check{background-color: darkorange; border: none;}
}


/* ===============================
   ✅ 修正版滾動與版面調整設定
   =============================== */
html, body {
  height: 100%;
  overflow: hidden; /* 讓內層控制滾動 */
  margin: 0;
  padding: 0;
}

body {
  color: #666;
  font-size: 16px; /* ✅ 恢復正常字體大小，避免高度錯誤 */
}

#content_area {
  height: 100vh;
  overflow: auto; /* ✅ 支援上下左右滾動 */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.view .container.view-block {
  width: 100%;
  display: block;
  overflow: auto; /* ✅ 支援上下左右滾動 */
  -webkit-overflow-scrolling: touch;
}

.view .container.view-block table {
  width: max-content; /* ✅ 讓表格可超出容器寬度 */
  min-width: 100%;
}

.footer {
  position: relative; /* ✅ 防止壓縮內容 */
}



/* ===============================
   ✅ 第二版修正版：只在 .view 頁面鎖定滾動
   =============================== */

/* 全域恢復正常滾動 */
html, body {
  height: auto;
  overflow: auto;
}

/* 只在 view 頁面中鎖外層，讓內層控制滾動 */
.view html,
.view body {
  height: 100%;
  overflow: hidden;
}

.view #content_area {
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}