/* ============================================
   PROTOSTAR — Digital Catalog Viewer Styles
   Modular Version
   ============================================ */

:root {
  --bg-app: #f2f2f6;
  --bg-toolbar: #ffffff;
  --bg-sidebar: #f8f8fc;
  --bg-viewer: #e8e8ee;
  --bg-page: #ffffff;
  --bg-input: #f0f0f4;
  --border: rgba(0,0,0,0.1);
  --border-light: rgba(0,0,0,0.05);
  --text: #22222a;
  --text-sec: #5a5a6a;
  --text-muted: #8a8a9a;
  --accent: #b48630;
  --accent-light: #d6af66;
  --accent-glow: rgba(180,134,48,0.12);
  --danger: #ef4444;
  --font: 'Noto Sans JP','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-display: 'Playfair Display',Georgia,serif;
  --radius: 8px;
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
  --toolbar-h: 46px;
  --toolbar-bottom-h: 48px;
  --icon-rail-w: 52px;
  --slide-panel-w: 220px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html,body{
  height:100%;overflow:hidden;
  font-family:var(--font);background:var(--bg-app);color:var(--text);
  font-size:14px;-webkit-font-smoothing:antialiased;
}

button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* ====== ツールバー ====== */
.toolbar-top{
  height:var(--toolbar-h);background:var(--bg-toolbar);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;z-index:100;position:relative;
}
.toolbar-left{display:flex;align-items:center;gap:16px}
.brand{font-weight:700;font-size:.85rem;letter-spacing:2px;display:flex;align-items:center;gap:6px}
.brand-icon{color:var(--accent);font-size:1.1rem}
.catalog-title{font-size:.78rem;color:var(--text-sec);padding-left:16px;border-left:1px solid var(--border)}
.toolbar-right{display:flex;align-items:center;gap:4px}
.toolbar-divider{width:1px;height:24px;background:rgba(255,255,255,.1);margin:0 12px;display:inline-block;vertical-align:middle}
.tb-btn{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--radius);
  font-size:.75rem;color:var(--text);transition:all var(--transition);
}
.tb-btn:hover{background:rgba(0,0,0,.04);color:var(--text)}

#btnDownloadPdf, #btnPrint {
  background: var(--accent-glow);
  color: var(--accent-light);
  border: 1px solid rgba(200,164,92,0.2);
}
#btnDownloadPdf:hover, #btnPrint:hover {
  background: var(--accent);
  color: var(--bg-app);
}
.tb-btn.highlight {
  background: var(--accent);
  color: var(--bg-app);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(200,164,92,0.3);
}
.tb-btn.highlight:hover {
  background: var(--white);
  transform: translateY(-1px);
}
.zoom-controls-top {
  display: flex;
  align-items: center;
}
.zoom-text-top {
  font-weight: 700;
  color: var(--accent);
  margin-left: 4px;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}
.zoom-controls-top .tb-btn:hover .zoom-text-top {
  color: var(--text);
}
.tb-label{display:inline}
@media(max-width:800px){.tb-label{display:none}.catalog-title{display:none}}

/* レスポンス表示制御 */
.desktop-only { display: flex; }
.mobile-only { display: none !important; }
@media(max-width:700px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: flex !important; }
}

/* ====== ドロップダウンメニュー ====== */
.dropdown-wrap { position: relative; }
.dropdown-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #ffffff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px; min-width: 140px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: none; flex-direction: column; gap: 2px; z-index: 200;
}
.dropdown-menu.show { display: flex; }
.dropdown-item {
  text-align: left; padding: 10px 14px; border-radius: 4px;
  font-size: 0.8rem; color: var(--text); transition: all var(--transition);
}
.dropdown-item:hover { background: var(--bg-input); color: var(--accent); }
.dropdown-divider { height: 1px; background: var(--border-light); margin: 4px 0; }

/* ====== メインレイアウト ====== */
.viewer-layout{
  display:flex;
  height:calc(100vh - var(--toolbar-h) - var(--toolbar-bottom-h));
  position:relative;
}

/* ====== サイドバー ====== */
.sidebar{display:flex;flex-shrink:0;height:100%;z-index:50;background:var(--bg-sidebar);border-right:1px solid var(--border)}

.sidebar-icon-rail{
  width:var(--icon-rail-w);display:flex;flex-direction:column;align-items:center;
  padding:8px 0;gap:4px;border-right:1px solid var(--border);flex-shrink:0;background:var(--bg-toolbar);
}
.icon-rail-btn{
  width:40px;height:40px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-sec);transition:all var(--transition);position:relative;
}
.icon-rail-btn:hover{background:rgba(0,0,0,.04);color:var(--text)}
.icon-rail-btn.active{color:var(--accent);background:#fff;box-shadow: 2px 2px 8px rgba(0,0,0,0.05)}
.icon-rail-btn::after{
  content:attr(title);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:var(--text);color:#fff;font-size:.7rem;padding:4px 10px;border-radius:4px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:100;
}
.icon-rail-btn:hover::after{opacity:1}
.icon-rail-spacer{flex-grow:1}
.toggle-chevron{transition:transform var(--transition)}
.sidebar.collapsed .toggle-chevron{transform:rotate(180deg)}

.sidebar-slide-panel{
  width:var(--slide-panel-w);display:flex;flex-direction:column;overflow:hidden;
  transition:width var(--transition);
}
.mobile-help-btn { display: none; }
.sidebar.collapsed .sidebar-slide-panel{width:0}
.sidebar-panel-header{padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.sidebar-panel-title{font-size:.78rem;font-weight:600;color:var(--text-sec);letter-spacing:.5px}
.sidebar-panels{flex:1;overflow:hidden;position:relative}
.sidebar-panel{
  position:absolute;inset:0;overflow-y:auto;padding:10px;
  opacity:0;visibility:hidden;transition:all var(--transition);
  transform: translateX(-10px);
}
.sidebar-panel.active{opacity:1;visibility:visible;transform: translateX(0);}

/* パネル内ボタンリスト */
.panel-button-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 6px;
}
.panel-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}
.w-full {
  width: 100%;
  justify-content: flex-start;
}
.panel-button-list .tb-btn {
  height: 40px;
  font-size: 0.85rem;
  padding: 0 16px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 8px;
}
.panel-button-list .tb-btn:hover {
  background: var(--bg-input);
  border-color: var(--accent);
  color: var(--accent);
}

.sidebar-panel::-webkit-scrollbar{width:4px}
.sidebar-panel::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:2px}

.thumbnail-list{display:flex;flex-direction:column;gap:12px;padding:4px}
.thumbnail-item{cursor:pointer;border-radius:6px;overflow:hidden;border:1px solid var(--border);transition:all var(--transition);background:#fff;padding:4px}
.thumbnail-item:hover{border-color:var(--text-muted);background:var(--bg-input)}
.thumbnail-item.active{border-color:var(--accent);border-width:2px;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.thumbnail-item canvas{width:100%;height:auto;display:block;border-radius:4px}
.thumbnail-label{text-align:center;font-size:.7rem;color:var(--text-sec);padding:4px 0}
.thumbnail-item.active .thumbnail-label{color:var(--accent);font-weight:700}

.toc-list{display:flex;flex-direction:column;gap:4px}
.toc-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-radius:6px;cursor:pointer;transition:all var(--transition);font-size:.85rem;
  border: 1px solid transparent;
}
.toc-item:hover{background:var(--bg-input);border-color:var(--border)}
.toc-item.active{background:#fff;border-color:var(--accent);color:var(--accent);font-weight:600;box-shadow: 2px 2px 8px rgba(0,0,0,0.05)}
.toc-page{font-size:.72rem;color:var(--text-muted);font-weight:400;flex-shrink:0}

/* ====== カタログビューア ====== */
.catalog-viewer{
  flex:1;display:flex;align-items:center;justify-content:center;
  position:relative;background:var(--bg-viewer);overflow:hidden;
  background-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.02)0%,transparent 70%);
}

.pages-container{
  position:relative;display:flex;align-items:center;justify-content:center;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.spread{
  display:flex;
  gap: 0;
  border-radius:0;
  overflow:visible;position:relative;
}
.spread::after{
  display: none;
}
.page{background:var(--bg-page);position:relative;overflow:hidden;margin:0;padding:0;border:none}
.page canvas{display:block;margin:0;padding:0}
.page-left{border:none}
.page-right{border:none}

/* ナビ矢印 */
.nav-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:80px;border-radius:8px;
  background:rgba(255,255,255,0.8);backdrop-filter:blur(8px);
  color:var(--text);display:flex;align-items:center;justify-content:center;
  z-index:20;transition:all var(--transition);opacity:0.3;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.catalog-viewer:hover .nav-arrow{opacity:1}
.nav-arrow:hover{background:var(--accent);color:#fff}
.nav-arrow:disabled{opacity:.1!important;cursor:not-allowed}
.nav-prev{left:16px}.nav-next{right:16px}

/* ====== 下部ツールバー ====== */
.toolbar-bottom{
  height:var(--toolbar-bottom-h);background:var(--bg-toolbar);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:100;
}
.toolbar-bottom-left,.toolbar-bottom-right{flex:1;display:flex;align-items:center;gap:8px;min-width:160px}
.toolbar-bottom-right{justify-content:flex-end}
.toolbar-bottom-center{display:flex;align-items:center;gap:8px}
.tb-btn-sm{
  width:32px;height:32px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-sec);transition:all var(--transition);
}
.tb-btn-sm:hover{background:rgba(255,255,255,.06);color:var(--text)}
.zoom-level{font-size:.75rem;color:var(--text-sec);min-width:38px;text-align:center}

.page-nav-btn{
  width:32px;height:32px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-sec);transition:all var(--transition);
  border: 1px solid var(--border);
  background: #fff;
}
.page-nav-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.page-nav-btn:disabled{opacity:.3;cursor:not-allowed}
.page-indicator{
  display:flex;align-items:center;gap:4px;
  background:var(--bg-input);border:1px solid var(--border);border-radius:6px;padding:4px 8px;
}
.page-input{
  width:36px;background:none;border:none;color:var(--text);
  font-family:var(--font);font-size:.8rem;text-align:center;outline:none;-webkit-appearance:none;-moz-appearance:textfield;appearance:none;
}
.page-input::-webkit-inner-spin-button,.page-input::-webkit-outer-spin-button{-webkit-appearance:none}
.page-separator{color:var(--text-muted);font-size:.8rem}
.page-total{font-size:.8rem;color:var(--text-sec)}
.page-go{
  padding:2px 8px;background:var(--accent);color:var(--bg-app);
  font-size:.68rem;font-weight:700;border-radius:4px;margin-left:4px;transition:background var(--transition);
}
.page-go:hover{background:var(--accent-light)}
.page-slider-wrap{width:160px;display:flex;align-items:center;margin-left:8px}
.page-slider{
  width:100%;height:4px;-webkit-appearance:none;appearance:none;
  background:rgba(0,0,0,.08);border-radius:2px;outline:none;cursor:pointer;
}
.page-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;cursor:pointer;transition:transform .15s;
}
.page-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.page-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid #fff;cursor:pointer}
.status-text{font-size:.75rem;color:var(--text-muted)}

/* ====== ヘルプ・共有モーダル共通 ====== */
.help-overlay, .share-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  z-index:5000;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:all var(--transition);
}
.help-overlay.open, .share-overlay.open{opacity:1;visibility:visible}
.help-modal, .share-modal{
  background:var(--bg-sidebar);border:1px solid var(--border);border-radius:16px;
  padding:32px;max-width:500px;width:90%;position:relative;
  transform:translateY(20px);transition:transform .3s ease;
}
.help-overlay.open .help-modal, .share-overlay.open .share-modal{transform:translateY(0)}
.help-modal h2, .share-modal h2{font-size:1.1rem;margin-bottom:24px;font-weight:600}
.help-close, .share-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
  font-size:1.1rem;display:flex;align-items:center;justify-content:center;
  color:var(--text-sec);transition:all var(--transition);
}
.help-close:hover, .share-close:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.help-content, .share-content{display:flex;flex-direction:column;gap:16px}

/* ヘルプ項目 */
.help-item{display:flex;gap:14px;align-items:flex-start}
.help-icon{
  width:40px;height:40px;background:var(--accent-glow);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;
}
.help-item h4{font-size:.85rem;margin-bottom:2px}
.help-item p{font-size:.78rem;color:var(--text-sec);line-height:1.5}

/* 共有モーダル固有 */
.share-input-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
#shareUrlInput {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
#btnCopyLink {
  width: 100%;
  height: 44px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
#btnCopyLink:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
}
.share-tip {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ====== モバイル専用ツールエリア ====== */
.mobile-tools-area{
  display:none; /* デフォルトは非表示 */
  padding:16px 12px;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  flex-direction:column;
  gap:12px;
}
.mobile-nav-row, .mobile-action-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.mobile-action-btn{
  flex:1;
  justify-content:center;
  font-size:0.75rem;
  height:32px;
  padding:0 4px;
}


/* ====== レスポンシブ ====== */
@media(max-width:700px){
  .sidebar:not(.collapsed){position:absolute;top:0;left:0;height:100%;z-index:200;box-shadow: 0 0 20px rgba(0,0,0,0.2);}
  .tb-label{display:none}
  .page-slider-wrap{display:none}
  .toolbar-bottom-right{display:none}
  #btnHelp{display:none}
  .mobile-help-btn{display:flex}
  .brand{font-size:0.9rem;white-space:nowrap}
  .catalog-title{font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;padding-left:8px}
  
  /* スマホ専用UIの切り替え */
  .mobile-tools-area{display:flex}
  .toolbar-bottom-center{display:none}
}

/* ====== 印刷用設定 ====== */
@media print {
  @page { size: auto; margin: 0; }
  html, body { background: #fff; width: 100%; height: 100%; margin: 0; padding: 0; overflow: visible; }
  .toolbar-top, .toolbar-bottom, .sidebar, .nav-arrow, .help-overlay { display: none !important; }
  .catalog-viewer { background: none !important; padding: 0; margin: 0; overflow: visible; display: block; height: auto; }
  .pages-container { transform: none !important; position: relative; top: 0; left: 0; display: block !important; }
  .print-all-active .viewer-layout { display: none !important; }
  .print-all-container { display: block !important; width: 100%; }
  .print-all-container img, .print-all-container canvas {
    display: block !important; width: 100% !important; height: auto !important;
    max-width: 100vw !important; max-height: 100vh !important;
    object-fit: contain !important; page-break-after: always !important;
    page-break-inside: avoid !important; margin: 0 auto !important;
  }
}
.print-all-container { display: none; }

/* パン（移動）モード時のスタイル: カタログ表示エリア（viewer全体とpages）は常に grab に固定 */
.catalog-viewer, .pages-container { cursor: grab !important; }
.catalog-viewer:active, .pages-container:active, 
body .pages-container.dragging, body .catalog-viewer.dragging { cursor: grabbing !important; }

/* ただし、カタログ表示エリア内のボタン（左右のナビ矢印など）はクリックできる矢印/ポインタにする */
.catalog-viewer button { cursor: pointer !important; }

/* ====== 読み込み中オーバーレイ ====== */
.loading-overlay {
  position: fixed; inset: 0; background: rgba(255, 255, 255, 0.84); backdrop-filter: blur(5px);
  z-index: 10000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.loading-overlay.active { display: flex; }
.loading-spinner {
  width: 48px; height: 48px; border: 4px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-weight: 600; color: var(--text); font-size: 0.95rem; letter-spacing: 1px; }